tailwindcss 0.0.0-insiders.7c337f2 → 0.0.0-insiders.7d8eb21

package/lib/lib/defaultExtractor.js

@@ -2,39 +2,236 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.defaultExtractor = defaultExtractor;
-const PATTERNS = [
-    /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
-    /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
-    /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
-    /([^${(<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^${(<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
-    /([^${(<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^${(<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^"'`\s]*[^<>"'`\s:\\])/.source,
-    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
-].join("|");
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, "g");
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
-function defaultExtractor(content) {
-    let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP);
-    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-    let results = [
-        ...broadMatches,
-        ...innerMatches
-    ].flat().filter((v)=>v !== undefined
-    );
-    return results;
+Object.defineProperty(exports, "defaultExtractor", {
+    enumerable: true,
+    get: ()=>defaultExtractor
+});
+const _featureFlags = require("../featureFlags");
+const _regex = /*#__PURE__*/ _interopRequireWildcard(require("./regex"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function defaultExtractor(context) {
+    let patterns = Array.from(buildRegExps(context));
+    /**
+   * @param {string} content
+   */ return (content)=>{
+        /** @type {(string|string)[]} */ let results = [];
+        for (let pattern of patterns){
+            var _content_match;
+            results = [
+                ...results,
+                ...(_content_match = content.match(pattern)) !== null && _content_match !== void 0 ? _content_match : []
+            ];
+        }
+        return results.filter((v)=>v !== undefined).map(clipAtBalancedParens);
+    };
+}
+function* buildRegExps(context) {
+    let separator = context.tailwindConfig.separator;
+    let variantGroupingEnabled = (0, _featureFlags.flagEnabled)(context.tailwindConfig, "variantGrouping");
+    let prefix = context.tailwindConfig.prefix !== "" ? _regex.optional(_regex.pattern([
+        /-?/,
+        _regex.escape(context.tailwindConfig.prefix)
+    ])) : "";
+    let utility = _regex.any([
+        // Arbitrary properties (without square brackets)
+        /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+        // Arbitrary properties with balanced square brackets
+        // This is a targeted fix to continue to allow theme()
+        // with square brackets to work in arbitrary properties
+        // while fixing a problem with the regex matching too much
+        /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
+        // Utilities
+        _regex.pattern([
+            // Utility Name / Group Name
+            /-?(?:\w+)/,
+            // Normal/Arbitrary values
+            _regex.optional(_regex.any([
+                _regex.pattern([
+                    // Arbitrary values
+                    /-(?:\w+-)*\[[^\s:]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"`\\><$]*)?/
+                ]),
+                _regex.pattern([
+                    // Arbitrary values
+                    /-(?:\w+-)*\[[^\s]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"`\\$]*)?/
+                ]),
+                // Normal values w/o quotes — may include an opacity modifier
+                /[-\/][^\s'"`\\$={><]*/
+            ]))
+        ])
+    ]);
+    let variantPatterns = [
+        // Without quotes
+        _regex.any([
+            // This is here to provide special support for the `@` variant
+            _regex.pattern([
+                /@\[[^\s"'`]+\](\/[^\s"'`]+)?/,
+                separator
+            ]),
+            _regex.pattern([
+                /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/,
+                separator
+            ]),
+            _regex.pattern([
+                /[^\s"'`\[\\]+/,
+                separator
+            ])
+        ]),
+        // With quotes allowed
+        _regex.any([
+            _regex.pattern([
+                /([^\s"'`\[\\]+-)?\[[^\s`]+\]/,
+                separator
+            ]),
+            _regex.pattern([
+                /[^\s`\[\\]+/,
+                separator
+            ])
+        ])
+    ];
+    for (const variantPattern of variantPatterns){
+        yield _regex.pattern([
+            // Variants
+            "((?=((",
+            variantPattern,
+            ")+))\\2)?",
+            // Important (optional)
+            /!?/,
+            prefix,
+            variantGroupingEnabled ? _regex.any([
+                // Or any of those things but grouped separated by commas
+                _regex.pattern([
+                    /\(/,
+                    utility,
+                    _regex.zeroOrMore([
+                        /,/,
+                        utility
+                    ]),
+                    /\)/
+                ]),
+                // Arbitrary properties, constrained utilities, arbitrary values, etc…
+                utility
+            ]) : utility
+        ]);
+    }
+    // 5. Inner matches
+    yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
+}
+// We want to capture any "special" characters
+// AND the characters immediately following them (if there is one)
+let SPECIALS = /([\[\]'"`])([^\[\]'"`])?/g;
+let ALLOWED_CLASS_CHARACTERS = /[^"'`\s<>\]]+/;
+/**
+ * Clips a string ensuring that parentheses, quotes, etc… are balanced
+ * Used for arbitrary values only
+ *
+ * We will go past the end of the balanced parens until we find a non-class character
+ *
+ * Depth matching behavior:
+ * w-[calc(100%-theme('spacing[some_key][1.5]'))]']
+ *   ┬    ┬          ┬┬       ┬        ┬┬   ┬┬┬┬┬┬┬
+ *   1    2          3        4        34   3 210 END
+ *   ╰────┴──────────┴────────┴────────┴┴───┴─┴┴┴
+ *
+ * @param {string} input
+ */ function clipAtBalancedParens(input) {
+    // We are care about this for arbitrary values
+    if (!input.includes("-[")) {
+        return input;
+    }
+    let depth = 0;
+    let openStringTypes = [];
+    // Find all parens, brackets, quotes, etc
+    // Stop when we end at a balanced pair
+    // This is naive and will treat mismatched parens as balanced
+    // This shouldn't be a problem in practice though
+    let matches = input.matchAll(SPECIALS);
+    // We can't use lookbehind assertions because we have to support Safari
+    // So, instead, we've emulated it using capture groups and we'll re-work the matches to accommodate
+    matches = Array.from(matches).flatMap((match)=>{
+        const [, ...groups] = match;
+        return groups.map((group, idx)=>Object.assign([], match, {
+                index: match.index + idx,
+                0: group
+            }));
+    });
+    for (let match of matches){
+        let char = match[0];
+        let inStringType = openStringTypes[openStringTypes.length - 1];
+        if (char === inStringType) {
+            openStringTypes.pop();
+        } else if (char === "'" || char === '"' || char === "`") {
+            openStringTypes.push(char);
+        }
+        if (inStringType) {
+            continue;
+        } else if (char === "[") {
+            depth++;
+            continue;
+        } else if (char === "]") {
+            depth--;
+            continue;
+        }
+        // We've gone one character past the point where we should stop
+        // This means that there was an extra closing `]`
+        // We'll clip to just before it
+        if (depth < 0) {
+            return input.substring(0, match.index - 1);
+        }
+        // We've finished balancing the brackets but there still may be characters that can be included
+        // For example in the class `text-[#336699]/[.35]`
+        // The depth goes to `0` at the closing `]` but goes up again at the `[`
+        // If we're at zero and encounter a non-class character then we clip the class there
+        if (depth === 0 && !ALLOWED_CLASS_CHARACTERS.test(char)) {
+            return input.substring(0, match.index);
+        }
+    }
+    return input;
 } // Regular utilities
  // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
  // Arbitrary values

package/lib/lib/detectNesting.js

@@ -2,18 +2,27 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = _default;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+function isRoot(node) {
+    return node.type === "root";
+}
+function isAtLayer(node) {
+    return node.type === "atrule" && node.name === "layer";
+}
 function _default(_context) {
     return (root, result)=>{
         let found = false;
         root.walkAtRules("tailwind", (node)=>{
             if (found) return false;
-            if (node.parent && node.parent.type !== "root") {
+            if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
                 found = true;
                 node.warn(result, [
                     "Nested @tailwind rules were detected, but are not supported.",
                     "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
-                    "Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy", 
+                    "Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy"
                 ].join("\n"));
                 return false;
             }
@@ -25,7 +34,7 @@ function _default(_context) {
                 nestedRule.warn(result, [
                     "Nested CSS was detected, but CSS nesting has not been configured correctly.",
                     "Please enable a CSS nesting plugin *before* Tailwind in your configuration.",
-                    "See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting", 
+                    "See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting"
                 ].join("\n"));
                 return false;
             });

package/lib/lib/evaluateTailwindFunctions.js

@@ -2,14 +2,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = _default;
-var _dlv = _interopRequireDefault(require("dlv"));
-var _didyoumean = _interopRequireDefault(require("didyoumean"));
-var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
-var _normalizeScreens = require("../util/normalizeScreens");
-var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
-var _toPath = require("../util/toPath");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _dlv = /*#__PURE__*/ _interopRequireDefault(require("dlv"));
+const _didyoumean = /*#__PURE__*/ _interopRequireDefault(require("didyoumean"));
+const _transformThemeValue = /*#__PURE__*/ _interopRequireDefault(require("../util/transformThemeValue"));
+const _postcssValueParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-value-parser"));
+const _normalizeScreens = require("../util/normalizeScreens");
+const _buildMediaQuery = /*#__PURE__*/ _interopRequireDefault(require("../util/buildMediaQuery"));
+const _toPath = require("../util/toPath");
+const _withAlphaVariable = require("../util/withAlphaVariable");
+const _pluginUtils = require("../util/pluginUtils");
+const _log = /*#__PURE__*/ _interopRequireDefault(require("../util/log"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -19,10 +25,10 @@ function isObject(input) {
     return typeof input === "object" && input !== null;
 }
 function findClosestExistingPath(theme, path) {
-    let parts = (0, _toPath).toPath(path);
+    let parts = (0, _toPath.toPath)(path);
     do {
         parts.pop();
-        if ((0, _dlv).default(theme, parts) !== undefined) break;
+        if ((0, _dlv.default)(theme, parts) !== undefined) break;
     }while (parts.length);
     return parts.length ? parts : undefined;
 }
@@ -34,27 +40,25 @@ function pathToString(path) {
     }, "");
 }
 function list(items) {
-    return items.map((key)=>`'${key}'`
-    ).join(", ");
+    return items.map((key)=>`'${key}'`).join(", ");
 }
 function listKeys(obj) {
     return list(Object.keys(obj));
 }
-function validatePath(config, path, defaultValue) {
-    const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, "").replace(/['"]+$/g, "");
-    const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
-    const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
+function validatePath(config, path, defaultValue, themeOpts = {}) {
+    const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, "");
+    const pathSegments = Array.isArray(path) ? path : (0, _toPath.toPath)(pathString);
+    const value = (0, _dlv.default)(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
         let error = `'${pathString}' does not exist in your theme config.`;
         const parentSegments = pathSegments.slice(0, -1);
-        const parentValue = (0, _dlv).default(config.theme, parentSegments);
+        const parentValue = (0, _dlv.default)(config.theme, parentSegments);
         if (isObject(parentValue)) {
             const validKeys = Object.keys(parentValue).filter((key)=>validatePath(config, [
                     ...parentSegments,
                     key
-                ]).isValid
-            );
-            const suggestion = (0, _didyoumean).default(pathSegments[pathSegments.length - 1], validKeys);
+                ]).isValid);
+            const suggestion = (0, _didyoumean.default)(pathSegments[pathSegments.length - 1], validKeys);
             if (suggestion) {
                 error += ` Did you mean '${pathToString([
                     ...parentSegments,
@@ -66,7 +70,7 @@ function validatePath(config, path, defaultValue) {
         } else {
             const closestPath = findClosestExistingPath(config.theme, pathString);
             if (closestPath) {
-                const closestValue = (0, _dlv).default(config.theme, closestPath);
+                const closestValue = (0, _dlv.default)(config.theme, closestPath);
                 if (isObject(closestValue)) {
                     error += ` '${pathToString(closestPath)}' has the following keys: ${listKeys(closestValue)}`;
                 } else {
@@ -82,42 +86,40 @@ function validatePath(config, path, defaultValue) {
         };
     }
     if (!(typeof value === "string" || typeof value === "number" || typeof value === "function" || value instanceof String || value instanceof Number || Array.isArray(value))) {
-        let error = `'${pathString}' was found but does not resolve to a string.`;
+        let error1 = `'${pathString}' was found but does not resolve to a string.`;
         if (isObject(value)) {
-            let validKeys = Object.keys(value).filter((key)=>validatePath(config, [
+            let validKeys1 = Object.keys(value).filter((key)=>validatePath(config, [
                     ...pathSegments,
                     key
-                ]).isValid
-            );
-            if (validKeys.length) {
-                error += ` Did you mean something like '${pathToString([
+                ]).isValid);
+            if (validKeys1.length) {
+                error1 += ` Did you mean something like '${pathToString([
                     ...pathSegments,
-                    validKeys[0]
+                    validKeys1[0]
                 ])}'?`;
             }
         }
         return {
             isValid: false,
-            error
+            error: error1
         };
     }
     const [themeSection] = pathSegments;
     return {
         isValid: true,
-        value: (0, _transformThemeValue).default(themeSection)(value)
+        value: (0, _transformThemeValue.default)(themeSection)(value, themeOpts)
     };
 }
 function extractArgs(node, vNodes, functions) {
-    vNodes = vNodes.map((vNode)=>resolveVNode(node, vNode, functions)
-    );
+    vNodes = vNodes.map((vNode)=>resolveVNode(node, vNode, functions));
     let args = [
         ""
     ];
-    for (let vNode1 of vNodes){
-        if (vNode1.type === "div" && vNode1.value === ",") {
+    for (let vNode of vNodes){
+        if (vNode.type === "div" && vNode.value === ",") {
             args.push("");
         } else {
-            args[args.length - 1] += _postcssValueParser.default.stringify(vNode1);
+            args[args.length - 1] += _postcssValueParser.default.stringify(vNode);
         }
     }
     return args;
@@ -131,7 +133,7 @@ function resolveVNode(node, vNode, functions) {
     return vNode;
 }
 function resolveFunctions(node, input, functions) {
-    return (0, _postcssValueParser).default(input).walk((vNode)=>{
+    return (0, _postcssValueParser.default)(input).walk((vNode)=>{
         resolveVNode(node, vNode, functions);
     }).toString();
 }
@@ -139,24 +141,85 @@ let nodeTypePropertyMap = {
     atrule: "params",
     decl: "value"
 };
-function _default({ tailwindConfig: config  }) {
+/**
+ * @param {string} path
+ * @returns {Iterable<[path: string, alpha: string|undefined]>}
+ */ function* toPaths(path) {
+    // Strip quotes from beginning and end of string
+    // This allows the alpha value to be present inside of quotes
+    path = path.replace(/^['"]+|['"]+$/g, "");
+    let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/);
+    let alpha = undefined;
+    yield [
+        path,
+        undefined
+    ];
+    if (matches) {
+        path = matches[1];
+        alpha = matches[2];
+        yield [
+            path,
+            alpha
+        ];
+    }
+}
+/**
+ *
+ * @param {any} config
+ * @param {string} path
+ * @param {any} defaultValue
+ */ function resolvePath(config, path, defaultValue) {
+    const results = Array.from(toPaths(path)).map(([path, alpha])=>{
+        return Object.assign(validatePath(config, path, defaultValue, {
+            opacityValue: alpha
+        }), {
+            resolvedPath: path,
+            alpha
+        });
+    });
+    var _results_find;
+    return (_results_find = results.find((result)=>result.isValid)) !== null && _results_find !== void 0 ? _results_find : results[0];
+}
+function _default(context) {
+    let config = context.tailwindConfig;
     let functions = {
         theme: (node, path, ...defaultValue)=>{
-            const { isValid , value , error  } = validatePath(config, path, defaultValue.length ? defaultValue : undefined);
+            let { isValid , value , error , alpha  } = resolvePath(config, path, defaultValue.length ? defaultValue : undefined);
             if (!isValid) {
+                var _parentNode_raws_tailwind;
+                let parentNode = node.parent;
+                let candidate = (_parentNode_raws_tailwind = parentNode === null || parentNode === void 0 ? void 0 : parentNode.raws.tailwind) === null || _parentNode_raws_tailwind === void 0 ? void 0 : _parentNode_raws_tailwind.candidate;
+                if (parentNode && candidate !== undefined) {
+                    // Remove this utility from any caches
+                    context.markInvalidUtilityNode(parentNode);
+                    // Remove the CSS node from the markup
+                    parentNode.remove();
+                    // Show a warning
+                    _log.default.warn("invalid-theme-key-in-class", [
+                        `The utility \`${candidate}\` contains an invalid theme value and was not generated.`
+                    ]);
+                    return;
+                }
                 throw node.error(error);
             }
+            let maybeColor = (0, _pluginUtils.parseColorFormat)(value);
+            let isColorFunction = maybeColor !== undefined && typeof maybeColor === "function";
+            if (alpha !== undefined || isColorFunction) {
+                if (alpha === undefined) {
+                    alpha = 1.0;
+                }
+                value = (0, _withAlphaVariable.withAlphaValue)(maybeColor, alpha, maybeColor);
+            }
             return value;
         },
         screen: (node, screen)=>{
             screen = screen.replace(/^['"]+/g, "").replace(/['"]+$/g, "");
-            let screens = (0, _normalizeScreens).normalizeScreens(config.theme.screens);
-            let screenDefinition = screens.find(({ name  })=>name === screen
-            );
+            let screens = (0, _normalizeScreens.normalizeScreens)(config.theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen);
             if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }
-            return (0, _buildMediaQuery).default(screenDefinition);
+            return (0, _buildMediaQuery.default)(screenDefinition);
         }
     };
     return (root)=>{