tailwindcss 0.0.0-insiders.d2b53cd → 0.0.0-insiders.d2fdf9e

package/lib/lib/expandTailwindAtRules.js

@@ -7,7 +7,138 @@ var _quickLru = _interopRequireDefault(require("quick-lru"));
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
 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, 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
@@ -17,13 +148,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        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) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -37,36 +166,17 @@ function _interopRequireWildcard(obj) {
     }
 }
 let env = sharedState.env;
-const PATTERNS = [
-    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^<>"'`\s]*[^"'`\s:])/.source
-].join('|');
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g;
 const builtInExtractors = {
-    DEFAULT: (content)=>{
-        let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || [];
-        let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-        return [
-            ...broadMatches,
-            ...innerMatches
-        ];
-    }
+    DEFAULT: _defaultExtractor.defaultExtractor
 };
 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;
-    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;
@@ -82,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;
@@ -93,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){
@@ -108,6 +218,7 @@ function buildStylesheet(rules, context) {
     );
     let returnValue = {
         base: new Set(),
+        defaults: new Set(),
         components: new Set(),
         utilities: new Set(),
         variants: new Set(),
@@ -130,6 +241,10 @@ function buildStylesheet(rules, context) {
             returnValue.base.add(rule);
             continue;
         }
+        if (sort & context.layerOrder.defaults) {
+            returnValue.defaults.add(rule);
+            continue;
+        }
         if (sort & context.layerOrder.components) {
             returnValue.components.add(rule);
             continue;
@@ -145,99 +260,3 @@ function buildStylesheet(rules, context) {
     }
     return returnValue;
 }
-function expandTailwindAtRules(context) {
-    return (root)=>{
-        let layerNodes = {
-            base: null,
-            components: null,
-            utilities: null,
-            variants: null
-        };
-        // 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.
-        root.walkAtRules('tailwind', (rule)=>{
-            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);
-        }
-        // ---
-        // 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 { 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
-            ], 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();
-        }
-        if (layerNodes.variants) {
-            layerNodes.variants.before((0, _cloneNodes).default([
-                ...screenNodes
-            ], layerNodes.variants.source));
-            layerNodes.variants.remove();
-        } else {
-            root.append((0, _cloneNodes).default([
-                ...screenNodes
-            ], root.source));
-        }
-        // ---
-        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();
-            }
-        });
-    };
-}