tailwindcss 3.0.24 → 3.1.0

package/lib/lib/expandApplyAtRules.js

@@ -11,8 +11,7 @@ var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName")
 function expandApplyAtRules(context) {
     return (root)=>{
         // Build a cache of the user's CSS so we can use it to resolve classes used by @apply
-        let localCache = lazyCache(()=>buildLocalApplyCache(root, context)
-        );
+        let localCache = lazyCache(()=>buildLocalApplyCache(root, context));
         processApply(root, context, localCache);
     };
 }
@@ -22,7 +21,7 @@ function _interopRequireDefault(obj) {
     };
 }
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */ function extractClasses(node) {
-    let classes = new Set();
+    /** @type {Map<string, Set<string>>} */ let groups = new Map();
     let container = _postcss.default.root({
         nodes: [
             node.clone()
@@ -31,11 +30,26 @@ function _interopRequireDefault(obj) {
     container.walkRules((rule)=>{
         (0, _postcssSelectorParser).default((selectors)=>{
             selectors.walkClasses((classSelector)=>{
+                let parentSelector = classSelector.parent.toString();
+                let classes = groups.get(parentSelector);
+                if (!classes) {
+                    groups.set(parentSelector, classes = new Set());
+                }
                 classes.add(classSelector.value);
             });
         }).processSync(rule.selector);
     });
-    return Array.from(classes);
+    let normalizedGroups = Array.from(groups.values(), (classes)=>Array.from(classes));
+    let classes1 = normalizedGroups.flat();
+    return Object.assign(classes1, {
+        groups: normalizedGroups
+    });
+}
+let selectorExtractor = (0, _postcssSelectorParser).default((root)=>root.nodes.map((node)=>node.toString()));
+/**
+ * @param {string} ruleSelectors
+ */ function extractSelectors(ruleSelectors) {
+    return selectorExtractor.transformSync(ruleSelectors);
 }
 function extractBaseCandidates(candidates, separator) {
     let baseClasses = new Set();
@@ -164,8 +178,7 @@ function* pathToRoot(node) {
             context.applyClassCache.set(candidate, context.classCache.get(candidate).map(([meta, rule])=>[
                     meta,
                     rule.clone()
-                ]
-            ));
+                ]));
             continue;
         }
         let matches = Array.from((0, _generateRules).resolveMatches(candidate, context));
@@ -203,11 +216,8 @@ function* pathToRoot(node) {
  * @returns {ApplyCache}
  */ function combineCaches(caches) {
     return {
-        get: (name)=>caches.flatMap((cache)=>cache.get(name) || []
-            )
-        ,
-        has: (name)=>caches.some((cache)=>cache.has(name)
-            )
+        get: (name)=>caches.flatMap((cache)=>cache.get(name) || []),
+        has: (name)=>caches.some((cache)=>cache.has(name))
     };
 }
 function extractApplyCandidates(params) {
@@ -235,199 +245,226 @@ function processApply(root, context, localCache) {
         applies.push(rule);
     });
     // Start the @apply process if we have rules with @apply in them
-    if (applies.length > 0) {
-        // Fill up some caches!
-        let applyClassCache = combineCaches([
-            localCache,
-            buildApplyCache(applyCandidates, context)
-        ]);
-        /**
-     * When we have an apply like this:
-     *
-     * .abc {
-     *    @apply hover:font-bold;
-     * }
-     *
-     * What we essentially will do is resolve to this:
-     *
-     * .abc {
-     *    @apply .hover\:font-bold:hover {
-     *      font-weight: 500;
-     *    }
-     * }
-     *
-     * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
-     * What happens in this function is that we prepend a `.` and escape the candidate.
-     * This will result in `.hover\:font-bold`
-     * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
-     */ // TODO: Should we use postcss-selector-parser for this instead?
-        function replaceSelector(selector, utilitySelectors, candidate) {
-            let needle = `.${(0, _escapeClassName).default(candidate)}`;
-            let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g);
-            return selector.split(/\s*\,(?![^(]*\))\s*/g).map((s)=>{
-                let replaced = [];
-                for (let utilitySelector of utilitySelectorsList){
-                    let replacedSelector = utilitySelector.replace(needle, s);
-                    if (replacedSelector === utilitySelector) {
-                        continue;
-                    }
-                    replaced.push(replacedSelector);
+    if (applies.length === 0) {
+        return;
+    }
+    // Fill up some caches!
+    let applyClassCache = combineCaches([
+        localCache,
+        buildApplyCache(applyCandidates, context)
+    ]);
+    /**
+   * When we have an apply like this:
+   *
+   * .abc {
+   *    @apply hover:font-bold;
+   * }
+   *
+   * What we essentially will do is resolve to this:
+   *
+   * .abc {
+   *    @apply .hover\:font-bold:hover {
+   *      font-weight: 500;
+   *    }
+   * }
+   *
+   * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
+   * What happens in this function is that we prepend a `.` and escape the candidate.
+   * This will result in `.hover\:font-bold`
+   * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
+   */ // TODO: Should we use postcss-selector-parser for this instead?
+    function replaceSelector(selector, utilitySelectors, candidate) {
+        let needle1 = `.${(0, _escapeClassName).default(candidate)}`;
+        let needles = [
+            ...new Set([
+                needle1,
+                needle1.replace(/\\2c /g, "\\,")
+            ])
+        ];
+        let utilitySelectorsList = extractSelectors(utilitySelectors);
+        return extractSelectors(selector).map((s)=>{
+            let replaced = [];
+            for (let utilitySelector of utilitySelectorsList){
+                let replacedSelector = utilitySelector;
+                for (const needle of needles){
+                    replacedSelector = replacedSelector.replace(needle, s);
                 }
-                return replaced.join(", ");
-            }).join(", ");
-        }
-        let perParentApplies = new Map();
-        // Collect all apply candidates and their rules
-        for (let apply of applies){
-            let candidates = perParentApplies.get(apply.parent) || [];
-            perParentApplies.set(apply.parent, [
-                candidates,
-                apply.source
-            ]);
-            let [applyCandidates, important] = extractApplyCandidates(apply.params);
-            if (apply.parent.type === "atrule") {
-                if (apply.parent.name === "screen") {
-                    const screenType = apply.parent.params;
-                    throw apply.error(`@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates.map((c)=>`${screenType}:${c}`
-                    ).join(" ")} instead.`);
+                if (replacedSelector === utilitySelector) {
+                    continue;
                 }
-                throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
+                replaced.push(replacedSelector);
             }
-            for (let applyCandidate of applyCandidates){
-                if ([
-                    prefix(context, "group"),
-                    prefix(context, "peer")
-                ].includes(applyCandidate)) {
-                    // TODO: Link to specific documentation page with error code.
-                    throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
-                }
-                if (!applyClassCache.has(applyCandidate)) {
-                    throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
-                }
-                let rules = applyClassCache.get(applyCandidate);
-                candidates.push([
-                    applyCandidate,
-                    important,
-                    rules
-                ]);
+            return replaced.join(", ");
+        }).join(", ");
+    }
+    let perParentApplies = new Map();
+    // Collect all apply candidates and their rules
+    for (let apply of applies){
+        let [candidates] = perParentApplies.get(apply.parent) || [
+            [],
+            apply.source
+        ];
+        perParentApplies.set(apply.parent, [
+            candidates,
+            apply.source
+        ]);
+        let [applyCandidates, important] = extractApplyCandidates(apply.params);
+        if (apply.parent.type === "atrule") {
+            if (apply.parent.name === "screen") {
+                const screenType = apply.parent.params;
+                throw apply.error(`@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates.map((c)=>`${screenType}:${c}`).join(" ")} instead.`);
             }
+            throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
         }
-        for (const [parent, [candidates, atApplySource]] of perParentApplies){
-            let siblings = [];
-            for (let [applyCandidate, important, rules] of candidates){
-                for (let [meta, node1] of rules){
-                    let parentClasses = extractClasses(parent);
-                    let nodeClasses = extractClasses(node1);
-                    // Add base utility classes from the @apply node to the list of
-                    // classes to check whether it intersects and therefore results in a
-                    // circular dependency or not.
-                    //
-                    // E.g.:
-                    // .foo {
-                    //   @apply hover:a; // This applies "a" but with a modifier
-                    // }
-                    //
-                    // We only have to do that with base classes of the `node`, not of the `parent`
-                    // E.g.:
-                    // .hover\:foo {
-                    //   @apply bar;
-                    // }
-                    // .bar {
-                    //   @apply foo;
-                    // }
-                    //
-                    // This should not result in a circular dependency because we are
-                    // just applying `.foo` and the rule above is `.hover\:foo` which is
-                    // unrelated. However, if we were to apply `hover:foo` then we _did_
-                    // have to include this one.
-                    nodeClasses = nodeClasses.concat(extractBaseCandidates(nodeClasses, context.tailwindConfig.separator));
-                    let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
-                    );
-                    if (intersects) {
-                        throw node1.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
-                    }
-                    let root = _postcss.default.root({
-                        nodes: [
-                            node1.clone()
-                        ]
-                    });
-                    // Make sure every node in the entire tree points back at the @apply rule that generated it
-                    root.walk((node)=>{
-                        node.source = atApplySource;
-                    });
-                    let canRewriteSelector = node1.type !== "atrule" || node1.type === "atrule" && node1.name !== "keyframes";
-                    if (canRewriteSelector) {
-                        root.walkRules((rule)=>{
-                            // Let's imagine you have the following structure:
-                            //
-                            // .foo {
-                            //   @apply bar;
-                            // }
-                            //
-                            // @supports (a: b) {
-                            //   .bar {
-                            //     color: blue
-                            //   }
-                            //
-                            //   .something-unrelated {}
-                            // }
-                            //
-                            // In this case we want to apply `.bar` but it happens to be in
-                            // an atrule node. We clone that node instead of the nested one
-                            // because we still want that @supports rule to be there once we
-                            // applied everything.
-                            //
-                            // However it happens to be that the `.something-unrelated` is
-                            // also in that same shared @supports atrule. This is not good,
-                            // and this should not be there. The good part is that this is
-                            // a clone already and it can be safely removed. The question is
-                            // how do we know we can remove it. Basically what we can do is
-                            // match it against the applyCandidate that you want to apply. If
-                            // it doesn't match the we can safely delete it.
-                            //
-                            // If we didn't do this, then the `replaceSelector` function
-                            // would have replaced this with something that didn't exist and
-                            // therefore it removed the selector altogether. In this specific
-                            // case it would result in `{}` instead of `.something-unrelated {}`
-                            if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate
-                            )) {
-                                rule.remove();
-                                return;
-                            }
-                            rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate);
-                            rule.walkDecls((d)=>{
-                                d.important = meta.important || important;
-                            });
+        for (let applyCandidate of applyCandidates){
+            if ([
+                prefix(context, "group"),
+                prefix(context, "peer")
+            ].includes(applyCandidate)) {
+                // TODO: Link to specific documentation page with error code.
+                throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
+            }
+            if (!applyClassCache.has(applyCandidate)) {
+                throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
+            }
+            let rules = applyClassCache.get(applyCandidate);
+            candidates.push([
+                applyCandidate,
+                important,
+                rules
+            ]);
+        }
+    }
+    for (const [parent, [candidates1, atApplySource]] of perParentApplies){
+        let siblings = [];
+        for (let [applyCandidate, important, rules] of candidates1){
+            let potentialApplyCandidates = [
+                applyCandidate,
+                ...extractBaseCandidates([
+                    applyCandidate
+                ], context.tailwindConfig.separator), 
+            ];
+            for (let [meta, node1] of rules){
+                let parentClasses = extractClasses(parent);
+                let nodeClasses = extractClasses(node1);
+                // When we encounter a rule like `.dark .a, .b { … }` we only want to be left with `[.dark, .a]` if the base applyCandidate is `.a` or with `[.b]` if the base applyCandidate is `.b`
+                // So we've split them into groups
+                nodeClasses = nodeClasses.groups.filter((classList)=>classList.some((className)=>potentialApplyCandidates.includes(className))).flat();
+                // Add base utility classes from the @apply node to the list of
+                // classes to check whether it intersects and therefore results in a
+                // circular dependency or not.
+                //
+                // E.g.:
+                // .foo {
+                //   @apply hover:a; // This applies "a" but with a modifier
+                // }
+                //
+                // We only have to do that with base classes of the `node`, not of the `parent`
+                // E.g.:
+                // .hover\:foo {
+                //   @apply bar;
+                // }
+                // .bar {
+                //   @apply foo;
+                // }
+                //
+                // This should not result in a circular dependency because we are
+                // just applying `.foo` and the rule above is `.hover\:foo` which is
+                // unrelated. However, if we were to apply `hover:foo` then we _did_
+                // have to include this one.
+                nodeClasses = nodeClasses.concat(extractBaseCandidates(nodeClasses, context.tailwindConfig.separator));
+                let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector));
+                if (intersects) {
+                    throw node1.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
+                }
+                let root = _postcss.default.root({
+                    nodes: [
+                        node1.clone()
+                    ]
+                });
+                // Make sure every node in the entire tree points back at the @apply rule that generated it
+                root.walk((node)=>{
+                    node.source = atApplySource;
+                });
+                let canRewriteSelector = node1.type !== "atrule" || node1.type === "atrule" && node1.name !== "keyframes";
+                if (canRewriteSelector) {
+                    root.walkRules((rule)=>{
+                        // Let's imagine you have the following structure:
+                        //
+                        // .foo {
+                        //   @apply bar;
+                        // }
+                        //
+                        // @supports (a: b) {
+                        //   .bar {
+                        //     color: blue
+                        //   }
+                        //
+                        //   .something-unrelated {}
+                        // }
+                        //
+                        // In this case we want to apply `.bar` but it happens to be in
+                        // an atrule node. We clone that node instead of the nested one
+                        // because we still want that @supports rule to be there once we
+                        // applied everything.
+                        //
+                        // However it happens to be that the `.something-unrelated` is
+                        // also in that same shared @supports atrule. This is not good,
+                        // and this should not be there. The good part is that this is
+                        // a clone already and it can be safely removed. The question is
+                        // how do we know we can remove it. Basically what we can do is
+                        // match it against the applyCandidate that you want to apply. If
+                        // it doesn't match the we can safely delete it.
+                        //
+                        // If we didn't do this, then the `replaceSelector` function
+                        // would have replaced this with something that didn't exist and
+                        // therefore it removed the selector altogether. In this specific
+                        // case it would result in `{}` instead of `.something-unrelated {}`
+                        if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate)) {
+                            rule.remove();
+                            return;
+                        }
+                        // Strip the important selector from the parent selector if at the beginning
+                        let importantSelector = typeof context.tailwindConfig.important === "string" ? context.tailwindConfig.important : null;
+                        // We only want to move the "important" selector if this is a Tailwind-generated utility
+                        // We do *not* want to do this for user CSS that happens to be structured the same
+                        let isGenerated = parent.raws.tailwind !== undefined;
+                        let parentSelector = isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0 ? parent.selector.slice(importantSelector.length) : parent.selector;
+                        rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate);
+                        // And then re-add it if it was removed
+                        if (importantSelector && parentSelector !== parent.selector) {
+                            rule.selector = `${importantSelector} ${rule.selector}`;
+                        }
+                        rule.walkDecls((d)=>{
+                            d.important = meta.important || important;
                         });
-                    }
-                    // Insert it
-                    siblings.push([
-                        // Ensure that when we are sorting, that we take the layer order into account
-                        {
-                            ...meta,
-                            sort: meta.sort | context.layerOrder[meta.layer]
-                        },
-                        root.nodes[0], 
-                    ]);
+                    });
                 }
+                // Insert it
+                siblings.push([
+                    // Ensure that when we are sorting, that we take the layer order into account
+                    {
+                        ...meta,
+                        sort: meta.sort | context.layerOrder[meta.layer]
+                    },
+                    root.nodes[0], 
+                ]);
             }
-            // Inject the rules, sorted, correctly
-            let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)
-            ).map((s)=>s[1]
-            );
-            // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
-            parent.after(nodes);
         }
-        for (let apply1 of applies){
-            // If there are left-over declarations, just remove the @apply
-            if (apply1.parent.nodes.length > 1) {
-                apply1.remove();
-            } else {
-                // The node is empty, drop the full node
-                apply1.parent.remove();
-            }
+        // Inject the rules, sorted, correctly
+        let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)).map((s)=>s[1]);
+        // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
+        parent.after(nodes);
+    }
+    for (let apply1 of applies){
+        // If there are left-over declarations, just remove the @apply
+        if (apply1.parent.nodes.length > 1) {
+            apply1.remove();
+        } else {
+            // The node is empty, drop the full node
+            apply1.parent.remove();
         }
-        // Do it again, in case we have other `@apply` rules
-        processApply(root, context, localCache);
     }
+    // Do it again, in case we have other `@apply` rules
+    processApply(root, context, localCache);
 }

package/lib/lib/expandTailwindAtRules.js

@@ -29,8 +29,7 @@ function expandTailwindAtRules(context) {
                 }
             }
         });
-        if (Object.values(layerNodes).every((n)=>n === null
-        )) {
+        if (Object.values(layerNodes).every((n)=>n === null)) {
             return root;
         }
         // ---
@@ -42,7 +41,7 @@ function expandTailwindAtRules(context) {
         env.DEBUG && console.time("Reading changed files");
         for (let { content , extension  } of context.changedContent){
             let transformer = getTransformer(context.tailwindConfig, extension);
-            let extractor = getExtractor(context.tailwindConfig, extension);
+            let extractor = getExtractor(context, extension);
             getClassCandidates(transformer(content), extractor, candidates, seen);
         }
         env.DEBUG && console.timeEnd("Reading changed files");
@@ -144,39 +143,56 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+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;
-    } 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];
-                    }
-                }
+    }
+    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;
-        return newObj;
     }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 let env = sharedState.env;
 const builtInExtractors = {
     DEFAULT: _defaultExtractor.defaultExtractor
 };
 const builtInTransformers = {
-    DEFAULT: (content)=>content
-    ,
+    DEFAULT: (content)=>content,
     svelte: (content)=>content.replace(/(?:^|\s)class:/g, " ")
 };
-function getExtractor(tailwindConfig, fileExtension) {
-    let extractors = tailwindConfig.content.extract;
-    return extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || builtInExtractors.DEFAULT;
+function getExtractor(context, fileExtension) {
+    let extractors = context.tailwindConfig.content.extract;
+    return extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || builtInExtractors.DEFAULT(context);
 }
 function getTransformer(tailwindConfig, fileExtension) {
     let transformers = tailwindConfig.content.transform;
@@ -203,8 +219,7 @@ function getClassCandidates(content, extractor, candidates, seen) {
                 candidates.add(match);
             }
         } else {
-            let extractorMatches = extractor(line).filter((s)=>s !== "!*"
-            );
+            let extractorMatches = extractor(line).filter((s)=>s !== "!*");
             let lineMatchesSet = new Set(extractorMatches);
             for (let match of lineMatchesSet){
                 candidates.add(match);
@@ -214,8 +229,7 @@ function getClassCandidates(content, extractor, candidates, seen) {
     }
 }
 function buildStylesheet(rules, context) {
-    let sortedRules = rules.sort(([a], [z])=>(0, _bigSign).default(a - z)
-    );
+    let sortedRules = rules.sort(([a], [z])=>(0, _bigSign).default(a - z));
     let returnValue = {
         base: new Set(),
         defaults: new Set(),