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

package/lib/util/pluginUtils.js

@@ -2,12 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.applyStateToMarker = applyStateToMarker;
 exports.updateAllClasses = updateAllClasses;
-exports.updateLastClasses = updateLastClasses;
-exports.transformAllSelectors = transformAllSelectors;
-exports.transformAllClasses = transformAllClasses;
-exports.transformLastClasses = transformLastClasses;
 exports.asValue = asValue;
 exports.asColor = asColor;
 exports.asLookupValue = asLookupValue;
@@ -15,167 +10,63 @@ exports.coerceValue = coerceValue;
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _escapeCommas = _interopRequireDefault(require("./escapeCommas"));
 var _withAlphaVariable = require("./withAlphaVariable");
-var _isKeyframeRule = _interopRequireDefault(require("./isKeyframeRule"));
 var _dataTypes = require("./dataTypes");
+var _negateValue = _interopRequireDefault(require("./negateValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function applyStateToMarker(selector, marker, state, join) {
-    let markerIdx = selector.search(new RegExp(`${marker}[:[]`));
-    if (markerIdx === -1) {
-        return join(marker + state, selector);
-    }
-    let markerSelector = selector.slice(markerIdx, selector.indexOf(' ', markerIdx));
-    return join(marker + state + markerSelector.slice(markerIdx + marker.length), selector.replace(markerSelector, ''));
-}
-function updateAllClasses(selectors, updateClass) {
+function updateAllClasses(selectors1, updateClass) {
     let parser = (0, _postcssSelectorParser).default((selectors)=>{
         selectors.walkClasses((sel)=>{
-            let updatedClass = updateClass(sel.value, {
-                withAttr (className, attr) {
-                    sel.parent.insertAfter(sel, _postcssSelectorParser.default.attribute({
-                        attribute: attr.slice(1, -1)
-                    }));
-                    return className;
-                },
-                withPseudo (className, pseudo) {
-                    sel.parent.insertAfter(sel, _postcssSelectorParser.default.pseudo({
-                        value: pseudo
-                    }));
-                    return className;
-                }
-            });
+            let updatedClass = updateClass(sel.value);
             sel.value = updatedClass;
             if (sel.raws && sel.raws.value) {
                 sel.raws.value = (0, _escapeCommas).default(sel.raws.value);
             }
         });
     });
-    let result = parser.processSync(selectors);
+    let result = parser.processSync(selectors1);
     return result;
 }
-function updateLastClasses(selectors, updateClass) {
-    let parser = (0, _postcssSelectorParser).default((selectors)=>{
-        selectors.each((sel)=>{
-            let lastClass = sel.filter(({ type  })=>type === 'class'
-            ).pop();
-            if (lastClass === undefined) {
-                return;
-            }
-            let updatedClass = updateClass(lastClass.value, {
-                withPseudo (className, pseudo) {
-                    lastClass.parent.insertAfter(lastClass, _postcssSelectorParser.default.pseudo({
-                        value: `${pseudo}`
-                    }));
-                    return className;
-                }
-            });
-            lastClass.value = updatedClass;
-            if (lastClass.raws && lastClass.raws.value) {
-                lastClass.raws.value = (0, _escapeCommas).default(lastClass.raws.value);
-            }
-        });
-    });
-    let result = parser.processSync(selectors);
-    return result;
-}
-function splitByNotEscapedCommas(str) {
-    let chunks = [];
-    let currentChunk = '';
-    for(let i = 0; i < str.length; i++){
-        if (str[i] === ',' && str[i - 1] !== '\\') {
-            chunks.push(currentChunk);
-            currentChunk = '';
-        } else {
-            currentChunk += str[i];
-        }
+function resolveArbitraryValue(modifier, validate) {
+    if (!isArbitraryValue(modifier)) {
+        return undefined;
     }
-    chunks.push(currentChunk);
-    return chunks;
-}
-function transformAllSelectors(transformSelector, { wrap , withRule  } = {
-}) {
-    return ({ container  })=>{
-        container.walkRules((rule)=>{
-            if ((0, _isKeyframeRule).default(rule)) {
-                return rule;
-            }
-            let transformed = splitByNotEscapedCommas(rule.selector).map(transformSelector).join(',');
-            rule.selector = transformed;
-            if (withRule) {
-                withRule(rule);
-            }
-            return rule;
-        });
-        if (wrap) {
-            let wrapper = wrap();
-            let nodes = container.nodes;
-            container.removeAll();
-            wrapper.append(nodes);
-            container.append(wrapper);
-        }
-    };
-}
-function transformAllClasses(transformClass, { wrap , withRule  } = {
-}) {
-    return ({ container  })=>{
-        container.walkRules((rule)=>{
-            let selector = rule.selector;
-            let variantSelector = updateAllClasses(selector, transformClass);
-            rule.selector = variantSelector;
-            if (withRule) {
-                withRule(rule);
-            }
-            return rule;
-        });
-        if (wrap) {
-            let wrapper = wrap();
-            let nodes = container.nodes;
-            container.removeAll();
-            wrapper.append(nodes);
-            container.append(wrapper);
-        }
-    };
+    let value = modifier.slice(1, -1);
+    if (!validate(value)) {
+        return undefined;
+    }
+    return (0, _dataTypes).normalize(value);
 }
-function transformLastClasses(transformClass, { wrap , withRule  } = {
-}) {
-    return ({ container  })=>{
-        container.walkRules((rule)=>{
-            let selector = rule.selector;
-            let variantSelector = updateLastClasses(selector, transformClass);
-            rule.selector = variantSelector;
-            if (withRule) {
-                withRule(rule);
-            }
-            return rule;
-        });
-        if (wrap) {
-            let wrapper = wrap();
-            let nodes = container.nodes;
-            container.removeAll();
-            wrapper.append(nodes);
-            container.append(wrapper);
+function asNegativeValue(modifier, lookup = {
+}, validate) {
+    let positiveValue = lookup[modifier];
+    if (positiveValue !== undefined) {
+        return (0, _negateValue).default(positiveValue);
+    }
+    if (isArbitraryValue(modifier)) {
+        let resolved = resolveArbitraryValue(modifier, validate);
+        if (resolved === undefined) {
+            return undefined;
         }
-    };
+        return (0, _negateValue).default(resolved);
+    }
 }
-function asValue(modifier, lookup = {
+function asValue(modifier, options = {
 }, { validate =()=>true
   } = {
 }) {
-    let value = lookup[modifier];
+    var ref;
+    let value = (ref = options.values) === null || ref === void 0 ? void 0 : ref[modifier];
     if (value !== undefined) {
         return value;
     }
-    if (!isArbitraryValue(modifier)) {
-        return undefined;
+    if (options.supportsNegativeValues && modifier.startsWith('-')) {
+        return asNegativeValue(modifier.slice(1), options.values, validate);
     }
-    value = modifier.slice(1, -1);
-    if (!validate(value)) {
-        return undefined;
-    }
-    return (0, _dataTypes).normalize(value);
+    return resolveArbitraryValue(modifier, validate);
 }
 function isArbitraryValue(input) {
     return input.startsWith('[') && input.endsWith(']');
@@ -192,39 +83,43 @@ function splitAlpha(modifier) {
         modifier.slice(slashIdx + 1)
     ];
 }
-function asColor(modifier, lookup = {
-}, tailwindConfig = {
+function asColor(modifier, options = {
+}, { tailwindConfig ={
+}  } = {
 }) {
-    if (lookup[modifier] !== undefined) {
-        return lookup[modifier];
+    var ref;
+    if (((ref = options.values) === null || ref === void 0 ? void 0 : ref[modifier]) !== undefined) {
+        var ref1;
+        return (ref1 = options.values) === null || ref1 === void 0 ? void 0 : ref1[modifier];
     }
     let [color, alpha] = splitAlpha(modifier);
     if (alpha !== undefined) {
-        var ref, ref1;
-        var _color;
-        let normalizedColor = (_color = lookup[color]) !== null && _color !== void 0 ? _color : isArbitraryValue(color) ? color.slice(1, -1) : undefined;
+        var ref2, ref3, ref4;
+        var ref5;
+        let normalizedColor = (ref5 = (ref2 = options.values) === null || ref2 === void 0 ? void 0 : ref2[color]) !== null && ref5 !== void 0 ? ref5 : isArbitraryValue(color) ? color.slice(1, -1) : undefined;
         if (normalizedColor === undefined) {
             return undefined;
         }
         if (isArbitraryValue(alpha)) {
             return (0, _withAlphaVariable).withAlphaValue(normalizedColor, alpha.slice(1, -1));
         }
-        if (((ref = tailwindConfig.theme) === null || ref === void 0 ? void 0 : (ref1 = ref.opacity) === null || ref1 === void 0 ? void 0 : ref1[alpha]) === undefined) {
+        if (((ref3 = tailwindConfig.theme) === null || ref3 === void 0 ? void 0 : (ref4 = ref3.opacity) === null || ref4 === void 0 ? void 0 : ref4[alpha]) === undefined) {
             return undefined;
         }
         return (0, _withAlphaVariable).withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha]);
     }
-    return asValue(modifier, lookup, {
+    return asValue(modifier, options, {
         validate: _dataTypes.color
     });
 }
-function asLookupValue(modifier, lookup = {
+function asLookupValue(modifier, options = {
 }) {
-    return lookup[modifier];
+    var ref;
+    return (ref = options.values) === null || ref === void 0 ? void 0 : ref[modifier];
 }
 function guess(validate) {
-    return (modifier, lookup)=>{
-        return asValue(modifier, lookup, {
+    return (modifier, options)=>{
+        return asValue(modifier, options, {
             validate
         });
     };
@@ -243,7 +138,8 @@ let typeMap = {
     number: guess(_dataTypes.number),
     'line-width': guess(_dataTypes.lineWidth),
     'absolute-size': guess(_dataTypes.absoluteSize),
-    'relative-size': guess(_dataTypes.relativeSize)
+    'relative-size': guess(_dataTypes.relativeSize),
+    shadow: guess(_dataTypes.shadow)
 };
 let supportedTypes = Object.keys(typeMap);
 function splitAtFirst(input, delim) {
@@ -257,22 +153,30 @@ function splitAtFirst(input, delim) {
         input.slice(idx + 1)
     ];
 }
-function coerceValue(types, modifier, values, tailwindConfig) {
+function coerceValue(types, modifier, options, tailwindConfig) {
     if (isArbitraryValue(modifier)) {
-        let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':');
-        if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
+        let arbitraryValue = modifier.slice(1, -1);
+        let [explicitType, value] = splitAtFirst(arbitraryValue, ':');
+        // It could be that this resolves to `url(https` which is not a valid
+        // identifier. We currently only support "simple" words with dashes or
+        // underscores. E.g.: family-name
+        if (!/^[\w-_]+$/g.test(explicitType)) {
+            value = arbitraryValue;
+        } else if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
             return [];
         }
         if (value.length > 0 && supportedTypes.includes(explicitType)) {
             return [
-                asValue(`[${value}]`, values, tailwindConfig),
+                asValue(`[${value}]`, options),
                 explicitType
             ];
         }
     }
     // Find first matching type
     for (let type of [].concat(types)){
-        let result = typeMap[type](modifier, values, tailwindConfig);
+        let result = typeMap[type](modifier, options, {
+            tailwindConfig
+        });
         if (result) return [
             result,
             type

package/lib/util/prefixSelector.js

@@ -11,12 +11,10 @@ function _interopRequireDefault(obj) {
     };
 }
 function _default(prefix, selector) {
-    const getPrefix = typeof prefix === 'function' ? prefix : ()=>prefix === undefined ? '' : prefix
-    ;
     return (0, _postcssSelectorParser).default((selectors)=>{
         selectors.walkClasses((classSelector)=>{
             (0, _tap).tap(classSelector.value, (baseClass)=>{
-                classSelector.value = `${getPrefix('.' + baseClass)}${baseClass}`;
+                classSelector.value = `${prefix}${baseClass}`;
             });
         });
     }).processSync(selector);

package/lib/util/resolveConfig.js

@@ -43,9 +43,13 @@ function mergeWith(target, ...sources) {
 const configUtils = {
     colors: _colors.default,
     negative (scale) {
+        // TODO: Log that this function isn't really needed anymore?
         return Object.keys(scale).filter((key)=>scale[key] !== '0'
         ).reduce((negativeScale, key)=>{
-            negativeScale[`-${key}`] = (0, _negateValue).default(scale[key]);
+            let negativeValue = (0, _negateValue).default(scale[key]);
+            if (negativeValue !== undefined) {
+                negativeScale[`-${key}`] = negativeValue;
+            }
             return negativeScale;
         }, {
         });
@@ -60,7 +64,7 @@ const configUtils = {
         });
     }
 };
-function value(valueToResolve, ...args) {
+function value1(valueToResolve, ...args) {
     return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve;
 }
 function collectExtends(items) {
@@ -125,7 +129,7 @@ function mergeExtensions({ extend , ...theme }) {
             }, ...[
                 themeValue,
                 ...extensions
-            ].map((e)=>value(e, resolveThemePath, utils)
+            ].map((e)=>value1(e, resolveThemePath, utils)
             ), mergeExtensionCustomizer)
         ;
     });
@@ -142,8 +146,8 @@ function resolveFunctionKeys(object) {
         return val === undefined ? defaultValue : val;
     };
     resolvePath.theme = resolvePath;
-    for(let key in configUtils){
-        resolvePath[key] = configUtils[key];
+    for(let key1 in configUtils){
+        resolvePath[key1] = configUtils[key1];
     }
     return Object.keys(object).reduce((resolved, key)=>{
         return {
@@ -160,8 +164,8 @@ function extractPluginConfigs(configs) {
             ...allConfigs,
             config
         ];
-        var ref;
-        const plugins = (ref = config === null || config === void 0 ? void 0 : config.plugins) !== null && ref !== void 0 ? ref : [];
+        var ref1;
+        const plugins = (ref1 = config === null || config === void 0 ? void 0 : config.plugins) !== null && ref1 !== void 0 ? ref1 : [];
         if (plugins.length === 0) {
             return;
         }
@@ -215,7 +219,7 @@ function resolveConfig(configs) {
             variantOrder: _defaultConfigStub.default.variantOrder
         }, 
     ];
-    var ref, ref1;
+    var ref, ref2;
     return (0, _normalizeConfig).normalizeConfig((0, _defaults).defaults({
         theme: resolveFunctionKeys(mergeExtensions(mergeThemes(allConfigs.map((t)=>{
             return (ref = t === null || t === void 0 ? void 0 : t.theme) !== null && ref !== void 0 ? ref : {
@@ -224,7 +228,7 @@ function resolveConfig(configs) {
         corePlugins: resolveCorePlugins(allConfigs.map((c)=>c.corePlugins
         )),
         plugins: resolvePluginLists(configs.map((c)=>{
-            return (ref1 = c === null || c === void 0 ? void 0 : c.plugins) !== null && ref1 !== void 0 ? ref1 : [];
+            return (ref2 = c === null || c === void 0 ? void 0 : c.plugins) !== null && ref2 !== void 0 ? ref2 : [];
         }))
     }, ...allConfigs));
 }

package/lib/util/transformThemeValue.js

@@ -14,8 +14,12 @@ function transformThemeValue(themeSection) {
         'fontSize',
         'outline'
     ].includes(themeSection)) {
-        return (value)=>Array.isArray(value) ? value[0] : value
-        ;
+        return (value)=>{
+            if (typeof value === 'function') value = value({
+            });
+            if (Array.isArray(value)) value = value[0];
+            return value;
+        };
     }
     if ([
         'fontFamily',
@@ -30,8 +34,12 @@ function transformThemeValue(themeSection) {
         'cursor',
         'animation', 
     ].includes(themeSection)) {
-        return (value)=>Array.isArray(value) ? value.join(', ') : value
-        ;
+        return (value)=>{
+            if (typeof value === 'function') value = value({
+            });
+            if (Array.isArray(value)) value = value.join(', ');
+            return value;
+        };
     }
     // For backwards compatibility reasons, before we switched to underscores
     // instead of commas for arbitrary values.
@@ -40,14 +48,16 @@ function transformThemeValue(themeSection) {
         'gridTemplateRows',
         'objectPosition'
     ].includes(themeSection)) {
-        return (value)=>typeof value === 'string' ? _postcss.default.list.comma(value).join(' ') : value
-        ;
+        return (value)=>{
+            if (typeof value === 'function') value = value({
+            });
+            if (typeof value === 'string') value = _postcss.default.list.comma(value).join(' ');
+            return value;
+        };
     }
-    if (themeSection === 'colors') {
-        return (value)=>typeof value === 'function' ? value({
-            }) : value
-        ;
-    }
-    return (value)=>value
-    ;
+    return (value)=>{
+        if (typeof value === 'function') value = value({
+        });
+        return value;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,20 +43,20 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.50",
-    "@swc/core": "^1.2.90",
+    "@swc/cli": "^0.1.51",
+    "@swc/core": "^1.2.106",
     "@swc/jest": "^0.1.5",
     "@swc/register": "^0.1.7",
-    "autoprefixer": "^10.3.6",
+    "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.8",
-    "esbuild": "^0.13.2",
-    "eslint": "^7.32.0",
+    "esbuild": "^0.13.12",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.1.0",
-    "jest-diff": "^27.2.0",
-    "postcss": "^8.3.8",
+    "jest": "^27.3.1",
+    "jest-diff": "^27.2.5",
+    "postcss": "^8.3.11",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.0"
@@ -75,8 +75,8 @@
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
     "fast-glob": "^3.2.7",
-    "glob-parent": "^6.0.1",
-    "is-glob": "^4.0.1",
+    "glob-parent": "^6.0.2",
+    "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
     "object-hash": "^2.2.0",
     "postcss-js": "^3.0.3",