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

package/lib/css/preflight.css

@@ -9,7 +9,12 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: currentColor; /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
 }
 
 /*
@@ -53,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -139,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -155,6 +160,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -283,7 +289,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -304,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 
@@ -317,6 +324,13 @@ button,
   cursor: pointer;
 }
 
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
@@ -344,11 +358,3 @@ video {
   max-width: 100%;
   height: auto;
 }
-
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}

package/lib/featureFlags.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.flagEnabled = flagEnabled;
 exports.issueFlagNotices = issueFlagNotices;
 exports.default = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
+var _picocolors = _interopRequireDefault(require("picocolors"));
 var _log = _interopRequireDefault(require("./util/log"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -13,34 +13,37 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    optimizeUniversalDefaults: false
 };
 let featureFlags = {
-    future: [],
+    future: [
+        "hoverOnlyWhenSupported",
+        "respectDefaultRingColorOpacity"
+    ],
     experimental: [
-        'optimizeUniversalDefaults'
+        "optimizeUniversalDefaults",
+        "variantGrouping"
     ]
 };
 function flagEnabled(config, flag) {
     if (featureFlags.future.includes(flag)) {
         var ref;
         var ref1, ref2;
-        return config.future === 'all' || ((ref2 = (ref1 = config === null || config === void 0 ? void 0 : (ref = config.future) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref1 !== void 0 ? ref1 : defaults[flag]) !== null && ref2 !== void 0 ? ref2 : false);
+        return config.future === "all" || ((ref2 = (ref1 = config === null || config === void 0 ? void 0 : (ref = config.future) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref1 !== void 0 ? ref1 : defaults[flag]) !== null && ref2 !== void 0 ? ref2 : false);
     }
     if (featureFlags.experimental.includes(flag)) {
-        var ref;
-        var ref11, ref12;
-        return config.experimental === 'all' || ((ref12 = (ref11 = config === null || config === void 0 ? void 0 : (ref = config.experimental) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref11 !== void 0 ? ref11 : defaults[flag]) !== null && ref12 !== void 0 ? ref12 : false);
+        var ref3;
+        var ref4, ref5;
+        return config.experimental === "all" || ((ref5 = (ref4 = config === null || config === void 0 ? void 0 : (ref3 = config.experimental) === null || ref3 === void 0 ? void 0 : ref3[flag]) !== null && ref4 !== void 0 ? ref4 : defaults[flag]) !== null && ref5 !== void 0 ? ref5 : false);
     }
     return false;
 }
 function experimentalFlagsEnabled(config) {
-    if (config.experimental === 'all') {
+    if (config.experimental === "all") {
         return featureFlags.experimental;
     }
     var ref;
-    return Object.keys((ref = config === null || config === void 0 ? void 0 : config.experimental) !== null && ref !== void 0 ? ref : {
-    }).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]
+    return Object.keys((ref = config === null || config === void 0 ? void 0 : config.experimental) !== null && ref !== void 0 ? ref : {}).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]
     );
 }
 function issueFlagNotices(config) {
@@ -48,11 +51,11 @@ function issueFlagNotices(config) {
         return;
     }
     if (experimentalFlagsEnabled(config).length > 0) {
-        let changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
-        ).join(', ');
-        _log.default.warn('experimental-flags-enabled', [
+        let changes = experimentalFlagsEnabled(config).map((s)=>_picocolors.default.yellow(s)
+        ).join(", ");
+        _log.default.warn("experimental-flags-enabled", [
             `You have enabled experimental features: ${changes}`,
-            'Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.', 
+            "Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.", 
         ]);
     }
 }

package/lib/index.js

@@ -1,6 +1,5 @@
 "use strict";
 var _setupTrackingContext = _interopRequireDefault(require("./lib/setupTrackingContext"));
-var _setupWatchingContext = _interopRequireDefault(require("./lib/setupWatchingContext"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
 var _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
@@ -10,20 +9,30 @@ function _interopRequireDefault(obj) {
 }
 module.exports = function tailwindcss(configOrPath) {
     return {
-        postcssPlugin: 'tailwindcss',
+        postcssPlugin: "tailwindcss",
         plugins: [
             _sharedState.env.DEBUG && function(root) {
-                console.log('\n');
-                console.time('JIT TOTAL');
+                console.log("\n");
+                console.time("JIT TOTAL");
                 return root;
             },
             function(root, result) {
-                let setupContext = _sharedState.env.TAILWIND_MODE === 'watch' ? (0, _setupWatchingContext).default(configOrPath) : (0, _setupTrackingContext).default(configOrPath);
-                (0, _processTailwindFeatures).default(setupContext)(root, result);
+                let context = (0, _setupTrackingContext).default(configOrPath);
+                if (root.type === "document") {
+                    let roots = root.nodes.filter((node)=>node.type === "root"
+                    );
+                    for (const root1 of roots){
+                        if (root1.type === "root") {
+                            (0, _processTailwindFeatures).default(context)(root1, result);
+                        }
+                    }
+                    return;
+                }
+                (0, _processTailwindFeatures).default(context)(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
-                console.timeEnd('JIT TOTAL');
-                console.log('\n');
+                console.timeEnd("JIT TOTAL");
+                console.log("\n");
                 return root;
             }, 
         ].filter(Boolean)

package/lib/lib/cacheInvalidation.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.hasContentChanged = hasContentChanged;
+var _crypto = _interopRequireDefault(require("crypto"));
+var sharedState = _interopRequireWildcard(require("./sharedState"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+    }
+}
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */ function getHash(str) {
+    try {
+        return _crypto.default.createHash("md5").update(str, "utf-8").digest("binary");
+    } catch (err) {
+        return "";
+    }
+}
+function hasContentChanged(sourcePath, root) {
+    let css = root.toString();
+    // We only care about files with @tailwind directives
+    // Other files use an existing context
+    if (!css.includes("@tailwind")) {
+        return false;
+    }
+    let existingHash = sharedState.sourceHashMap.get(sourcePath);
+    let rootHash = getHash(css);
+    let didChange = existingHash !== rootHash;
+    sharedState.sourceHashMap.set(sourcePath, rootHash);
+    return didChange;
+}

package/lib/lib/collapseAdjacentRules.js

@@ -3,18 +3,8 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = collapseAdjacentRules;
-let comparisonMap = {
-    atrule: [
-        'name',
-        'params'
-    ],
-    rule: [
-        'selector'
-    ]
-};
-let types = new Set(Object.keys(comparisonMap));
 function collapseAdjacentRules() {
-    return (root)=>{
+    function collapseRulesIn(root) {
         let currentRule = null;
         root.each((node)=>{
             if (!types.has(node.type)) {
@@ -27,15 +17,41 @@ function collapseAdjacentRules() {
             }
             let properties = comparisonMap[node.type];
             var _property, _property1;
-            if (node.type === 'atrule' && node.name === 'font-face') {
+            if (node.type === "atrule" && node.name === "font-face") {
                 currentRule = node;
-            } else if (properties.every((property)=>((_property = node[property]) !== null && _property !== void 0 ? _property : '').replace(/\s+/g, ' ') === ((_property1 = currentRule[property]) !== null && _property1 !== void 0 ? _property1 : '').replace(/\s+/g, ' ')
+            } else if (properties.every((property)=>((_property = node[property]) !== null && _property !== void 0 ? _property : "").replace(/\s+/g, " ") === ((_property1 = currentRule[property]) !== null && _property1 !== void 0 ? _property1 : "").replace(/\s+/g, " ")
             )) {
-                currentRule.append(node.nodes);
+                // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+                if (node.nodes) {
+                    currentRule.append(node.nodes);
+                }
                 node.remove();
             } else {
                 currentRule = node;
             }
         });
+        // After we've collapsed adjacent rules & at-rules, we need to collapse
+        // adjacent rules & at-rules that are children of at-rules.
+        // We do not care about nesting rules because Tailwind CSS
+        // explicitly does not handle rule nesting on its own as
+        // the user is expected to use a nesting plugin
+        root.each((node)=>{
+            if (node.type === "atrule") {
+                collapseRulesIn(node);
+            }
+        });
+    }
+    return (root)=>{
+        collapseRulesIn(root);
     };
 }
+let comparisonMap = {
+    atrule: [
+        "name",
+        "params"
+    ],
+    rule: [
+        "selector"
+    ]
+};
+let types = new Set(Object.keys(comparisonMap));

package/lib/lib/collapseDuplicateDeclarations.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = collapseDuplicateDeclarations;
+function collapseDuplicateDeclarations() {
+    return (root)=>{
+        root.walkRules((node)=>{
+            let seen = new Map();
+            let droppable = new Set([]);
+            let byProperty = new Map();
+            node.walkDecls((decl)=>{
+                // This could happen if we have nested selectors. In that case the
+                // parent will loop over all its declarations but also the declarations
+                // of nested rules. With this we ensure that we are shallowly checking
+                // declarations.
+                if (decl.parent !== node) {
+                    return;
+                }
+                if (seen.has(decl.prop)) {
+                    // Exact same value as what we have seen so far
+                    if (seen.get(decl.prop).value === decl.value) {
+                        // Keep the last one, drop the one we've seen so far
+                        droppable.add(seen.get(decl.prop));
+                        // Override the existing one with the new value. This is necessary
+                        // so that if we happen to have more than one declaration with the
+                        // same value, that we keep removing the previous one. Otherwise we
+                        // will only remove the *first* one.
+                        seen.set(decl.prop, decl);
+                        return;
+                    }
+                    // Not the same value, so we need to check if we can merge it so
+                    // let's collect it first.
+                    if (!byProperty.has(decl.prop)) {
+                        byProperty.set(decl.prop, new Set());
+                    }
+                    byProperty.get(decl.prop).add(seen.get(decl.prop));
+                    byProperty.get(decl.prop).add(decl);
+                }
+                seen.set(decl.prop, decl);
+            });
+            // Drop all the duplicate declarations with the exact same value we've
+            // already seen so far.
+            for (let decl1 of droppable){
+                decl1.remove();
+            }
+            // Analyze the declarations based on its unit, drop all the declarations
+            // with the same unit but the last one in the list.
+            for (let declarations of byProperty.values()){
+                let byUnit = new Map();
+                for (let decl of declarations){
+                    let unit = resolveUnit(decl.value);
+                    if (unit === null) {
+                        continue;
+                    }
+                    if (!byUnit.has(unit)) {
+                        byUnit.set(unit, new Set());
+                    }
+                    byUnit.get(unit).add(decl);
+                }
+                for (let declarations1 of byUnit.values()){
+                    // Get all but the last one
+                    let removableDeclarations = Array.from(declarations1).slice(0, -1);
+                    for (let decl of removableDeclarations){
+                        decl.remove();
+                    }
+                }
+            }
+        });
+    };
+}
+let UNITLESS_NUMBER = Symbol("unitless-number");
+function resolveUnit(input) {
+    let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input);
+    if (result) {
+        var ref;
+        return (ref = result[1]) !== null && ref !== void 0 ? ref : UNITLESS_NUMBER;
+    }
+    return null;
+}

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.defaultExtractor = defaultExtractor;
+var _featureFlagsJs = require("../featureFlags.js");
+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;
+    let variantGroupingEnabled = (0, _featureFlagsJs).flagEnabled(context.tailwindConfig, "variantGrouping");
+    let utility = 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'"\\$={]*/, 
+            ])), 
+        ]), 
+    ]);
+    yield regex.pattern([
+        // Variants
+        "((?=((",
+        regex.any([
+            regex.pattern([
+                /([^\s"'\[\\]+-)?\[[^\s"'\\]+\]/,
+                separator
+            ]),
+            regex.pattern([
+                /[^\s"'\[\\]+/,
+                separator
+            ]), 
+        ], true),
+        ")+))\\2)?",
+        // Important (optional)
+        /!?/,
+        variantGroupingEnabled ? regex.any([
+            // Or any of those things but grouped separated by commas
+            regex.pattern([
+                /\(/,
+                utility,
+                regex.zeroOrMore([
+                    /,/,
+                    utility
+                ]),
+                /\)/
+            ]),
+            // Arbitrary properties, constrained utilities, arbitrary values, etc…
+            utility, 
+        ]) : utility, 
+    ]);
+// 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
+ // {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+ // arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+ // Arbitrary properties
+ // {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/lib/lib/detectNesting.js

@@ -6,12 +6,27 @@ exports.default = _default;
 function _default(_context) {
     return (root, result)=>{
         let found = false;
+        root.walkAtRules("tailwind", (node)=>{
+            if (found) return false;
+            if (node.parent && node.parent.type !== "root") {
+                found = true;
+                node.warn(result, [
+                    "Nested @tailwind rules were detected, but are not supported.",
+                    "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+                    "Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy", 
+                ].join("\n"));
+                return false;
+            }
+        });
         root.walkRules((rule)=>{
             if (found) return false;
             rule.walkRules((nestedRule)=>{
                 found = true;
-                nestedRule.warn(result, // TODO: Improve this warning message
-                'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting');
+                nestedRule.warn(result, [
+                    "Nested CSS was detected, but CSS nesting has not been configured correctly.",
+                    "Please enable a CSS nesting plugin *before* Tailwind in your configuration.",
+                    "See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting", 
+                ].join("\n"));
                 return false;
             });
         });