tailwindcss 3.1.7 → 3.2.0

package/lib/lib/generateRules.js

@@ -9,6 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    getClassNameFromSelector: ()=>getClassNameFromSelector,
     resolveMatches: ()=>resolveMatches,
     generateRules: ()=>generateRules
 });
@@ -88,14 +89,22 @@ function* candidatePermutations(candidate) {
     let lastIndex = Infinity;
     while(lastIndex >= 0){
         let dashIdx;
+        let wasSlash = false;
         if (lastIndex === Infinity && candidate.endsWith("]")) {
             let bracketIdx = candidate.indexOf("[");
             // If character before `[` isn't a dash or a slash, this isn't a dynamic class
             // eg. string[]
-            dashIdx = [
-                "-",
-                "/"
-            ].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1;
+            if (candidate[bracketIdx - 1] === "-") {
+                dashIdx = bracketIdx - 1;
+            } else if (candidate[bracketIdx - 1] === "/") {
+                dashIdx = bracketIdx - 1;
+                wasSlash = true;
+            } else {
+                dashIdx = -1;
+            }
+        } else if (lastIndex === Infinity && candidate.includes("/")) {
+            dashIdx = candidate.lastIndexOf("/");
+            wasSlash = true;
         } else {
             dashIdx = candidate.lastIndexOf("-", lastIndex);
         }
@@ -103,12 +112,16 @@ function* candidatePermutations(candidate) {
             break;
         }
         let prefix = candidate.slice(0, dashIdx);
-        let modifier = candidate.slice(dashIdx + 1);
+        let modifier = candidate.slice(wasSlash ? dashIdx : dashIdx + 1);
+        lastIndex = dashIdx - 1;
+        // TODO: This feels a bit hacky
+        if (prefix === "" || modifier === "/") {
+            continue;
+        }
         yield [
             prefix,
             modifier
         ];
-        lastIndex = dashIdx - 1;
     }
 }
 function applyPrefix(matches, context) {
@@ -179,12 +192,40 @@ function applyVariant(variant, matches, context) {
     if (matches.length === 0) {
         return matches;
     }
-    let args;
-    let isArbitraryVariant = false;
-    // Find partial arbitrary variants
+    /** @type {{modifier: string | null, value: string | null}} */ let args = {
+        modifier: null,
+        value: _sharedState.NONE
+    };
+    // Retrieve "modifier"
+    {
+        let match = /(.*)\/(.*)$/g.exec(variant);
+        if (match) {
+            variant = match[1];
+            args.modifier = match[2];
+            if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
+                return [];
+            }
+        }
+    }
+    // Retrieve "arbitrary value"
     if (variant.endsWith("]") && !variant.startsWith("[")) {
-        args = variant.slice(variant.lastIndexOf("[") + 1, -1);
-        variant = variant.slice(0, variant.indexOf(args) - 1 /* - */  - 1 /* [ */ );
+        // We either have:
+        //   @[200px]
+        //   group-[:hover]
+        //
+        // But we don't want:
+        //   @-[200px]        (`-` is incorrect)
+        //   group[:hover]    (`-` is missing)
+        let match1 = /(.)(-?)\[(.*)\]/g.exec(variant);
+        if (match1) {
+            let [, char, seperator, value] = match1;
+            // @-[200px] case
+            if (char === "@" && seperator === "-") return [];
+            // group[:hover] case
+            if (char !== "@" && seperator === "") return [];
+            variant = variant.replace(`${seperator}[${value}]`, "");
+            args.value = value;
+        }
     }
     // Register arbitrary variants
     if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
@@ -192,16 +233,14 @@ function applyVariant(variant, matches, context) {
         if (!(0, _setupContextUtils.isValidVariantFormatString)(selector)) {
             return [];
         }
-        isArbitraryVariant = true;
         let fn = (0, _setupContextUtils.parseVariant)(selector);
-        let sort = Array.from(context.variantOrder.values()).pop() << 1n;
+        let sort = context.offsets.recordVariant(variant);
         context.variantMap.set(variant, [
             [
                 sort,
                 fn
             ]
         ]);
-        context.variantOrder.set(variant, sort);
     }
     if (context.variantMap.has(variant)) {
         let variantFunctionTuples = context.variantMap.get(variant).slice();
@@ -273,15 +312,11 @@ function applyVariant(variant, matches, context) {
                         // where you keep handling jobs until everything is done and each job can queue more
                         // jobs if needed.
                         variantFunctionTuples.push([
-                            // TODO: This could have potential bugs if we shift the sort order from variant A far
-                            // enough into the sort space of variant B. The chances are low, but if this happens
-                            // then this might be the place too look at. One potential solution to this problem is
-                            // reserving additional X places for these 'unknown' variants in between.
-                            variantSort | BigInt(idx << ruleWithVariant.length),
+                            context.offsets.applyParallelOffset(variantSort, idx),
                             variantFunction1,
                             // If the clone has been modified we have to pass that back
                             // though so each rule can use the modified container
-                            clone.clone(), 
+                            clone.clone()
                         ]);
                     }
                     continue;
@@ -339,11 +374,11 @@ function applyVariant(variant, matches, context) {
                 let withOffset = [
                     {
                         ...meta,
-                        sort: variantSort | meta.sort,
+                        sort: context.offsets.applyVariantOffset(meta.sort, variantSort, Object.assign(args, context.variantOptions.get(variant))),
                         collectedFormats: ((_collectedFormats = meta.collectedFormats) !== null && _collectedFormats !== void 0 ? _collectedFormats : []).concat(collectedFormats),
-                        isArbitraryVariant
+                        isArbitraryVariant: isArbitraryValue(variant)
                     },
-                    clone.nodes[0], 
+                    clone.nodes[0]
                 ];
                 result.push(withOffset);
             }
@@ -436,18 +471,19 @@ function extractArbitraryProperty(classCandidate, context) {
     if (!isParsableCssValue(property, normalized)) {
         return null;
     }
+    let sort = context.offsets.arbitraryProperty();
     return [
         [
             {
-                sort: context.arbitraryPropertiesSort,
+                sort,
                 layer: "utilities"
             },
             ()=>({
                     [(0, _nameClass.asClass)(classCandidate)]: {
                         [property]: normalized
                     }
-                }), 
-        ], 
+                })
+        ]
     ];
 }
 function* resolveMatchedPlugins(classCandidate, context) {
@@ -495,7 +531,7 @@ function splitWithSeparator(input, separator) {
             _sharedState.NOT_ON_DEMAND
         ];
     }
-    return Array.from((0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(input, separator));
+    return (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(input, separator);
 }
 function* recordCandidates(matches, classCandidate) {
     for (const match of matches){
@@ -579,48 +615,91 @@ function* resolveMatches(candidate, context, original = candidate) {
             }
             if (matchesPerPlugin.length > 0) {
                 var ref;
-                typesByMatches.set(matchesPerPlugin, (ref = sort.options) === null || ref === void 0 ? void 0 : ref.type);
+                var ref1, _options;
+                let matchingTypes = Array.from((0, _pluginUtils.getMatchingTypes)((ref1 = (ref = sort.options) === null || ref === void 0 ? void 0 : ref.types) !== null && ref1 !== void 0 ? ref1 : [], modifier, (_options = sort.options) !== null && _options !== void 0 ? _options : {}, context.tailwindConfig)).map(([_, type])=>type);
+                if (matchingTypes.length > 0) {
+                    typesByMatches.set(matchesPerPlugin, matchingTypes);
+                }
                 matches.push(matchesPerPlugin);
             }
         }
         if (isArbitraryValue(modifier)) {
-            // When generated arbitrary values are ambiguous, we can't know
-            // which to pick so don't generate any utilities for them
             if (matches.length > 1) {
-                var ref1;
-                let typesPerPlugin = matches.map((match)=>new Set([
-                        ...(ref1 = typesByMatches.get(match)) !== null && ref1 !== void 0 ? ref1 : []
-                    ]));
-                // Remove duplicates, so that we can detect proper unique types for each plugin.
-                for (let pluginTypes of typesPerPlugin){
-                    for (let type of pluginTypes){
-                        let removeFromOwnGroup = false;
-                        for (let otherGroup of typesPerPlugin){
-                            if (pluginTypes === otherGroup) continue;
-                            if (otherGroup.has(type)) {
-                                otherGroup.delete(type);
-                                removeFromOwnGroup = true;
+                // Partition plugins in 2 categories so that we can start searching in the plugins that
+                // don't have `any` as a type first.
+                let [withAny, withoutAny] = matches.reduce((group, plugin)=>{
+                    let hasAnyType = plugin.some(([{ options  }])=>options.types.some(({ type  })=>type === "any"));
+                    if (hasAnyType) {
+                        group[0].push(plugin);
+                    } else {
+                        group[1].push(plugin);
+                    }
+                    return group;
+                }, [
+                    [],
+                    []
+                ]);
+                function findFallback(matches) {
+                    // If only a single plugin matches, let's take that one
+                    if (matches.length === 1) {
+                        return matches[0];
+                    }
+                    // Otherwise, find the plugin that creates a valid rule given the arbitrary value, and
+                    // also has the correct type which preferOnConflicts the plugin in case of clashes.
+                    return matches.find((rules)=>{
+                        let matchingTypes = typesByMatches.get(rules);
+                        return rules.some(([{ options  }, rule])=>{
+                            if (!isParsableNode(rule)) {
+                                return false;
+                            }
+                            return options.types.some(({ type , preferOnConflict  })=>matchingTypes.includes(type) && preferOnConflict);
+                        });
+                    });
+                }
+                var ref2;
+                // Try to find a fallback plugin, because we already know that multiple plugins matched for
+                // the given arbitrary value.
+                let fallback = (ref2 = findFallback(withoutAny)) !== null && ref2 !== void 0 ? ref2 : findFallback(withAny);
+                if (fallback) {
+                    matches = [
+                        fallback
+                    ];
+                } else {
+                    var ref3;
+                    let typesPerPlugin = matches.map((match)=>new Set([
+                            ...(ref3 = typesByMatches.get(match)) !== null && ref3 !== void 0 ? ref3 : []
+                        ]));
+                    // Remove duplicates, so that we can detect proper unique types for each plugin.
+                    for (let pluginTypes of typesPerPlugin){
+                        for (let type of pluginTypes){
+                            let removeFromOwnGroup = false;
+                            for (let otherGroup of typesPerPlugin){
+                                if (pluginTypes === otherGroup) continue;
+                                if (otherGroup.has(type)) {
+                                    otherGroup.delete(type);
+                                    removeFromOwnGroup = true;
+                                }
                             }
+                            if (removeFromOwnGroup) pluginTypes.delete(type);
                         }
-                        if (removeFromOwnGroup) pluginTypes.delete(type);
                     }
-                }
-                let messages = [];
-                for (let [idx, group] of typesPerPlugin.entries()){
-                    for (let type1 of group){
-                        let rules2 = matches[idx].map(([, rule])=>rule).flat().map((rule)=>rule.toString().split("\n").slice(1, -1) // Remove selector and closing '}'
-                            .map((line)=>line.trim()).map((x)=>`      ${x}`) // Re-indent
-                            .join("\n")).join("\n\n");
-                        messages.push(`  Use \`${candidate.replace("[", `[${type1}:`)}\` for \`${rules2.trim()}\``);
-                        break;
+                    let messages = [];
+                    for (let [idx, group] of typesPerPlugin.entries()){
+                        for (let type1 of group){
+                            let rules2 = matches[idx].map(([, rule])=>rule).flat().map((rule)=>rule.toString().split("\n").slice(1, -1) // Remove selector and closing '}'
+                                .map((line)=>line.trim()).map((x)=>`      ${x}`) // Re-indent
+                                .join("\n")).join("\n\n");
+                            messages.push(`  Use \`${candidate.replace("[", `[${type1}:`)}\` for \`${rules2.trim()}\``);
+                            break;
+                        }
                     }
+                    _log.default.warn([
+                        `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
+                        ...messages,
+                        `If this is content and not a class, replace it with \`${candidate.replace("[", "&lsqb;").replace("]", "&rsqb;")}\` to silence this warning.`
+                    ]);
+                    continue;
                 }
-                _log.default.warn([
-                    `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
-                    ...messages,
-                    `If this is content and not a class, replace it with \`${candidate.replace("[", "&lsqb;").replace("]", "&rsqb;")}\` to silence this warning.`, 
-                ]);
-                continue;
             }
             matches = matches.map((list)=>list.filter((match)=>isParsableNode(match[1])));
         }
@@ -667,14 +746,39 @@ function* resolveMatches(candidate, context, original = candidate) {
 function inKeyframes(rule) {
     return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
 }
+function getImportantStrategy(important) {
+    if (important === true) {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.walkDecls((d)=>{
+                if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
+                    d.important = true;
+                }
+            });
+        };
+    }
+    if (typeof important === "string") {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.selectors = rule.selectors.map((selector)=>{
+                return `${important} ${selector}`;
+            });
+        };
+    }
+}
 function generateRules(candidates, context) {
     let allRules = [];
+    let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
         if (context.notClassCache.has(candidate)) {
             continue;
         }
-        if (context.classCache.has(candidate)) {
-            allRules.push(context.classCache.get(candidate));
+        if (context.candidateRuleCache.has(candidate)) {
+            allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)));
             continue;
         }
         let matches = Array.from(resolveMatches(candidate, context));
@@ -683,49 +787,30 @@ function generateRules(candidates, context) {
             continue;
         }
         context.classCache.set(candidate, matches);
-        allRules.push(matches);
-    }
-    // Strategy based on `tailwindConfig.important`
-    let strategy = ((important)=>{
-        if (important === true) {
-            return (rule)=>{
-                rule.walkDecls((d)=>{
-                    if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
-                        d.important = true;
-                    }
-                });
-            };
-        }
-        if (typeof important === "string") {
-            return (rule)=>{
-                rule.selectors = rule.selectors.map((selector)=>{
-                    return `${important} ${selector}`;
-                });
-            };
-        }
-    })(context.tailwindConfig.important);
-    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
-        if (options.respectImportant) {
-            if (strategy) {
+        var ref;
+        let rules = (ref = context.candidateRuleCache.get(candidate)) !== null && ref !== void 0 ? ref : new Set();
+        context.candidateRuleCache.set(candidate, rules);
+        for (const match of matches){
+            let [{ sort , options  }, rule] = match;
+            if (options.respectImportant && strategy) {
                 let container = _postcss.default.root({
                     nodes: [
                         rule.clone()
                     ]
                 });
-                container.walkRules((r)=>{
-                    if (inKeyframes(r)) {
-                        return;
-                    }
-                    strategy(r);
-                });
+                container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            let newEntry = [
+                sort,
+                rule
+            ];
+            rules.add(newEntry);
+            context.ruleCache.add(newEntry);
+            allRules.push(newEntry);
         }
-        return [
-            sort | context.layerOrder[layer],
-            rule
-        ];
-    });
+    }
+    return allRules;
 }
 function isArbitraryValue(input) {
     return input.startsWith("[") && input.endsWith("]");

package/lib/lib/normalizeTailwindDirectives.js

@@ -53,7 +53,7 @@ function normalizeTailwindDirectives(root) {
                 _log.default.warn(`${atRule.name}-at-rule-deprecated`, [
                     `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
                     `Use \`@layer utilities\` or \`@layer components\` instead.`,
-                    "https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer", 
+                    "https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer"
                 ]);
             }
             layerDirectives.add(atRule);

package/lib/lib/offsets.js

@@ -0,0 +1,217 @@
+// @ts-check
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Offsets", {
+    enumerable: true,
+    get: ()=>Offsets
+});
+const _bigSign = /*#__PURE__*/ _interopRequireDefault(require("../util/bigSign"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+class Offsets {
+    constructor(){
+        /**
+     * Offsets for the next rule in a given layer
+     *
+     * @type {Record<Layer, bigint>}
+     */ this.offsets = {
+            defaults: 0n,
+            base: 0n,
+            components: 0n,
+            utilities: 0n,
+            variants: 0n,
+            user: 0n
+        };
+        /**
+     * Positions for a given layer
+     *
+     * @type {Record<Layer, bigint>}
+     */ this.layerPositions = {
+            defaults: 0n,
+            base: 1n,
+            components: 2n,
+            utilities: 3n,
+            // There isn't technically a "user" layer, but we need to give it a position
+            // Because it's used for ordering user-css from @apply
+            user: 4n,
+            variants: 5n
+        };
+        /**
+     * The total number of functions currently registered across all variants (including arbitrary variants)
+     *
+     * @type {bigint}
+     */ this.reservedVariantBits = 0n;
+        /**
+     * Positions for a given variant
+     *
+     * @type {Map<string, bigint>}
+     */ this.variantOffsets = new Map();
+    }
+    /**
+   * @param {Layer} layer
+   * @returns {RuleOffset}
+   */ create(layer) {
+        return {
+            layer,
+            parentLayer: layer,
+            arbitrary: 0n,
+            variants: 0n,
+            parallelIndex: 0n,
+            index: this.offsets[layer]++,
+            options: []
+        };
+    }
+    /**
+   * @returns {RuleOffset}
+   */ arbitraryProperty() {
+        return {
+            ...this.create("utilities"),
+            arbitrary: 1n
+        };
+    }
+    /**
+   * Get the offset for a variant
+   *
+   * @param {string} variant
+   * @param {number} index
+   * @returns {RuleOffset}
+   */ forVariant(variant, index = 0) {
+        let offset = this.variantOffsets.get(variant);
+        if (offset === undefined) {
+            throw new Error(`Cannot find offset for unknown variant ${variant}`);
+        }
+        return {
+            ...this.create("variants"),
+            variants: offset << BigInt(index)
+        };
+    }
+    /**
+   * @param {RuleOffset} rule
+   * @param {RuleOffset} variant
+   * @param {VariantOption} options
+   * @returns {RuleOffset}
+   */ applyVariantOffset(rule, variant, options) {
+        return {
+            ...rule,
+            layer: "variants",
+            parentLayer: rule.layer === "variants" ? rule.parentLayer : rule.layer,
+            variants: rule.variants | variant.variants,
+            options: options.sort ? [].concat(options, rule.options) : rule.options,
+            // TODO: Technically this is wrong. We should be handling parallel index on a per variant basis.
+            // We'll take the max of all the parallel indexes for now.
+            // @ts-ignore
+            parallelIndex: max([
+                rule.parallelIndex,
+                variant.parallelIndex
+            ])
+        };
+    }
+    /**
+   * @param {RuleOffset} offset
+   * @param {number} parallelIndex
+   * @returns {RuleOffset}
+   */ applyParallelOffset(offset, parallelIndex) {
+        return {
+            ...offset,
+            parallelIndex: BigInt(parallelIndex)
+        };
+    }
+    /**
+   * Each variant gets 1 bit per function / rule registered.
+   * This is because multiple variants can be applied to a single rule and we need to know which ones are present and which ones are not.
+   * Additionally, every unique group of variants is grouped together in the stylesheet.
+   *
+   * This grouping is order-independent. For instance, we do not differentiate between `hover:focus` and `focus:hover`.
+   *
+   * @param {string[]} variants
+   * @param {(name: string) => number} getLength
+   */ recordVariants(variants, getLength) {
+        for (let variant of variants){
+            this.recordVariant(variant, getLength(variant));
+        }
+    }
+    /**
+   * The same as `recordVariants` but for a single arbitrary variant at runtime.
+   * @param {string} variant
+   * @param {number} fnCount
+   *
+   * @returns {RuleOffset} The highest offset for this variant
+   */ recordVariant(variant, fnCount = 1) {
+        this.variantOffsets.set(variant, 1n << this.reservedVariantBits);
+        // Ensure space is reserved for each "function" in the parallel variant
+        // by offsetting the next variant by the number of parallel variants
+        // in the one we just added.
+        // Single functions that return parallel variants are NOT handled separately here
+        // They're offset by 1 (or the number of functions) as usual
+        // And each rule returned is tracked separately since the functions are evaluated lazily.
+        // @see `RuleOffset.parallelIndex`
+        this.reservedVariantBits += BigInt(fnCount);
+        return {
+            ...this.create("variants"),
+            variants: 1n << this.reservedVariantBits
+        };
+    }
+    /**
+   * @param {RuleOffset} a
+   * @param {RuleOffset} b
+   * @returns {bigint}
+   */ compare(a, b) {
+        // Sort layers together
+        if (a.layer !== b.layer) {
+            return this.layerPositions[a.layer] - this.layerPositions[b.layer];
+        }
+        // Sort based on the sorting function
+        for (let aOptions of a.options){
+            for (let bOptions of b.options){
+                if (aOptions.id !== bOptions.id) continue;
+                if (!aOptions.sort || !bOptions.sort) continue;
+                let result = aOptions.sort({
+                    value: aOptions.value,
+                    modifier: aOptions.modifier
+                }, {
+                    value: bOptions.value,
+                    modifier: bOptions.modifier
+                });
+                if (result !== 0) return result;
+            }
+        }
+        // Sort variants in the order they were registered
+        if (a.variants !== b.variants) {
+            return a.variants - b.variants;
+        }
+        // Make sure each rule returned by a parallel variant is sorted in ascending order
+        if (a.parallelIndex !== b.parallelIndex) {
+            return a.parallelIndex - b.parallelIndex;
+        }
+        // Always sort arbitrary properties after other utilities
+        if (a.arbitrary !== b.arbitrary) {
+            return a.arbitrary - b.arbitrary;
+        }
+        // Sort utilities, components, etc… in the order they were registered
+        return a.index - b.index;
+    }
+    /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
+   */ sort(list) {
+        return list.sort(([a], [b])=>(0, _bigSign.default)(this.compare(a, b)));
+    }
+}
+/**
+ *
+ * @param {bigint[]} nums
+ * @returns {bigint|null}
+ */ function max(nums) {
+    let max = null;
+    for (const num of nums){
+        max = max !== null && max !== void 0 ? max : num;
+        max = max > num ? max : num;
+    }
+    return max;
+}

package/lib/lib/regex.js

@@ -52,7 +52,7 @@ function nestedBrackets(open, close, depth = 1) {
             nestedBrackets(open, close, depth - 1)
         ]),
         /[^\s]*/,
-        escape(close), 
+        escape(close)
     ]);
 }
 function escape(string) {