tailwindcss 3.0.0-alpha.2 → 3.0.3

package/lib/util/defaults.js

@@ -11,6 +11,12 @@ function defaults(target, ...sources) {
                 target[k] = source[k];
             }
         }
+        for (let k1 of Object.getOwnPropertySymbols(source)){
+            var ref1;
+            if (!(target === null || target === void 0 ? void 0 : (ref1 = target.hasOwnProperty) === null || ref1 === void 0 ? void 0 : ref1.call(target, k1))) {
+                target[k1] = source[k1];
+            }
+        }
     }
     return target;
 }

package/lib/util/formatVariantSelector.js

@@ -40,7 +40,16 @@ function formatVariantSelector(current, ...others) {
 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();
+    let separator = (ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':';
+    // Split by the separator, but ignore the separator inside square brackets:
+    //
+    // E.g.: dark:lg:hover:[paint-order:markers]
+    //           ┬  ┬     ┬            ┬
+    //           │  │     │            ╰── We will not split here
+    //           ╰──┴─────┴─────────────── We will split here
+    //
+    let splitter = new RegExp(`\\${separator}(?![^[]*\\])`);
+    let base = candidate.split(splitter).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);
     }
@@ -69,17 +78,92 @@ function finalizeSelector(format, { selector: selector1 , candidate , context  }
     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)=>{
+        return selectors.map((selector2)=>{
+            selector2.walkPseudos((p)=>{
                 if (selectorFunctions.has(p.value)) {
                     p.replaceWith(p.nodes);
                 }
                 return p;
             });
-            return selector;
+            // This will make sure to move pseudo's to the correct spot (the end for
+            // pseudo elements) because otherwise the selector will never work
+            // anyway.
+            //
+            // E.g.:
+            //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+            //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+            //
+            // `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
+            function collectPseudoElements(selector) {
+                let nodes = [];
+                for (let node of selector.nodes){
+                    if (isPseudoElement(node)) {
+                        nodes.push(node);
+                        selector.removeChild(node);
+                    }
+                    if (node === null || node === void 0 ? void 0 : node.nodes) {
+                        nodes.push(...collectPseudoElements(node));
+                    }
+                }
+                return nodes;
+            }
+            let pseudoElements = collectPseudoElements(selector2);
+            if (pseudoElements.length > 0) {
+                selector2.nodes.push(pseudoElements.sort(sortSelector));
+            }
+            return selector2;
         });
     }).processSync(selector1);
 }
+// Note: As a rule, double colons (::) should be used instead of a single colon
+// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+// this distinction was not present in older versions of the W3C spec, most
+// browsers support both syntaxes for the original pseudo-elements.
+let pseudoElementsBC = [
+    ':before',
+    ':after',
+    ':first-line',
+    ':first-letter'
+];
+// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
+let pseudoElementExceptions = [
+    '::file-selector-button'
+];
+// This will make sure to move pseudo's to the correct spot (the end for
+// pseudo elements) because otherwise the selector will never work
+// anyway.
+//
+// E.g.:
+//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+//
+// `::before:hover` doesn't work, which means that we can make it work
+// for you by flipping the order.
+function sortSelector(a, z) {
+    // Both nodes are non-pseudo's so we can safely ignore them and keep
+    // them in the same order.
+    if (a.type !== 'pseudo' && z.type !== 'pseudo') {
+        return 0;
+    }
+    // If one of them is a combinator, we need to keep it in the same order
+    // because that means it will start a new "section" in the selector.
+    if (a.type === 'combinator' ^ z.type === 'combinator') {
+        return 0;
+    }
+    // One of the items is a pseudo and the other one isn't. Let's move
+    // the pseudo to the right.
+    if (a.type === 'pseudo' ^ z.type === 'pseudo') {
+        return (a.type === 'pseudo') - (z.type === 'pseudo');
+    }
+    // Both are pseudo's, move the pseudo elements (except for
+    // ::file-selector-button) to the right.
+    return isPseudoElement(a) - isPseudoElement(z);
+}
+function isPseudoElement(node) {
+    if (node.type !== 'pseudo') return false;
+    if (pseudoElementExceptions.includes(node.value)) return false;
+    return node.value.startsWith('::') || pseudoElementsBC.includes(node.value);
+}
 function resolveFunctionArgument(haystack, needle, arg) {
     let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle);
     if (startIdx === -1) return null;

package/lib/util/isValidArbitraryValue.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = isValidArbitraryValue;
+let matchingBrackets = new Map([
+    [
+        '{',
+        '}'
+    ],
+    [
+        '[',
+        ']'
+    ],
+    [
+        '(',
+        ')'
+    ], 
+]);
+let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
+        v,
+        k
+    ]
+));
+let quotes = new Set([
+    '"',
+    "'",
+    '`'
+]);
+function isValidArbitraryValue(value) {
+    let stack = [];
+    let inQuotes = false;
+    for(let i = 0; i < value.length; i++){
+        let char = value[i];
+        if (char === ':' && !inQuotes && stack.length === 0) {
+            return false;
+        }
+        // Non-escaped quotes allow us to "allow" anything in between
+        if (quotes.has(char) && value[i - 1] !== '\\') {
+            inQuotes = !inQuotes;
+        }
+        if (inQuotes) continue;
+        if (value[i - 1] === '\\') continue; // Escaped
+        if (matchingBrackets.has(char)) {
+            stack.push(char);
+        } else if (inverseMatchingBrackets.has(char)) {
+            let inverse = inverseMatchingBrackets.get(char);
+            // Nothing to pop from, therefore it is unbalanced
+            if (stack.length <= 0) {
+                return false;
+            }
+            // Popped value must match the inverse value, otherwise it is unbalanced
+            if (stack.pop() !== inverse) {
+                return false;
+            }
+        }
+    }
+    // If there is still something on the stack, it is also unbalanced
+    if (stack.length > 0) {
+        return false;
+    }
+    // All good, totally balanced!
+    return true;
+}

package/lib/util/log.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.dim = dim;
 exports.default = void 0;
 var _chalk = _interopRequireDefault(require("chalk"));
 function _interopRequireDefault(obj) {
@@ -18,6 +19,9 @@ function log(chalk, messages, key) {
     messages.forEach((message)=>console.warn(chalk, '-', message)
     );
 }
+function dim(input) {
+    return _chalk.default.dim(input);
+}
 var _default = {
     info (key, messages) {
         log(_chalk.default.bold.cyan('info'), ...Array.isArray(key) ? [

package/lib/util/nameClass.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.asClass = asClass;
 exports.default = nameClass;
 exports.formatClass = formatClass;
 var _escapeClassName = _interopRequireDefault(require("./escapeClassName"));

package/lib/util/normalizeConfig.js

@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.normalizeConfig = normalizeConfig;
-var _log = _interopRequireDefault(require("./log"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+var _log = _interopRequireWildcard(require("./log"));
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
 }
 function normalizeConfig(config) {
     // Quick structure validation
@@ -204,5 +222,16 @@ function normalizeConfig(config) {
             return transformers;
         })()
     };
+    // Validate globs to prevent bogus globs.
+    // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
+    for (let file of config.content.files){
+        if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
+            _log.default.warn('invalid-glob-braces', [
+                `The glob pattern ${(0, _log).dim(file)} in your config is invalid.`,
+                `    Update it to ${(0, _log).dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`
+            ]);
+            break;
+        }
+    }
     return config;
 }

package/lib/util/normalizeScreens.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.normalizeScreens = normalizeScreens;
+function normalizeScreens(screens, root = true) {
+    if (Array.isArray(screens)) {
+        return screens.map((screen)=>{
+            if (root && Array.isArray(screen)) {
+                throw new Error('The tuple syntax is not supported for `screens`.');
+            }
+            if (typeof screen === 'string') {
+                return {
+                    name: screen.toString(),
+                    values: [
+                        {
+                            min: screen,
+                            max: undefined
+                        }
+                    ]
+                };
+            }
+            let [name, options] = screen;
+            name = name.toString();
+            if (typeof options === 'string') {
+                return {
+                    name,
+                    values: [
+                        {
+                            min: options,
+                            max: undefined
+                        }
+                    ]
+                };
+            }
+            if (Array.isArray(options)) {
+                return {
+                    name,
+                    values: options.map((option)=>resolveValue(option)
+                    )
+                };
+            }
+            return {
+                name,
+                values: [
+                    resolveValue(options)
+                ]
+            };
+        });
+    }
+    return normalizeScreens(Object.entries(screens !== null && screens !== void 0 ? screens : {
+    }), false);
+}
+function resolveValue({ 'min-width': _minWidth , min =_minWidth , max , raw  } = {
+}) {
+    return {
+        min,
+        max,
+        raw
+    };
+}

package/lib/util/resolveConfig.js

@@ -64,7 +64,7 @@ const configUtils = {
         });
     }
 };
-function value1(valueToResolve, ...args) {
+function value(valueToResolve, ...args) {
     return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve;
 }
 function collectExtends(items) {
@@ -99,21 +99,21 @@ function mergeThemes(themes) {
         extend: collectExtends(themes)
     };
 }
-function mergeExtensionCustomizer(merged, value) {
+function mergeExtensionCustomizer(merged, value1) {
     // When we have an array of objects, we do want to merge it
     if (Array.isArray(merged) && isObject(merged[0])) {
-        return merged.concat(value);
+        return merged.concat(value1);
     }
     // When the incoming value is an array, and the existing config is an object, prepend the existing object
-    if (Array.isArray(value) && isObject(value[0]) && isObject(merged)) {
+    if (Array.isArray(value1) && isObject(value1[0]) && isObject(merged)) {
         return [
             merged,
-            ...value
+            ...value1
         ];
     }
     // Override arrays (for example for font-families, box-shadows, ...)
-    if (Array.isArray(value)) {
-        return value;
+    if (Array.isArray(value1)) {
+        return value1;
     }
     // Execute default behaviour
     return undefined;
@@ -129,7 +129,7 @@ function mergeExtensions({ extend , ...theme }) {
             }, ...[
                 themeValue,
                 ...extensions
-            ].map((e)=>value1(e, resolveThemePath, utils)
+            ].map((e)=>value(e, resolveThemePath, utils)
             ), mergeExtensionCustomizer)
         ;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,22 +43,22 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.51",
-    "@swc/core": "^1.2.106",
-    "@swc/jest": "^0.1.5",
+    "@swc/cli": "^0.1.52",
+    "@swc/core": "^1.2.118",
+    "@swc/jest": "^0.2.11",
     "@swc/register": "^0.1.7",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.8",
-    "esbuild": "^0.13.12",
-    "eslint": "^8.0.1",
+    "cssnano": "^5.0.12",
+    "esbuild": "^0.14.2",
+    "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.3.1",
-    "jest-diff": "^27.2.5",
-    "postcss": "^8.3.11",
+    "jest": "^27.4.3",
+    "jest-diff": "^27.4.2",
+    "postcss": "^8.4.4",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -83,7 +83,7 @@
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.6",
-    "postcss-value-parser": "^4.1.0",
+    "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
     "resolve": "^1.20.0",
     "tmp": "^0.2.1"
@@ -101,7 +101,8 @@
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
-      "/integrations/"
+      "/integrations/",
+      "/standalone-cli/"
     ],
     "transform": {
       "\\.js$": "@swc/jest"