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

package/lib/lib/expandApplyAtRules.js

@@ -2,20 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = expandApplyAtRules;
-var _postcss = _interopRequireDefault(require("postcss"));
-var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _generateRules = require("./generateRules");
-var _bigSign = _interopRequireDefault(require("../util/bigSign"));
-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)
-        );
-        processApply(root, context, localCache);
-    };
-}
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>expandApplyAtRules
+});
+const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
+const _generateRules = require("./generateRules");
+const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -29,7 +23,7 @@ function _interopRequireDefault(obj) {
         ]
     });
     container.walkRules((rule)=>{
-        (0, _postcssSelectorParser).default((selectors)=>{
+        (0, _postcssSelectorParser.default)((selectors)=>{
             selectors.walkClasses((classSelector)=>{
                 let parentSelector = classSelector.parent.toString();
                 let classes = groups.get(parentSelector);
@@ -40,13 +34,18 @@ function _interopRequireDefault(obj) {
             });
         }).processSync(rule.selector);
     });
-    let normalizedGroups = Array.from(groups.values(), (classes)=>Array.from(classes)
-    );
-    let classes1 = normalizedGroups.flat();
-    return Object.assign(classes1, {
+    let normalizedGroups = Array.from(groups.values(), (classes)=>Array.from(classes));
+    let classes = normalizedGroups.flat();
+    return Object.assign(classes, {
         groups: normalizedGroups
     });
 }
+let selectorExtractor = (0, _postcssSelectorParser.default)();
+/**
+ * @param {string} ruleSelectors
+ */ function extractSelectors(ruleSelectors) {
+    return selectorExtractor.astSync(ruleSelectors);
+}
 function extractBaseCandidates(candidates, separator) {
     let baseClasses = new Set();
     for (let candidate of candidates){
@@ -55,8 +54,8 @@ function extractBaseCandidates(candidates, separator) {
     return Array.from(baseClasses);
 }
 function prefix(context, selector) {
-    let prefix1 = context.tailwindConfig.prefix;
-    return typeof prefix1 === "function" ? prefix1(selector) : prefix1 + selector;
+    let prefix = context.tailwindConfig.prefix;
+    return typeof prefix === "function" ? prefix(selector) : prefix + selector;
 }
 function* pathToRoot(node) {
     yield node;
@@ -137,27 +136,27 @@ function* pathToRoot(node) {
  * @param {import('postcss').Root} root
  */ function buildLocalApplyCache(root, context) {
     /** @type {ApplyCache} */ let cache = new Map();
-    let highestOffset = context.layerOrder.user >> 4n;
-    root.walkRules((rule, idx)=>{
+    root.walkRules((rule)=>{
         // Ignore rules generated by Tailwind
         for (let node of pathToRoot(rule)){
-            var ref;
-            if (((ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.layer) !== undefined) {
+            var _node_raws_tailwind;
+            if (((_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.layer) !== undefined) {
                 return;
             }
         }
         // Clone what's required to represent this singular rule in the tree
         let container = nestedClone(rule);
+        let sort = context.offsets.create("user");
         for (let className of extractClasses(rule)){
             let list = cache.get(className) || [];
             cache.set(className, list);
             list.push([
                 {
                     layer: "user",
-                    sort: BigInt(idx) + highestOffset,
+                    sort,
                     important: false
                 },
-                container, 
+                container
             ]);
         }
     });
@@ -174,11 +173,10 @@ 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));
+        let matches = Array.from((0, _generateRules.resolveMatches)(candidate, context));
         if (matches.length === 0) {
             context.notClassCache.add(candidate);
             continue;
@@ -213,11 +211,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) {
@@ -272,30 +267,83 @@ function processApply(root, context, localCache) {
    * 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 = utilitySelectors.split(/\s*(?<!\\)\,(?![^(]*\))\s*/g);
-        return selector.split(/\s*(?<!\\)\,(?![^(]*\))\s*/g).map((s)=>{
-            let replaced = [];
-            for (let utilitySelector of utilitySelectorsList){
-                let replacedSelector = utilitySelector;
-                for (const needle of needles){
-                    replacedSelector = replacedSelector.replace(needle, s);
+   *
+   * @param {string} selector
+   * @param {string} utilitySelectors
+   * @param {string} candidate
+   */ function replaceSelector(selector, utilitySelectors, candidate) {
+        let selectorList = extractSelectors(selector);
+        let utilitySelectorsList = extractSelectors(utilitySelectors);
+        let candidateList = extractSelectors(`.${(0, _escapeClassName.default)(candidate)}`);
+        let candidateClass = candidateList.nodes[0].nodes[0];
+        selectorList.each((sel)=>{
+            /** @type {Set<import('postcss-selector-parser').Selector>} */ let replaced = new Set();
+            utilitySelectorsList.each((utilitySelector)=>{
+                let hasReplaced = false;
+                utilitySelector = utilitySelector.clone();
+                utilitySelector.walkClasses((node)=>{
+                    if (node.value !== candidateClass.value) {
+                        return;
+                    }
+                    // Don't replace multiple instances of the same class
+                    // This is theoretically correct but only partially
+                    // We'd need to generate every possible permutation of the replacement
+                    // For example with `.foo + .foo { … }` and `section { @apply foo; }`
+                    // We'd need to generate all of these:
+                    // - `.foo + .foo`
+                    // - `.foo + section`
+                    // - `section + .foo`
+                    // - `section + section`
+                    if (hasReplaced) {
+                        return;
+                    }
+                    // Since you can only `@apply` class names this is sufficient
+                    // We want to replace the matched class name with the selector the user is using
+                    // Ex: Replace `.text-blue-500` with `.foo.bar:is(.something-cool)`
+                    node.replaceWith(...sel.nodes.map((node)=>node.clone()));
+                    // Record that we did something and we want to use this new selector
+                    replaced.add(utilitySelector);
+                    hasReplaced = true;
+                });
+            });
+            // Sort tag names before class names (but only sort each group (separated by a combinator)
+            // separately and not in total)
+            // This happens when replacing `.bar` in `.foo.bar` with a tag like `section`
+            for (let sel1 of replaced){
+                let groups = [
+                    []
+                ];
+                for (let node of sel1.nodes){
+                    if (node.type === "combinator") {
+                        groups.push(node);
+                        groups.push([]);
+                    } else {
+                        let last = groups[groups.length - 1];
+                        last.push(node);
+                    }
                 }
-                if (replacedSelector === utilitySelector) {
-                    continue;
+                sel1.nodes = [];
+                for (let group of groups){
+                    if (Array.isArray(group)) {
+                        group.sort((a, b)=>{
+                            if (a.type === "tag" && b.type === "class") {
+                                return -1;
+                            } else if (a.type === "class" && b.type === "tag") {
+                                return 1;
+                            } else if (a.type === "class" && b.type === "pseudo" && b.value.startsWith("::")) {
+                                return -1;
+                            } else if (a.type === "pseudo" && a.value.startsWith("::") && b.type === "class") {
+                                return 1;
+                            }
+                            return 0;
+                        });
+                    }
+                    sel1.nodes = sel1.nodes.concat(group);
                 }
-                replaced.push(replacedSelector);
             }
-            return replaced.join(", ");
-        }).join(", ");
+            sel.replaceWith(...replaced);
+        });
+        return selectorList.toString();
     }
     let perParentApplies = new Map();
     // Collect all apply candidates and their rules
@@ -308,16 +356,15 @@ function processApply(root, context, localCache) {
             candidates,
             apply.source
         ]);
-        let [applyCandidates, important] = extractApplyCandidates(apply.params);
+        let [applyCandidates1, 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.`);
+                let screenType = apply.parent.params;
+                throw apply.error(`@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates1.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 (let applyCandidate of applyCandidates){
+        for (let applyCandidate of applyCandidates1){
             if ([
                 prefix(context, "group"),
                 prefix(context, "peer")
@@ -336,23 +383,21 @@ function processApply(root, context, localCache) {
             ]);
         }
     }
-    for (const [parent, [candidates1, atApplySource]] of perParentApplies){
+    for (let [parent, [candidates1, atApplySource]] of perParentApplies){
         let siblings = [];
-        for (let [applyCandidate, important, rules] of candidates1){
+        for (let [applyCandidate1, important1, rules1] of candidates1){
             let potentialApplyCandidates = [
-                applyCandidate,
+                applyCandidate1,
                 ...extractBaseCandidates([
-                    applyCandidate
-                ], context.tailwindConfig.separator), 
+                    applyCandidate1
+                ], context.tailwindConfig.separator)
             ];
-            for (let [meta, node1] of rules){
+            for (let [meta, node] of rules1){
                 let parentClasses = extractClasses(parent);
-                let nodeClasses = extractClasses(node1);
+                let nodeClasses = extractClasses(node);
                 // 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();
+                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.
@@ -376,23 +421,22 @@ function processApply(root, context, localCache) {
                 // 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)
-                );
+                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.`);
+                    throw node.error(`You cannot \`@apply\` the \`${applyCandidate1}\` utility here because it creates a circular dependency.`);
                 }
-                let root = _postcss.default.root({
+                let root1 = _postcss.default.root({
                     nodes: [
-                        node1.clone()
+                        node.clone()
                     ]
                 });
                 // Make sure every node in the entire tree points back at the @apply rule that generated it
-                root.walk((node)=>{
+                root1.walk((node)=>{
                     node.source = atApplySource;
                 });
-                let canRewriteSelector = node1.type !== "atrule" || node1.type === "atrule" && node1.name !== "keyframes";
+                let canRewriteSelector = node.type !== "atrule" || node.type === "atrule" && node.name !== "keyframes";
                 if (canRewriteSelector) {
-                    root.walkRules((rule)=>{
+                    root1.walkRules((rule)=>{
                         // Let's imagine you have the following structure:
                         //
                         // .foo {
@@ -424,32 +468,40 @@ function processApply(root, context, localCache) {
                         // 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
-                        )) {
+                        if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate1)) {
                             rule.remove();
                             return;
                         }
-                        rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate);
+                        // 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, applyCandidate1);
+                        // 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;
+                            d.important = meta.important || important1;
                         });
                     });
                 }
+                // It could be that the node we were inserted was removed because the class didn't match
+                // If that was the *only* rule in the parent, then we have nothing add so we skip it
+                if (!root1.nodes[0]) {
+                    continue;
+                }
                 // 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], 
+                    meta.sort,
+                    root1.nodes[0]
                 ]);
             }
         }
         // Inject the rules, sorted, correctly
-        let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)
-        ).map((s)=>s[1]
-        );
+        let nodes = context.offsets.sort(siblings).map((s)=>s[1]);
         // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
         parent.after(nodes);
     }
@@ -465,3 +517,10 @@ function processApply(root, context, localCache) {
     // Do it again, in case we have other `@apply` rules
     processApply(root, context, localCache);
 }
+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));
+        processApply(root, context, localCache);
+    };
+}