tailwindcss 0.0.0-insiders.ba2fd32 → 0.0.0-insiders.bbafc8e

package/lib/css/preflight.css

@@ -9,7 +9,7 @@
   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,
@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -309,7 +310,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

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,7 +13,7 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    optimizeUniversalDefaults: false
 };
 let featureFlags = {
     future: [],
@@ -28,9 +28,9 @@ function flagEnabled(config, flag) {
         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;
 }
@@ -39,8 +39,7 @@ function experimentalFlagsEnabled(config) {
         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,7 +47,7 @@ function issueFlagNotices(config) {
         return;
     }
     if (experimentalFlagsEnabled(config).length > 0) {
-        let changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
+        let changes = experimentalFlagsEnabled(config).map((s)=>_picocolors.default.yellow(s)
         ).join(', ');
         _log.default.warn('experimental-flags-enabled', [
             `You have enabled experimental features: ${changes}`,

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) {
@@ -18,8 +17,18 @@ module.exports = function tailwindcss(configOrPath) {
                 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');

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

@@ -14,7 +14,7 @@ let comparisonMap = {
 };
 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)) {
@@ -37,5 +37,18 @@ function collapseAdjacentRules() {
                 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);
     };
 }

package/lib/lib/collapseDuplicateDeclarations.js

@@ -8,6 +8,7 @@ function collapseDuplicateDeclarations() {
         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
@@ -17,13 +18,63 @@ function collapseDuplicateDeclarations() {
                     return;
                 }
                 if (seen.has(decl.prop)) {
-                    droppable.add(seen.get(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);
             });
-            for (let decl of droppable){
-                decl.remove();
+            // 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,44 @@
+"use strict";
+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;
+} // 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;
             });
         });

package/lib/lib/evaluateTailwindFunctions.js

@@ -7,6 +7,7 @@ var _dlv = _interopRequireDefault(require("dlv"));
 var _didyoumean = _interopRequireDefault(require("didyoumean"));
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
 function _interopRequireDefault(obj) {
@@ -42,7 +43,7 @@ function listKeys(obj) {
 function validatePath(config, path, defaultValue) {
     const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
-    const value = (0, _dlv).default(config.theme, pathString, defaultValue);
+    const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
         let error = `'${pathString}' does not exist in your theme config.`;
         const parentSegments = pathSegments.slice(0, -1);
@@ -112,11 +113,11 @@ function extractArgs(node, vNodes, functions) {
     let args = [
         ''
     ];
-    for (let vNode of vNodes){
-        if (vNode.type === 'div' && vNode.value === ',') {
+    for (let vNode1 of vNodes){
+        if (vNode1.type === 'div' && vNode1.value === ',') {
             args.push('');
         } else {
-            args[args.length - 1] += _postcssValueParser.default.stringify(vNode);
+            args[args.length - 1] += _postcssValueParser.default.stringify(vNode1);
         }
     }
     return args;
@@ -149,10 +150,13 @@ function _default({ tailwindConfig: config  }) {
         },
         screen: (node, screen)=>{
             screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
-            if (config.theme.screens[screen] === undefined) {
+            let screens = (0, _normalizeScreens).normalizeScreens(config.theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }
-            return (0, _buildMediaQuery).default(config.theme.screens[screen]);
+            return (0, _buildMediaQuery).default(screenDefinition);
         }
     };
     return (root)=>{