tailwindcss 3.0.24 → 3.1.0

package/lib/lib/defaultExtractor.js

@@ -3,38 +3,197 @@ 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;
+var _featureFlagsJs = require("../featureFlags.js");
+var regex = _interopRequireWildcard(require("./regex"));
+function _getRequireWildcardCache() {
+    if (typeof WeakMap !== "function") return null;
+    var cache = new WeakMap();
+    _getRequireWildcardCache = function() {
+        return cache;
+    };
+    return cache;
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache();
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (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 ref;
+            results.push(...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []);
+        }
+        return results.filter((v)=>v !== undefined).map(clipAtBalancedParens);
+    };
+}
+function* buildRegExps(context) {
+    let separator = context.tailwindConfig.separator;
+    let variantGroupingEnabled = (0, _featureFlagsJs).flagEnabled(context.tailwindConfig, "variantGrouping");
+    let utility = regex.any([
+        // Arbitrary properties
+        /\[[^\s:'"]+:[^\s\]]+\]/,
+        // Utilities
+        regex.pattern([
+            // Utility Name / Group Name
+            /-?(?:\w+)/,
+            // Normal/Arbitrary values
+            regex.optional(regex.any([
+                regex.pattern([
+                    // Arbitrary values
+                    /-\[[^\s:]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"\\$]*)?/, 
+                ]),
+                regex.pattern([
+                    // Arbitrary values
+                    /-\[[^\s]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"\\$]*)?/, 
+                ]),
+                // Normal values w/o quotes — may include an opacity modifier
+                /[-\/][^\s'"\\$={]*/, 
+            ])), 
+        ]), 
+    ]);
+    yield regex.pattern([
+        // Variants
+        "((?=((",
+        regex.any([
+            regex.pattern([
+                /([^\s"'\[\\]+-)?\[[^\s"'\\]+\]/,
+                separator
+            ]),
+            regex.pattern([
+                /[^\s"'\[\\]+/,
+                separator
+            ]), 
+        ], true),
+        ")+))\\2)?",
+        // Important (optional)
+        /!?/,
+        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 match1 of matches){
+        let char = match1[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, match1.index);
+        }
+        // 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, match1.index);
+        }
+    }
+    return input;
 } // Regular utilities
  // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
  // Arbitrary values

package/lib/lib/evaluateTailwindFunctions.js

@@ -10,6 +10,8 @@ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser")
 var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
+var _withAlphaVariable = require("../util/withAlphaVariable");
+var _pluginUtils = require("../util/pluginUtils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -34,13 +36,12 @@ 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) {
+function validatePath(config, path, defaultValue, themeOpts = {}) {
     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);
@@ -52,8 +53,7 @@ function validatePath(config, path, defaultValue) {
             const validKeys = Object.keys(parentValue).filter((key)=>validatePath(config, [
                     ...parentSegments,
                     key
-                ]).isValid
-            );
+                ]).isValid);
             const suggestion = (0, _didyoumean).default(pathSegments[pathSegments.length - 1], validKeys);
             if (suggestion) {
                 error += ` Did you mean '${pathToString([
@@ -87,8 +87,7 @@ function validatePath(config, path, defaultValue) {
             let validKeys = Object.keys(value).filter((key)=>validatePath(config, [
                     ...pathSegments,
                     key
-                ]).isValid
-            );
+                ]).isValid);
             if (validKeys.length) {
                 error += ` Did you mean something like '${pathToString([
                     ...pathSegments,
@@ -104,12 +103,11 @@ function validatePath(config, path, defaultValue) {
     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 = [
         ""
     ];
@@ -142,17 +140,28 @@ let nodeTypePropertyMap = {
 function _default({ tailwindConfig: config  }) {
     let functions = {
         theme: (node, path, ...defaultValue)=>{
-            const { isValid , value , error  } = validatePath(config, path, defaultValue.length ? defaultValue : undefined);
+            let matches = path.match(/^([^\/\s]+)(?:\s*\/\s*([^\/\s]+))$/);
+            let alpha = undefined;
+            if (matches) {
+                path = matches[1];
+                alpha = matches[2];
+            }
+            let { isValid , value , error  } = validatePath(config, path, defaultValue.length ? defaultValue : undefined, {
+                opacityValue: alpha
+            });
             if (!isValid) {
                 throw node.error(error);
             }
+            if (alpha !== undefined) {
+                value = (0, _pluginUtils).parseColorFormat(value);
+                value = (0, _withAlphaVariable).withAlphaValue(value, alpha, value);
+            }
             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 screenDefinition = screens.find(({ name  })=>name === screen);
             if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }