tailwindcss 3.0.0-alpha.1 → 3.0.0-alpha.2

package/lib/lib/setupContextUtils.js

@@ -22,6 +22,7 @@ var _corePlugins = require("../corePlugins");
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
+var _negateValue = _interopRequireDefault(require("../util/negateValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -50,6 +51,30 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function parseVariantFormatString(input) {
+    if (input.includes('{')) {
+        if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
+        return input.split(/{(.*)}/gim).flatMap((line)=>parseVariantFormatString(line)
+        ).filter(Boolean);
+    }
+    return [
+        input.trim()
+    ];
+}
+function isBalanced(input) {
+    let count = 0;
+    for (let char of input){
+        if (char === '{') {
+            count++;
+        } else if (char === '}') {
+            if (--count < 0) {
+                return false // unbalanced
+                ;
+            }
+        }
+    }
+    return count === 0;
+}
 function insertInto(list, value, { before =[]  } = {
 }) {
     before = [].concat(before);
@@ -211,15 +236,41 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         if (!options.respectPrefix) {
             return identifier;
         }
-        if (typeof context.tailwindConfig.prefix === 'function') {
-            return (0, _prefixSelector).default(context.tailwindConfig.prefix, `.${identifier}`).substr(1);
-        }
         return context.tailwindConfig.prefix + identifier;
     }
     return {
         addVariant (variantName, variantFunctions, options = {
         }) {
-            variantFunctions = [].concat(variantFunctions);
+            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
+                if (typeof variantFunction !== 'string') {
+                    // Safelist public API functions
+                    return ({ modifySelectors , container , separator  })=>{
+                        return variantFunction({
+                            modifySelectors,
+                            container,
+                            separator
+                        });
+                    };
+                }
+                variantFunction = variantFunction.replace(/\n+/g, '').replace(/\s{1,}/g, ' ').trim();
+                let fns = parseVariantFormatString(variantFunction).map((str)=>{
+                    if (!str.startsWith('@')) {
+                        return ({ format  })=>format(str)
+                        ;
+                    }
+                    let [, name, params] = /@(.*?) (.*)/g.exec(str);
+                    return ({ wrap  })=>wrap(_postcss.default.atRule({
+                            name,
+                            params
+                        }))
+                    ;
+                }).reverse();
+                return (api)=>{
+                    for (let fn of fns){
+                        fn(api);
+                    }
+                };
+            });
             insertInto(variantList, variantName, options);
             variantMap.set(variantName, variantFunctions);
         },
@@ -351,7 +402,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 function wrapped(modifier, { isOnlyPlugin  }) {
                     let { type ='any'  } = options;
                     type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options.values, tailwindConfig);
+                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
@@ -401,7 +452,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 function wrapped(modifier, { isOnlyPlugin  }) {
                     let { type ='any'  } = options;
                     type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options.values, tailwindConfig);
+                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
@@ -556,6 +607,7 @@ function resolvePlugins(context, root) {
         _corePlugins.variantPlugins['directionVariants'],
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['darkVariants'],
+        _corePlugins.variantPlugins['printVariant'],
         _corePlugins.variantPlugins['screenVariants'], 
     ];
     return [
@@ -622,9 +674,9 @@ function registerPlugins(plugins, context) {
         ...context.variantOrder.values()
     ].shift();
     // Build variantMap
-    for (let [variantName, variantFunctions] of variantMap.entries()){
+    for (let [variantName, variantFunctions1] of variantMap.entries()){
         let sort = context.variantOrder.get(variantName);
-        context.variantMap.set(variantName, variantFunctions.map((variantFunction, idx)=>[
+        context.variantMap.set(variantName, variantFunctions1.map((variantFunction, idx)=>[
                 sort << BigInt(idx),
                 variantFunction
             ]
@@ -634,22 +686,22 @@ function registerPlugins(plugins, context) {
     let safelist = ((_safelist = context.tailwindConfig.safelist) !== null && _safelist !== void 0 ? _safelist : []).filter(Boolean);
     if (safelist.length > 0) {
         let checks = [];
-        for (let value of safelist){
-            if (typeof value === 'string') {
+        for (let value1 of safelist){
+            if (typeof value1 === 'string') {
                 context.changedContent.push({
-                    content: value,
+                    content: value1,
                     extension: 'html'
                 });
                 continue;
             }
-            if (value instanceof RegExp) {
+            if (value1 instanceof RegExp) {
                 _log.default.warn('root-regex', [
                     'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
                     'Update your `safelist` configuration to eliminate this warning.'
                 ]);
                 continue;
             }
-            checks.push(value);
+            checks.push(value1);
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
@@ -702,11 +754,16 @@ function registerPlugins(plugins, context) {
         for (let util of classList){
             if (Array.isArray(util)) {
                 let [utilName, options] = util;
+                let negativeClasses = [];
                 var ref;
-                for (let value of Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
+                for (let [key, value] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
                 })){
-                    output.push((0, _nameClass).formatClass(utilName, value));
+                    output.push((0, _nameClass).formatClass(utilName, key));
+                    if ((options === null || options === void 0 ? void 0 : options.supportsNegativeValues) && (0, _negateValue).default(value)) {
+                        negativeClasses.push((0, _nameClass).formatClass(utilName, `-${key}`));
+                    }
                 }
+                output.push(...negativeClasses);
             } else {
                 output.push(util);
             }

package/lib/lib/setupWatchingContext.js

@@ -75,7 +75,11 @@ function rebootWatcher(context, configPath, configDependencies, candidateFiles)
             ...candidateFiles,
             ...configDependencies
         ], {
-            ignoreInitial: true
+            ignoreInitial: true,
+            awaitWriteFinish: process.platform === 'win32' ? {
+                stabilityThreshold: 50,
+                pollInterval: 10
+            } : false
         });
         setWatcher(context, watcher);
         watcher.on('add', (file)=>{

package/lib/lib/sharedState.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.contextSourcesMap = exports.configContextMap = exports.env = exports.contextMap = void 0;
+exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
     TAILWIND_MODE: process.env.TAILWIND_MODE,
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: process.env.DEBUG !== undefined,
+    DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
     TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
     TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR
 };

package/lib/processTailwindFeatures.js

@@ -10,8 +10,10 @@ var _evaluateTailwindFunctions = _interopRequireDefault(require("./lib/evaluateT
 var _substituteScreenAtRules = _interopRequireDefault(require("./lib/substituteScreenAtRules"));
 var _resolveDefaultsAtRules = _interopRequireDefault(require("./lib/resolveDefaultsAtRules"));
 var _collapseAdjacentRules = _interopRequireDefault(require("./lib/collapseAdjacentRules"));
+var _collapseDuplicateDeclarations = _interopRequireDefault(require("./lib/collapseDuplicateDeclarations"));
 var _detectNesting = _interopRequireDefault(require("./lib/detectNesting"));
 var _setupContextUtils = require("./lib/setupContextUtils");
+var _featureFlags = require("./featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -36,6 +38,7 @@ function processTailwindFeatures(setupContext) {
         if (context.tailwindConfig.separator === '-') {
             throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
         }
+        (0, _featureFlags).issueFlagNotices(context.tailwindConfig);
         (0, _detectNesting).default(context)(root, result);
         (0, _expandTailwindAtRules).default(context)(root, result);
         (0, _expandApplyAtRules).default(context)(root, result);
@@ -43,5 +46,6 @@ function processTailwindFeatures(setupContext) {
         (0, _substituteScreenAtRules).default(context)(root, result);
         (0, _resolveDefaultsAtRules).default(context)(root, result);
         (0, _collapseAdjacentRules).default(context)(root, result);
+        (0, _collapseDuplicateDeclarations).default(context)(root, result);
     };
 }

package/lib/util/createUtilityPlugin.js

@@ -16,7 +16,7 @@ function createUtilityPlugin(themeKey, utilityVariations = [
             themeKey
         ]
     ]
-], { filterDefault =false , type ='any'  } = {
+], { filterDefault =false , ...options } = {
 }) {
     let transformValue = (0, _transformThemeValue).default(themeKey);
     return function({ matchUtilities , theme  }) {
@@ -25,8 +25,8 @@ function createUtilityPlugin(themeKey, utilityVariations = [
                 utilityVariation
             ];
             var ref;
-            matchUtilities(group.reduce((obj, [classPrefix, properties])=>{
-                return Object.assign(obj, {
+            matchUtilities(group.reduce((obj1, [classPrefix, properties])=>{
+                return Object.assign(obj1, {
                     [classPrefix]: (value)=>{
                         return properties.reduce((obj, name)=>{
                             if (Array.isArray(name)) {
@@ -43,10 +43,10 @@ function createUtilityPlugin(themeKey, utilityVariations = [
                 });
             }, {
             }), {
+                ...options,
                 values: filterDefault ? Object.fromEntries(Object.entries((ref = theme(themeKey)) !== null && ref !== void 0 ? ref : {
                 }).filter(([modifier])=>modifier !== 'DEFAULT'
-                )) : theme(themeKey),
-                type
+                )) : theme(themeKey)
             });
         }
     };

package/lib/util/dataTypes.js

@@ -8,6 +8,7 @@ exports.number = number;
 exports.percentage = percentage;
 exports.length = length;
 exports.lineWidth = lineWidth;
+exports.shadow = shadow;
 exports.color = color;
 exports.image = image;
 exports.gradient = gradient;
@@ -17,19 +18,29 @@ exports.genericName = genericName;
 exports.absoluteSize = absoluteSize;
 exports.relativeSize = relativeSize;
 var _color = require("./color");
+var _parseBoxShadowValue = require("./parseBoxShadowValue");
 // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
 let COMMA = /,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 ;
 let UNDERSCORE = /_(?![^(]*\))/g // Underscore separator that is not located between brackets. E.g.: `rgba(255,_255,_255)_black` these don't count.
 ;
-function normalize(value) {
+function normalize(value, isRoot = true) {
+    // Keep raw strings if it starts with `url(`
+    if (value.includes('url(')) {
+        return value.split(/(url\(.*?\))/g).filter(Boolean).map((part)=>{
+            if (/^url\(.*?\)$/.test(part)) {
+                return part;
+            }
+            return normalize(part, false);
+        }).join('');
+    }
     // Convert `_` to ` `, except for escaped underscores `\_`
     value = value.replace(/([^\\])_+/g, (fullMatch, characterBefore)=>characterBefore + ' '.repeat(fullMatch.length - 1)
     ).replace(/^_/g, ' ').replace(/\\_/g, '_');
     // Remove leftover whitespace
-    value = value.trim();
-    // Keep raw strings if it starts with `url(`
-    if (value.startsWith('url(')) return value;
+    if (isRoot) {
+        value = value.trim();
+    }
     // Add spaces around operators inside calc() that do not follow an operator
     // or '('.
     return value.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ');
@@ -73,6 +84,15 @@ let lineWidths = new Set([
 function lineWidth(value) {
     return lineWidths.has(value);
 }
+function shadow(value) {
+    let parsedShadows = (0, _parseBoxShadowValue).parseBoxShadowValue(normalize(value));
+    for (let parsedShadow of parsedShadows){
+        if (!parsedShadow.valid) {
+            return false;
+        }
+    }
+    return true;
+}
 function color(value) {
     let colors = 0;
     let result = value.split(UNDERSCORE).every((part)=>{

package/lib/util/formatVariantSelector.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.formatVariantSelector = formatVariantSelector;
+exports.finalizeSelector = finalizeSelector;
+exports.selectorFunctions = void 0;
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
+var _unesc = _interopRequireDefault(require("postcss-selector-parser/dist/util/unesc"));
+var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
+var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+let MERGE = ':merge';
+let PARENT = '&';
+let selectorFunctions = new Set([
+    MERGE
+]);
+exports.selectorFunctions = selectorFunctions;
+function formatVariantSelector(current, ...others) {
+    for (let other of others){
+        let incomingValue = resolveFunctionArgument(other, MERGE);
+        if (incomingValue !== null) {
+            let existingValue = resolveFunctionArgument(current, MERGE, incomingValue);
+            if (existingValue !== null) {
+                let existingTarget = `${MERGE}(${incomingValue})`;
+                let splitIdx = other.indexOf(existingTarget);
+                let addition = other.slice(splitIdx + existingTarget.length).split(' ')[0];
+                current = current.replace(existingTarget, existingTarget + addition);
+                continue;
+            }
+        }
+        current = other.replace(PARENT, current);
+    }
+    return current;
+}
+function finalizeSelector(format, { selector: selector1 , candidate , context  }) {
+    var ref, ref1;
+    var ref2;
+    let base = candidate.split((ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':').pop();
+    if (context === null || context === void 0 ? void 0 : (ref1 = context.tailwindConfig) === null || ref1 === void 0 ? void 0 : ref1.prefix) {
+        format = (0, _prefixSelector).default(context.tailwindConfig.prefix, format);
+    }
+    format = format.replace(PARENT, `.${(0, _escapeClassName).default(candidate)}`);
+    // Normalize escaped classes, e.g.:
+    //
+    // The idea would be to replace the escaped `base` in the selector with the
+    // `format`. However, in css you can escape the same selector in a few
+    // different ways. This would result in different strings and therefore we
+    // can't replace it properly.
+    //
+    //               base: bg-[rgb(255,0,0)]
+    //   base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
+    //       escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
+    //
+    selector1 = (0, _postcssSelectorParser).default((selectors)=>{
+        return selectors.walkClasses((node)=>{
+            if (node.raws && node.value.includes(base)) {
+                node.raws.value = (0, _escapeClassName).default((0, _unesc).default(node.raws.value));
+            }
+            return node;
+        });
+    }).processSync(selector1);
+    // We can safely replace the escaped base now, since the `base` section is
+    // now in a normalized escaped value.
+    selector1 = selector1.replace(`.${(0, _escapeClassName).default(base)}`, format);
+    // Remove unnecessary pseudo selectors that we used as placeholders
+    return (0, _postcssSelectorParser).default((selectors)=>{
+        return selectors.map((selector)=>{
+            selector.walkPseudos((p)=>{
+                if (selectorFunctions.has(p.value)) {
+                    p.replaceWith(p.nodes);
+                }
+                return p;
+            });
+            return selector;
+        });
+    }).processSync(selector1);
+}
+function resolveFunctionArgument(haystack, needle, arg) {
+    let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle);
+    if (startIdx === -1) return null;
+    // Start inside the `(`
+    startIdx += needle.length + 1;
+    let target = '';
+    let count = 0;
+    for (let char of haystack.slice(startIdx)){
+        if (char !== '(' && char !== ')') {
+            target += char;
+        } else if (char === '(') {
+            target += char;
+            count++;
+        } else if (char === ')') {
+            if (--count < 0) break; // unbalanced
+            target += char;
+        }
+    }
+    return target;
+}

package/lib/util/nameClass.js

@@ -21,7 +21,7 @@ function formatClass(classPrefix, key) {
     if (key === 'DEFAULT') {
         return classPrefix;
     }
-    if (key === '-') {
+    if (key === '-' || key === '-DEFAULT') {
         return `-${classPrefix}`;
     }
     if (key.startsWith('-')) {

package/lib/util/negateValue.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = _default;
 function _default(value) {
     value = `${value}`;
+    if (value === '0') {
+        return '0';
+    }
     // Flip sign of numbers
     if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
         return value.replace(/^[+-]?/, (sign)=>sign === '-' ? '' : '-'
@@ -13,5 +16,4 @@ function _default(value) {
     if (value.includes('var(') || value.includes('calc(')) {
         return `calc(${value} * -1)`;
     }
-    return value;
 }

package/lib/util/normalizeConfig.js

@@ -120,6 +120,17 @@ function normalizeConfig(config) {
         if (Array.isArray(purge === null || purge === void 0 ? void 0 : (ref = purge.options) === null || ref === void 0 ? void 0 : ref.safelist)) return purge.options.safelist;
         return [];
     })();
+    // Normalize prefix option
+    if (typeof config.prefix === 'function') {
+        _log.default.warn('prefix-function', [
+            'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
+            'Update `prefix` in your configuration to be a string to eliminate this warning.'
+        ]);
+        config.prefix = '';
+    } else {
+        var _prefix;
+        config.prefix = (_prefix = config.prefix) !== null && _prefix !== void 0 ? _prefix : '';
+    }
     // Normalize the `content`
     config.content = {
         files: (()=>{
@@ -145,16 +156,19 @@ function normalizeConfig(config) {
             })();
             let extractors = {
             };
-            extractors.DEFAULT = (()=>{
-                var ref, ref37, ref38, ref39;
-                if ((ref = config.purge) === null || ref === void 0 ? void 0 : (ref37 = ref.options) === null || ref37 === void 0 ? void 0 : ref37.defaultExtractor) {
+            let defaultExtractor = (()=>{
+                var ref, ref10, ref11, ref12;
+                if ((ref = config.purge) === null || ref === void 0 ? void 0 : (ref10 = ref.options) === null || ref10 === void 0 ? void 0 : ref10.defaultExtractor) {
                     return config.purge.options.defaultExtractor;
                 }
-                if ((ref38 = config.content) === null || ref38 === void 0 ? void 0 : (ref39 = ref38.options) === null || ref39 === void 0 ? void 0 : ref39.defaultExtractor) {
+                if ((ref11 = config.content) === null || ref11 === void 0 ? void 0 : (ref12 = ref11.options) === null || ref12 === void 0 ? void 0 : ref12.defaultExtractor) {
                     return config.content.options.defaultExtractor;
                 }
                 return undefined;
             })();
+            if (defaultExtractor !== undefined) {
+                extractors.DEFAULT = defaultExtractor;
+            }
             // Functions
             if (typeof extract === 'function') {
                 extractors.DEFAULT = extract;
@@ -171,11 +185,11 @@ function normalizeConfig(config) {
         })(),
         transform: (()=>{
             let transform = (()=>{
-                var ref, ref49, ref50, ref51, ref52, ref53;
+                var ref, ref13, ref14, ref15, ref16, ref17;
                 if ((ref = config.purge) === null || ref === void 0 ? void 0 : ref.transform) return config.purge.transform;
-                if ((ref49 = config.content) === null || ref49 === void 0 ? void 0 : ref49.transform) return config.content.transform;
-                if ((ref50 = config.purge) === null || ref50 === void 0 ? void 0 : (ref51 = ref50.transform) === null || ref51 === void 0 ? void 0 : ref51.DEFAULT) return config.purge.transform.DEFAULT;
-                if ((ref52 = config.content) === null || ref52 === void 0 ? void 0 : (ref53 = ref52.transform) === null || ref53 === void 0 ? void 0 : ref53.DEFAULT) return config.content.transform.DEFAULT;
+                if ((ref13 = config.content) === null || ref13 === void 0 ? void 0 : ref13.transform) return config.content.transform;
+                if ((ref14 = config.purge) === null || ref14 === void 0 ? void 0 : (ref15 = ref14.transform) === null || ref15 === void 0 ? void 0 : ref15.DEFAULT) return config.purge.transform.DEFAULT;
+                if ((ref16 = config.content) === null || ref16 === void 0 ? void 0 : (ref17 = ref16.transform) === null || ref17 === void 0 ? void 0 : ref17.DEFAULT) return config.content.transform.DEFAULT;
                 return {
                 };
             })();

package/lib/util/parseBoxShadowValue.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.parseBoxShadowValue = parseBoxShadowValue;
+exports.formatBoxShadowValue = formatBoxShadowValue;
+let KEYWORDS = new Set([
+    'inset',
+    'inherit',
+    'initial',
+    'revert',
+    'unset'
+]);
+let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
+;
+let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
+;
+let LENGTH = /^-?(\d+)(.*?)$/g;
+function parseBoxShadowValue(input) {
+    let shadows = input.split(COMMA);
+    return shadows.map((shadow)=>{
+        let value = shadow.trim();
+        let result = {
+            raw: value
+        };
+        let parts = value.split(SPACE);
+        let seen = new Set();
+        for (let part of parts){
+            // Reset index, since the regex is stateful.
+            LENGTH.lastIndex = 0;
+            // Keyword
+            if (!seen.has('KEYWORD') && KEYWORDS.has(part)) {
+                result.keyword = part;
+                seen.add('KEYWORD');
+            } else if (LENGTH.test(part)) {
+                if (!seen.has('X')) {
+                    result.x = part;
+                    seen.add('X');
+                } else if (!seen.has('Y')) {
+                    result.y = part;
+                    seen.add('Y');
+                } else if (!seen.has('BLUR')) {
+                    result.blur = part;
+                    seen.add('BLUR');
+                } else if (!seen.has('SPREAD')) {
+                    result.spread = part;
+                    seen.add('SPREAD');
+                }
+            } else {
+                if (!result.color) {
+                    result.color = part;
+                } else {
+                    if (!result.unknown) result.unknown = [];
+                    result.unknown.push(part);
+                }
+            }
+        }
+        // Check if valid
+        result.valid = result.x !== undefined && result.y !== undefined;
+        return result;
+    });
+}
+function formatBoxShadowValue(shadows) {
+    return shadows.map((shadow)=>{
+        if (!shadow.valid) {
+            return shadow.raw;
+        }
+        return [
+            shadow.keyword,
+            shadow.x,
+            shadow.y,
+            shadow.blur,
+            shadow.spread,
+            shadow.color
+        ].filter(Boolean).join(' ');
+    }).join(', ');
+}