tailwindcss 3.0.21 → 3.0.24

package/lib/lib/expandApplyAtRules.js

@@ -8,12 +8,20 @@ var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-pa
 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);
+    };
+}
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function extractClasses(node) {
+/** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */ function extractClasses(node) {
     let classes = new Set();
     let container = _postcss.default.root({
         nodes: [
@@ -38,9 +46,116 @@ function extractBaseCandidates(candidates, separator) {
 }
 function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
-    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
+    return typeof prefix1 === "function" ? prefix1(selector) : prefix1 + selector;
+}
+function* pathToRoot(node) {
+    yield node;
+    while(node.parent){
+        yield node.parent;
+        node = node.parent;
+    }
+}
+/**
+ * Only clone the node itself and not its children
+ *
+ * @param {*} node
+ * @param {*} overrides
+ * @returns
+ */ function shallowClone(node, overrides = {}) {
+    let children = node.nodes;
+    node.nodes = [];
+    let tmp = node.clone(overrides);
+    node.nodes = children;
+    return tmp;
 }
-function buildApplyCache(applyCandidates, context) {
+/**
+ * Clone just the nodes all the way to the top that are required to represent
+ * this singular rule in the tree.
+ *
+ * For example, if we have CSS like this:
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (display: grid) {
+ *     .foo {
+ *       display: grid;
+ *       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ *     }
+ *   }
+ *
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ *
+ *   .baz {
+ *     color: orange;
+ *   }
+ * }
+ * ```
+ *
+ * And we're cloning `.bar` it'll return a cloned version of what's required for just that single node:
+ *
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @param {import('postcss').Node} node
+ */ function nestedClone(node) {
+    for (let parent of pathToRoot(node)){
+        if (node === parent) {
+            continue;
+        }
+        if (parent.type === "root") {
+            break;
+        }
+        node = shallowClone(parent, {
+            nodes: [
+                node
+            ]
+        });
+    }
+    return 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)=>{
+        // 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) {
+                return;
+            }
+        }
+        // Clone what's required to represent this singular rule in the tree
+        let container = nestedClone(rule);
+        for (let className of extractClasses(rule)){
+            let list = cache.get(className) || [];
+            cache.set(className, list);
+            list.push([
+                {
+                    layer: "user",
+                    sort: BigInt(idx) + highestOffset,
+                    important: false
+                },
+                container, 
+            ]);
+        }
+    });
+    return cache;
+}
+/**
+ * @returns {ApplyCache}
+ */ function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
         if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
             continue;
@@ -62,9 +177,42 @@ function buildApplyCache(applyCandidates, context) {
     }
     return context.applyClassCache;
 }
+/**
+ * Build a cache only when it's first used
+ *
+ * @param {() => ApplyCache} buildCacheFn
+ * @returns {ApplyCache}
+ */ function lazyCache(buildCacheFn) {
+    let cache = null;
+    return {
+        get: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.get(name);
+        },
+        has: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.has(name);
+        }
+    };
+}
+/**
+ * Take a series of multiple caches and merge
+ * them so they act like one large cache
+ *
+ * @param {ApplyCache[]} caches
+ * @returns {ApplyCache}
+ */ function combineCaches(caches) {
+    return {
+        get: (name)=>caches.flatMap((cache)=>cache.get(name) || []
+            )
+        ,
+        has: (name)=>caches.some((cache)=>cache.has(name)
+            )
+    };
+}
 function extractApplyCandidates(params) {
     let candidates = params.split(/[\s\t\n]+/g);
-    if (candidates[candidates.length - 1] === '!important') {
+    if (candidates[candidates.length - 1] === "!important") {
         return [
             candidates.slice(0, -1),
             true
@@ -75,11 +223,11 @@ function extractApplyCandidates(params) {
         false
     ];
 }
-function processApply(root, context) {
+function processApply(root, context, localCache) {
     let applyCandidates = new Set();
     // Collect all @apply rules and candidates
     let applies = [];
-    root.walkAtRules('apply', (rule)=>{
+    root.walkAtRules("apply", (rule)=>{
         let [candidates] = extractApplyCandidates(rule.params);
         for (let util of candidates){
             applyCandidates.add(util);
@@ -89,7 +237,10 @@ function processApply(root, context) {
     // Start the @apply process if we have rules with @apply in them
     if (applies.length > 0) {
         // Fill up some caches!
-        let applyClassCache = buildApplyCache(applyCandidates, context);
+        let applyClassCache = combineCaches([
+            localCache,
+            buildApplyCache(applyCandidates, context)
+        ]);
         /**
      * When we have an apply like this:
      *
@@ -122,27 +273,30 @@ function processApply(root, context) {
                     }
                     replaced.push(replacedSelector);
                 }
-                return replaced.join(', ');
-            }).join(', ');
+                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);
+            perParentApplies.set(apply.parent, [
+                candidates,
+                apply.source
+            ]);
             let [applyCandidates, important] = extractApplyCandidates(apply.params);
-            if (apply.parent.type === 'atrule') {
-                if (apply.parent.name === 'screen') {
+            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.`);
+                    ).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){
                 if ([
-                    prefix(context, 'group'),
-                    prefix(context, 'peer')
+                    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`);
@@ -158,12 +312,12 @@ function processApply(root, context) {
                 ]);
             }
         }
-        for (const [parent, candidates] of perParentApplies){
+        for (const [parent, [candidates, atApplySource]] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
-                for (let [meta, node] of rules){
+                for (let [meta, node1] of rules){
                     let parentClasses = extractClasses(parent);
-                    let nodeClasses = extractClasses(node);
+                    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.
@@ -190,14 +344,18 @@ function processApply(root, context) {
                     let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
                     );
                     if (intersects) {
-                        throw node.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
+                        throw node1.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
                     }
                     let root = _postcss.default.root({
                         nodes: [
-                            node.clone()
+                            node1.clone()
                         ]
                     });
-                    let canRewriteSelector = node.type !== 'atrule' || node.type === 'atrule' && node.name !== 'keyframes';
+                    // 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:
@@ -270,11 +428,6 @@ function processApply(root, context) {
             }
         }
         // Do it again, in case we have other `@apply` rules
-        processApply(root, context);
+        processApply(root, context, localCache);
     }
 }
-function expandApplyAtRules(context) {
-    return (root)=>{
-        processApply(root, context);
-    };
-}

package/lib/lib/expandTailwindAtRules.js

@@ -10,6 +10,135 @@ var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _log = _interopRequireDefault(require("../util/log"));
 var _cloneNodes = _interopRequireDefault(require("../util/cloneNodes"));
 var _defaultExtractor = require("./defaultExtractor");
+function expandTailwindAtRules(context) {
+    return (root)=>{
+        let layerNodes = {
+            base: null,
+            components: null,
+            utilities: null,
+            variants: null
+        };
+        root.walkAtRules((rule)=>{
+            // Make sure this file contains Tailwind directives. If not, we can save
+            // a lot of work and bail early. Also we don't have to register our touch
+            // file as a dependency since the output of this CSS does not depend on
+            // the source of any templates. Think Vue <style> blocks for example.
+            if (rule.name === "tailwind") {
+                if (Object.keys(layerNodes).includes(rule.params)) {
+                    layerNodes[rule.params] = rule;
+                }
+            }
+        });
+        if (Object.values(layerNodes).every((n)=>n === null
+        )) {
+            return root;
+        }
+        // ---
+        // Find potential rules in changed files
+        let candidates = new Set([
+            sharedState.NOT_ON_DEMAND
+        ]);
+        let seen = new Set();
+        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);
+            getClassCandidates(transformer(content), extractor, candidates, seen);
+        }
+        env.DEBUG && console.timeEnd("Reading changed files");
+        // ---
+        // Generate the actual CSS
+        let classCacheCount = context.classCache.size;
+        env.DEBUG && console.time("Generate rules");
+        let rules = (0, _generateRules).generateRules(candidates, context);
+        env.DEBUG && console.timeEnd("Generate rules");
+        // We only ever add to the classCache, so if it didn't grow, there is nothing new.
+        env.DEBUG && console.time("Build stylesheet");
+        if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
+            for (let rule of rules){
+                context.ruleCache.add(rule);
+            }
+            context.stylesheetCache = buildStylesheet([
+                ...context.ruleCache
+            ], context);
+        }
+        env.DEBUG && console.timeEnd("Build stylesheet");
+        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
+        // ---
+        // Replace any Tailwind directives with generated CSS
+        if (layerNodes.base) {
+            layerNodes.base.before((0, _cloneNodes).default([
+                ...baseNodes,
+                ...defaultNodes
+            ], layerNodes.base.source, {
+                layer: "base"
+            }));
+            layerNodes.base.remove();
+        }
+        if (layerNodes.components) {
+            layerNodes.components.before((0, _cloneNodes).default([
+                ...componentNodes
+            ], layerNodes.components.source, {
+                layer: "components"
+            }));
+            layerNodes.components.remove();
+        }
+        if (layerNodes.utilities) {
+            layerNodes.utilities.before((0, _cloneNodes).default([
+                ...utilityNodes
+            ], layerNodes.utilities.source, {
+                layer: "utilities"
+            }));
+            layerNodes.utilities.remove();
+        }
+        // We do post-filtering to not alter the emitted order of the variants
+        const variantNodes = Array.from(screenNodes).filter((node)=>{
+            var ref;
+            const parentLayer = (ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.parentLayer;
+            if (parentLayer === "components") {
+                return layerNodes.components !== null;
+            }
+            if (parentLayer === "utilities") {
+                return layerNodes.utilities !== null;
+            }
+            return true;
+        });
+        if (layerNodes.variants) {
+            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source, {
+                layer: "variants"
+            }));
+            layerNodes.variants.remove();
+        } else if (variantNodes.length > 0) {
+            root.append((0, _cloneNodes).default(variantNodes, root.source, {
+                layer: "variants"
+            }));
+        }
+        // If we've got a utility layer and no utilities are generated there's likely something wrong
+        const hasUtilityVariants = variantNodes.some((node)=>{
+            var ref;
+            return ((ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.parentLayer) === "utilities";
+        });
+        if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
+            _log.default.warn("content-problems", [
+                "No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.",
+                "https://tailwindcss.com/docs/content-configuration", 
+            ]);
+        }
+        // ---
+        if (env.DEBUG) {
+            console.log("Potential classes: ", candidates.size);
+            console.log("Active contexts: ", sharedState.contextSourcesMap.size);
+        }
+        // Clear the cache for the changed files
+        context.changedContent = [];
+        // Cleanup any leftover @layer atrules
+        root.walkAtRules("layer", (rule)=>{
+            if (Object.keys(layerNodes).includes(rule.params)) {
+                rule.remove();
+            }
+        });
+    };
+}
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -43,7 +172,7 @@ const builtInExtractors = {
 const builtInTransformers = {
     DEFAULT: (content)=>content
     ,
-    svelte: (content)=>content.replace(/(?:^|\s)class:/g, ' ')
+    svelte: (content)=>content.replace(/(?:^|\s)class:/g, " ")
 };
 function getExtractor(tailwindConfig, fileExtension) {
     let extractors = tailwindConfig.content.extract;
@@ -63,7 +192,7 @@ function getClassCandidates(content, extractor, candidates, seen) {
             maxSize: 25000
         }));
     }
-    for (let line of content.split('\n')){
+    for (let line of content.split("\n")){
         line = line.trim();
         if (seen.has(line)) {
             continue;
@@ -74,7 +203,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){
@@ -131,122 +260,3 @@ function buildStylesheet(rules, context) {
     }
     return returnValue;
 }
-function expandTailwindAtRules(context) {
-    return (root)=>{
-        let layerNodes = {
-            base: null,
-            components: null,
-            utilities: null,
-            variants: null
-        };
-        root.walkAtRules((rule)=>{
-            // Make sure this file contains Tailwind directives. If not, we can save
-            // a lot of work and bail early. Also we don't have to register our touch
-            // file as a dependency since the output of this CSS does not depend on
-            // the source of any templates. Think Vue <style> blocks for example.
-            if (rule.name === 'tailwind') {
-                if (Object.keys(layerNodes).includes(rule.params)) {
-                    layerNodes[rule.params] = rule;
-                }
-            }
-        });
-        if (Object.values(layerNodes).every((n)=>n === null
-        )) {
-            return root;
-        }
-        // ---
-        // Find potential rules in changed files
-        let candidates = new Set([
-            '*'
-        ]);
-        let seen = new Set();
-        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);
-            getClassCandidates(transformer(content), extractor, candidates, seen);
-        }
-        env.DEBUG && console.timeEnd('Reading changed files');
-        // ---
-        // Generate the actual CSS
-        let classCacheCount = context.classCache.size;
-        env.DEBUG && console.time('Generate rules');
-        let rules = (0, _generateRules).generateRules(candidates, context);
-        env.DEBUG && console.timeEnd('Generate rules');
-        // We only ever add to the classCache, so if it didn't grow, there is nothing new.
-        env.DEBUG && console.time('Build stylesheet');
-        if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-            for (let rule of rules){
-                context.ruleCache.add(rule);
-            }
-            context.stylesheetCache = buildStylesheet([
-                ...context.ruleCache
-            ], context);
-        }
-        env.DEBUG && console.timeEnd('Build stylesheet');
-        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
-        // ---
-        // Replace any Tailwind directives with generated CSS
-        if (layerNodes.base) {
-            layerNodes.base.before((0, _cloneNodes).default([
-                ...baseNodes,
-                ...defaultNodes
-            ], layerNodes.base.source));
-            layerNodes.base.remove();
-        }
-        if (layerNodes.components) {
-            layerNodes.components.before((0, _cloneNodes).default([
-                ...componentNodes
-            ], layerNodes.components.source));
-            layerNodes.components.remove();
-        }
-        if (layerNodes.utilities) {
-            layerNodes.utilities.before((0, _cloneNodes).default([
-                ...utilityNodes
-            ], layerNodes.utilities.source));
-            layerNodes.utilities.remove();
-        }
-        // We do post-filtering to not alter the emitted order of the variants
-        const variantNodes = Array.from(screenNodes).filter((node)=>{
-            var ref;
-            const parentLayer = (ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.parentLayer;
-            if (parentLayer === 'components') {
-                return layerNodes.components !== null;
-            }
-            if (parentLayer === 'utilities') {
-                return layerNodes.utilities !== null;
-            }
-            return true;
-        });
-        if (layerNodes.variants) {
-            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source));
-            layerNodes.variants.remove();
-        } else if (variantNodes.length > 0) {
-            root.append((0, _cloneNodes).default(variantNodes, root.source));
-        }
-        // If we've got a utility layer and no utilities are generated there's likely something wrong
-        const hasUtilityVariants = variantNodes.some((node)=>{
-            var ref;
-            return ((ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.parentLayer) === 'utilities';
-        });
-        if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
-            _log.default.warn('content-problems', [
-                'No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.',
-                'https://tailwindcss.com/docs/content-configuration', 
-            ]);
-        }
-        // ---
-        if (env.DEBUG) {
-            console.log('Potential classes: ', candidates.size);
-            console.log('Active contexts: ', sharedState.contextSourcesMap.size);
-        }
-        // Clear the cache for the changed files
-        context.changedContent = [];
-        // Cleanup any leftover @layer atrules
-        root.walkAtRules('layer', (rule)=>{
-            if (Object.keys(layerNodes).includes(rule.params)) {
-                rule.remove();
-            }
-        });
-    };
-}