1 // vendor.scss v1.0 | @ajlkn | MIT licensed */
14 /// Properties that should be vendorized.
15 /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
22 'animation-direction',
24 'animation-fill-mode',
25 'animation-iteration-count',
27 'animation-play-state',
28 'animation-timing-function',
36 // Background image options.
65 'font-feature-settings',
66 'font-language-override',
67 'font-variant-ligatures',
72 // Fragmented borders and backgrounds.
73 'box-decoration-break',
84 'grid-template-columns',
131 // Scroll snap points.
132 'scroll-snap-coordinate',
133 'scroll-snap-destination',
134 'scroll-snap-points-x',
135 'scroll-snap-points-y',
139 'shape-image-threshold',
150 'text-decoration-color',
151 'text-decoration-line',
152 'text-decoration-skip',
153 'text-decoration-style',
157 'text-emphasis-color',
158 'text-emphasis-position',
159 'text-emphasis-style',
172 'backface-visibility',
174 'perspective-origin',
180 'transition-duration',
181 'transition-property',
182 'transition-timing-function',
195 /// Values that should be vendorized.
196 /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
219 'repeating-linear-gradient',
221 'repeating-radial-gradient',
252 /// Removes a specific item from a list.
253 /// @author Hugo Giraudel
254 /// @param {list} $list List.
255 /// @param {integer} $index Index.
256 /// @return {list} Updated list.
257 @function remove-nth($list, $index) {
261 @if type-of($index) != number {
262 @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
264 @else if $index == 0 {
265 @warn "List index 0 must be a non-zero integer for `remove-nth`.";
267 @else if abs($index) > length($list) {
268 @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
273 $index: if($index < 0, length($list) + $index + 1, $index);
275 @for $i from 1 through length($list) {
278 $result: append($result, nth($list, $i));
289 /// Replaces a substring within another string.
290 /// @author Hugo Giraudel
291 /// @param {string} $string String.
292 /// @param {string} $search Substring.
293 /// @param {string} $replace Replacement.
294 /// @return {string} Updated string.
295 @function str-replace($string, $search, $replace: '') {
297 $index: str-index($string, $search);
300 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
307 /// Replaces a substring within each string in a list.
308 /// @param {list} $strings List of strings.
309 /// @param {string} $search Substring.
310 /// @param {string} $replace Replacement.
311 /// @return {list} Updated list of strings.
312 @function str-replace-all($strings, $search, $replace: '') {
314 @each $string in $strings {
315 $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
324 /// Wraps @content in vendorized keyframe blocks.
325 /// @param {string} $name Name.
326 @mixin keyframes($name) {
328 @-moz-keyframes #{$name} { @content; }
329 @-webkit-keyframes #{$name} { @content; }
330 @-ms-keyframes #{$name} { @content; }
331 @keyframes #{$name} { @content; }
335 /// Vendorizes a declaration's property and/or value(s).
336 /// @param {string} $property Property.
337 /// @param {mixed} $value String/list of value(s).
338 @mixin vendor($property, $value) {
340 // Determine if property should expand.
341 $expandProperty: index($vendor-properties, $property);
343 // Determine if value should expand (and if so, add '-prefix-' placeholder).
347 @each $y in $vendor-values {
348 @if $y == str-slice($x, 1, str-length($y)) {
350 $value: set-nth($value, index($value, $x), '-prefix-' + $x);
358 @if $expandProperty {
359 @each $vendor in $vendor-prefixes {
360 #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
364 // Expand just the value?
365 @elseif $expandValue {
366 @each $vendor in $vendor-prefixes {
367 #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
371 // Neither? Treat them as a normal declaration.
373 #{$property}: #{$value};