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

package/CHANGELOG.md

@@ -19,6 +19,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support PostCSS config options in config file in CLI ([#8226](https://github.com/tailwindlabs/tailwindcss/pull/8226))
 - Remove default `[hidden]` style in preflight ([#8248](https://github.com/tailwindlabs/tailwindcss/pull/8248))
 - Only check selectors containing base apply candidates for circular dependencies ([#8222](https://github.com/tailwindlabs/tailwindcss/pull/8222))
+- Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204))
+- Move `important` selector to the front when `@apply`-ing selector-modifying variants in custom utilities ([#8313](https://github.com/tailwindlabs/tailwindcss/pull/8313))
+
+### Changed
+
+- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
 
 ### Added
 
@@ -32,6 +38,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
 - Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
 - Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924))
+- Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
+- Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
+- Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))
 
 ## [3.0.24] - 2022-04-12
 

package/lib/cli-peer-dependencies.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.lazyPostcss = lazyPostcss;
 exports.lazyAutoprefixer = lazyAutoprefixer;
 exports.lazyCssnano = lazyCssnano;
-exports.postcss = void 0;
-let postcss = require("postcss");
-exports.postcss = postcss;
+function lazyPostcss() {
+    return require("postcss");
+}
 function lazyAutoprefixer() {
     return require("autoprefixer");
 }

package/lib/cli.js

@@ -130,6 +130,13 @@ function oneOf(...options) {
         manualParsing: true
     });
 }
+function loadPostcss() {
+    // Try to load a local `postcss` version first
+    try {
+        return require("postcss");
+    } catch  {}
+    return (0, _indexJs).lazyPostcss();
+}
 let commands = {
     init: {
         run: init,
@@ -528,7 +535,8 @@ async function build() {
                 return (0, _indexJs).lazyCssnano()(options);
             })(), 
         ].filter(Boolean);
-        let processor = (0, _indexJs).postcss(plugins);
+        let postcss = loadPostcss();
+        let processor = postcss(plugins);
         function processCSS(css) {
             let start = process.hrtime.bigint();
             return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {
@@ -649,7 +657,8 @@ async function build() {
             let tailwindPluginIdx = plugins.indexOf("__TAILWIND_PLUGIN_POSITION__");
             let copy = plugins.slice();
             copy.splice(tailwindPluginIdx, 1, tailwindPlugin);
-            let processor = (0, _indexJs).postcss(copy);
+            let postcss = loadPostcss();
+            let processor = postcss(copy);
             function processCSS(css) {
                 let start = process.hrtime.bigint();
                 return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {

package/lib/corePlugins.js

@@ -1420,6 +1420,9 @@ let corePlugins = {
             ".grid-flow-col": {
                 gridAutoFlow: "column"
             },
+            ".grid-flow-dense": {
+                gridAutoFlow: "dense"
+            },
             ".grid-flow-row-dense": {
                 gridAutoFlow: "row dense"
             },
@@ -3065,6 +3068,9 @@ let corePlugins = {
             },
             ".mix-blend-luminosity": {
                 "mix-blend-mode": "luminosity"
+            },
+            ".mix-blend-plus-lighter": {
+                "mix-blend-mode": "plus-lighter"
             }
         });
     },

package/lib/lib/defaultExtractor.js

@@ -3,38 +3,165 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.defaultExtractor = defaultExtractor;
-const PATTERNS = [
-    /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
-    /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
-    /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
-    /([^${(<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^${(<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
-    /([^${(<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^${(<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^"'`\s]*[^<>"'`\s:\\])/.source,
-    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
-].join("|");
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, "g");
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
-function defaultExtractor(content) {
-    let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP);
-    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-    let results = [
-        ...broadMatches,
-        ...innerMatches
-    ].flat().filter((v)=>v !== undefined
-    );
-    return results;
+var regex = _interopRequireWildcard(require("./regex"));
+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];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function defaultExtractor(context) {
+    let patterns = Array.from(buildRegExps(context));
+    /**
+   * @param {string} content
+   */ return (content)=>{
+        /** @type {(string|string)[]} */ let results = [];
+        for (let pattern of patterns){
+            var ref;
+            results.push(...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []);
+        }
+        return results.filter((v)=>v !== undefined
+        ).map(clipAtBalancedParens);
+    };
+}
+function* buildRegExps(context) {
+    let separator = context.tailwindConfig.separator;
+    yield regex.pattern([
+        // Variants
+        "((?=((",
+        regex.any([
+            regex.pattern([
+                /\[[^\s"'\\]+\]/,
+                separator
+            ]),
+            regex.pattern([
+                /[^\s"'\[\\]+/,
+                separator
+            ])
+        ], true),
+        ")+))\\2)?",
+        // Important (optional)
+        /!?/,
+        regex.any([
+            // Arbitrary properties
+            /\[[^\s:'"]+:[^\s\]]+\]/,
+            // Utilities
+            regex.pattern([
+                // Utility Name / Group Name
+                /-?(?:\w+)/,
+                // Normal/Arbitrary values
+                regex.optional(regex.any([
+                    regex.pattern([
+                        // Arbitrary values
+                        /-\[[^\s:]+\]/,
+                        // Not immediately followed by an `{[(`
+                        /(?![{([]])/,
+                        // optionally followed by an opacity modifier
+                        /(?:\/[^\s'"\\$]*)?/, 
+                    ]),
+                    regex.pattern([
+                        // Arbitrary values
+                        /-\[[^\s]+\]/,
+                        // Not immediately followed by an `{[(`
+                        /(?![{([]])/,
+                        // optionally followed by an opacity modifier
+                        /(?:\/[^\s'"\\$]*)?/, 
+                    ]),
+                    // Normal values w/o quotes — may include an opacity modifier
+                    /[-\/][^\s'"\\$={]*/, 
+                ])), 
+            ]), 
+        ]), 
+    ]);
+// 5. Inner matches
+// yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+}
+// We want to capture any "special" characters
+// AND the characters immediately following them (if there is one)
+let SPECIALS = /([\[\]'"`])([^\[\]'"`])?/g;
+let ALLOWED_CLASS_CHARACTERS = /[^"'`\s<>\]]+/;
+/**
+ * Clips a string ensuring that parentheses, quotes, etc… are balanced
+ * Used for arbitrary values only
+ *
+ * We will go past the end of the balanced parens until we find a non-class character
+ *
+ * Depth matching behavior:
+ * w-[calc(100%-theme('spacing[some_key][1.5]'))]']
+ *   ┬    ┬          ┬┬       ┬        ┬┬   ┬┬┬┬┬┬┬
+ *   1    2          3        4        34   3 210 END
+ *   ╰────┴──────────┴────────┴────────┴┴───┴─┴┴┴
+ *
+ * @param {string} input
+ */ function clipAtBalancedParens(input) {
+    // We are care about this for arbitrary values
+    if (!input.includes("-[")) {
+        return input;
+    }
+    let depth = 0;
+    let openStringTypes = [];
+    // Find all parens, brackets, quotes, etc
+    // Stop when we end at a balanced pair
+    // This is naive and will treat mismatched parens as balanced
+    // This shouldn't be a problem in practice though
+    let matches = input.matchAll(SPECIALS);
+    // We can't use lookbehind assertions because we have to support Safari
+    // So, instead, we've emulated it using capture groups and we'll re-work the matches to accommodate
+    matches = Array.from(matches).flatMap((match)=>{
+        const [, ...groups] = match;
+        return groups.map((group, idx)=>Object.assign([], match, {
+                index: match.index + idx,
+                0: group
+            })
+        );
+    });
+    for (let match1 of matches){
+        let char = match1[0];
+        let inStringType = openStringTypes[openStringTypes.length - 1];
+        if (char === inStringType) {
+            openStringTypes.pop();
+        } else if (char === "'" || char === '"' || char === "`") {
+            openStringTypes.push(char);
+        }
+        if (inStringType) {
+            continue;
+        } else if (char === "[") {
+            depth++;
+            continue;
+        } else if (char === "]") {
+            depth--;
+            continue;
+        }
+        // We've gone one character past the point where we should stop
+        // This means that there was an extra closing `]`
+        // We'll clip to just before it
+        if (depth < 0) {
+            return input.substring(0, match1.index);
+        }
+        // We've finished balancing the brackets but there still may be characters that can be included
+        // For example in the class `text-[#336699]/[.35]`
+        // The depth goes to `0` at the closing `]` but goes up again at the `[`
+        // If we're at zero and encounter a non-class character then we clip the class there
+        if (depth === 0 && !ALLOWED_CLASS_CHARACTERS.test(char)) {
+            return input.substring(0, match1.index);
+        }
+    }
+    return input;
 } // Regular utilities
  // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
  // Arbitrary values

package/lib/lib/expandApplyAtRules.js

@@ -47,6 +47,14 @@ function _interopRequireDefault(obj) {
         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();
     for (let candidate of candidates){
@@ -281,8 +289,8 @@ function processApply(root, context, localCache) {
                 needle1.replace(/\\2c /g, "\\,")
             ])
         ];
-        let utilitySelectorsList = utilitySelectors.split(/\s*(?<!\\)\,(?![^(]*\))\s*/g);
-        return selector.split(/\s*(?<!\\)\,(?![^(]*\))\s*/g).map((s)=>{
+        let utilitySelectorsList = extractSelectors(utilitySelectors);
+        return extractSelectors(selector).map((s)=>{
             let replaced = [];
             for (let utilitySelector of utilitySelectorsList){
                 let replacedSelector = utilitySelector;
@@ -429,7 +437,17 @@ function processApply(root, context, localCache) {
                             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, 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;
                         });

package/lib/lib/expandTailwindAtRules.js

@@ -42,7 +42,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");
@@ -174,9 +174,9 @@ const builtInTransformers = {
     ,
     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;

package/lib/lib/generateRules.js

@@ -14,7 +14,9 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _formatVariantSelector = require("../util/formatVariantSelector");
 var _nameClass = require("../util/nameClass");
 var _dataTypes = require("../util/dataTypes");
+var _setupContextUtils = require("./setupContextUtils");
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
+var _splitAtTopLevelOnlyJs = require("../util/splitAtTopLevelOnly.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -151,6 +153,22 @@ function applyVariant(variant, matches, context) {
     if (matches.length === 0) {
         return matches;
     }
+    // Register arbitrary variants
+    if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+        let selector = (0, _dataTypes).normalize(variant.slice(1, -1));
+        if (!(0, _setupContextUtils).isValidVariantFormatString(selector)) {
+            return [];
+        }
+        let fn = (0, _setupContextUtils).parseVariant(selector);
+        let sort = Array.from(context.variantOrder.values()).pop() << 1n;
+        context.variantMap.set(variant, [
+            [
+                sort,
+                fn
+            ]
+        ]);
+        context.variantOrder.set(variant, sort);
+    }
     if (context.variantMap.has(variant)) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
@@ -416,7 +434,7 @@ function splitWithSeparator(input, separator) {
             sharedState.NOT_ON_DEMAND
         ];
     }
-    return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, "g"));
+    return Array.from((0, _splitAtTopLevelOnlyJs).splitAtTopLevelOnly(input, separator));
 }
 function* recordCandidates(matches, classCandidate) {
     for (const match of matches){

package/lib/lib/regex.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.pattern = pattern;
+exports.withoutCapturing = withoutCapturing;
+exports.any = any;
+exports.optional = optional;
+exports.zeroOrMore = zeroOrMore;
+exports.nestedBrackets = nestedBrackets;
+exports.escape = escape;
+const REGEX_SPECIAL = /[\\^$.*+?()[\]{}|]/g;
+const REGEX_HAS_SPECIAL = RegExp(REGEX_SPECIAL.source);
+/**
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */ function toSource(source) {
+    source = Array.isArray(source) ? source : [
+        source
+    ];
+    source = source.map((item)=>item instanceof RegExp ? item.source : item
+    );
+    return source.join("");
+}
+function pattern(source) {
+    return new RegExp(toSource(source), "g");
+}
+function withoutCapturing(source) {
+    return new RegExp(`(?:${toSource(source)})`, "g");
+}
+function any(sources) {
+    return `(?:${sources.map(toSource).join("|")})`;
+}
+function optional(source) {
+    return `(?:${toSource(source)})?`;
+}
+function zeroOrMore(source) {
+    return `(?:${toSource(source)})*`;
+}
+function nestedBrackets(open, close, depth = 1) {
+    return withoutCapturing([
+        escape(open),
+        /[^\s]*/,
+        depth === 1 ? `[^${escape(open)}${escape(close)}\s]*` : any([
+            `[^${escape(open)}${escape(close)}\s]*`,
+            nestedBrackets(open, close, depth - 1)
+        ]),
+        /[^\s]*/,
+        escape(close), 
+    ]);
+}
+function escape(string) {
+    return string && REGEX_HAS_SPECIAL.test(string) ? string.replace(REGEX_SPECIAL, "\\$&") : string || "";
+}

package/lib/lib/setupContextUtils.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.isValidVariantFormatString = isValidVariantFormatString;
+exports.parseVariant = parseVariant;
 exports.getFileModifiedMap = getFileModifiedMap;
 exports.createContext = createContext;
 exports.getContext = getContext;
@@ -183,6 +185,29 @@ function withIdentifiers(styles) {
         });
     });
 }
+function isValidVariantFormatString(format) {
+    return format.startsWith("@") || format.includes("&");
+}
+function parseVariant(variant) {
+    variant = variant.replace(/\n+/g, "").replace(/\s{1,}/g, " ").trim();
+    let fns = parseVariantFormatString(variant).map((str)=>{
+        if (!str.startsWith("@")) {
+            return ({ format  })=>format(str)
+            ;
+        }
+        let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str);
+        return ({ wrap  })=>wrap(_postcss.default.atRule({
+                name,
+                params: params.trim()
+            }))
+        ;
+    }).reverse();
+    return (api)=>{
+        for (let fn of fns){
+            fn(api);
+        }
+    };
+}
 function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv).default(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -205,31 +230,21 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 if (typeof variantFunction !== "string") {
                     // Safelist public API functions
                     return ({ modifySelectors , container , separator  })=>{
-                        return variantFunction({
+                        let result = variantFunction({
                             modifySelectors,
                             container,
                             separator
                         });
+                        if (typeof result === "string" && !isValidVariantFormatString(result)) {
+                            throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                        }
+                        return result;
                     };
                 }
-                variantFunction = variantFunction.replace(/\n+/g, "").replace(/\s{1,}/g, " ").trim();
-                let fns = parseVariantFormatString(variantFunction).map((str)=>{
-                    if (!str.startsWith("@")) {
-                        return ({ format  })=>format(str)
-                        ;
-                    }
-                    let [, name, params] = /@(.*?) (.*)/g.exec(str);
-                    return ({ wrap  })=>wrap(_postcss.default.atRule({
-                            name,
-                            params
-                        }))
-                    ;
-                }).reverse();
-                return (api)=>{
-                    for (let fn of fns){
-                        fn(api);
-                    }
-                };
+                if (!isValidVariantFormatString(variantFunction)) {
+                    throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                }
+                return parseVariant(variantFunction);
             });
             insertInto(variantList, variantName, options);
             variantMap.set(variantName, variantFunctions);