tailwindcss 0.0.0-insiders.c834da4 → 0.0.0-insiders.c8bf2d4

package/lib/corePlugins.js

@@ -15,6 +15,7 @@ _export(exports, {
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireWildcard(require("path"));
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _sharedState = require("./lib/sharedState");
 const _createUtilityPlugin = /*#__PURE__*/ _interopRequireDefault(require("./util/createUtilityPlugin"));
 const _buildMediaQuery = /*#__PURE__*/ _interopRequireDefault(require("./util/buildMediaQuery"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("./util/escapeClassName"));
@@ -212,14 +213,14 @@ let variantPlugins = {
         }
         let variants = {
             group: (_, { modifier  })=>modifier ? [
-                    `:merge(.group\\/${modifier})`,
+                    `:merge(.group\\/${(0, _escapeClassName.default)(modifier)})`,
                     " &"
                 ] : [
                     `:merge(.group)`,
                     " &"
                 ],
             peer: (_, { modifier  })=>modifier ? [
-                    `:merge(.peer\\/${modifier})`,
+                    `:merge(.peer\\/${(0, _escapeClassName.default)(modifier)})`,
                     " ~ &"
                 ] : [
                     `:merge(.peer)`,
@@ -231,7 +232,25 @@ let variantPlugins = {
                 let result = (0, _dataTypes.normalize)(typeof value === "function" ? value(extra) : value);
                 if (!result.includes("&")) result = "&" + result;
                 let [a, b] = fn("", extra);
-                return result.replace(/&(\S+)?/g, (_, pseudo = "")=>a + pseudo + b);
+                let start = null;
+                let end = null;
+                let quotes = 0;
+                for(let i = 0; i < result.length; ++i){
+                    let c = result[i];
+                    if (c === "&") {
+                        start = i;
+                    } else if (c === "'" || c === '"') {
+                        quotes += 1;
+                    } else if (start !== null && c === " " && !quotes) {
+                        end = i;
+                    }
+                }
+                if (start !== null && end === null) {
+                    end = result.length;
+                }
+                // Basically this but can handle quotes:
+                // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+                return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end);
             }, {
                 values: Object.fromEntries(pseudoVariants)
             });
@@ -650,6 +669,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "start",
+                [
+                    "inset-inline-start"
+                ]
+            ],
+            [
+                "end",
+                [
+                    "inset-inline-end"
+                ]
+            ],
             [
                 "top",
                 [
@@ -802,6 +833,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ms",
+                [
+                    "margin-inline-start"
+                ]
+            ],
+            [
+                "me",
+                [
+                    "margin-inline-end"
+                ]
+            ],
             [
                 "mt",
                 [
@@ -1010,6 +1053,16 @@ let corePlugins = {
             }
         });
     },
+    captionSide: ({ addUtilities  })=>{
+        addUtilities({
+            ".caption-top": {
+                "caption-side": "top"
+            },
+            ".caption-bottom": {
+                "caption-side": "bottom"
+            }
+        });
+    },
     borderCollapse: ({ addUtilities  })=>{
         addUtilities({
             ".border-collapse": {
@@ -1416,6 +1469,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ms",
+                [
+                    "scroll-margin-inline-start"
+                ]
+            ],
+            [
+                "scroll-me",
+                [
+                    "scroll-margin-inline-end"
+                ]
+            ],
             [
                 "scroll-mt",
                 [
@@ -1468,6 +1533,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ps",
+                [
+                    "scroll-padding-inline-start"
+                ]
+            ],
+            [
+                "scroll-pe",
+                [
+                    "scroll-padding-inline-end"
+                ]
+            ],
             [
                 "scroll-pt",
                 [
@@ -1772,6 +1849,9 @@ let corePlugins = {
     },
     justifyContent: ({ addUtilities  })=>{
         addUtilities({
+            ".justify-normal": {
+                "justify-content": "normal"
+            },
             ".justify-start": {
                 "justify-content": "flex-start"
             },
@@ -1789,6 +1869,9 @@ let corePlugins = {
             },
             ".justify-evenly": {
                 "justify-content": "space-evenly"
+            },
+            ".justify-stretch": {
+                "justify-content": "stretch"
             }
         });
     },
@@ -1834,6 +1917,15 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "--tw-space-x-reverse": "0",
+                            "margin-inline-end": `calc(${value} * var(--tw-space-x-reverse))`,
+                            "margin-inline-start": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "--tw-space-x-reverse": "0",
@@ -1869,6 +1961,16 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "@defaults border-width": {},
+                            "--tw-divide-x-reverse": "0",
+                            "border-inline-end-width": `calc(${value} * var(--tw-divide-x-reverse))`,
+                            "border-inline-start-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "@defaults border-width": {},
@@ -2134,6 +2236,19 @@ let corePlugins = {
             }
         });
     },
+    hyphens: ({ addUtilities  })=>{
+        addUtilities({
+            ".hyphens-none": {
+                hyphens: "none"
+            },
+            ".hyphens-manual": {
+                hyphens: "manual"
+            },
+            ".hyphens-auto": {
+                hyphens: "auto"
+            }
+        });
+    },
     whitespace: ({ addUtilities  })=>{
         addUtilities({
             ".whitespace-normal": {
@@ -2178,6 +2293,20 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-s",
+                [
+                    "border-start-start-radius",
+                    "border-end-start-radius"
+                ]
+            ],
+            [
+                "rounded-e",
+                [
+                    "border-start-end-radius",
+                    "border-end-end-radius"
+                ]
+            ],
             [
                 "rounded-t",
                 [
@@ -2208,6 +2337,30 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-ss",
+                [
+                    "border-start-start-radius"
+                ]
+            ],
+            [
+                "rounded-se",
+                [
+                    "border-start-end-radius"
+                ]
+            ],
+            [
+                "rounded-ee",
+                [
+                    "border-end-end-radius"
+                ]
+            ],
+            [
+                "rounded-es",
+                [
+                    "border-end-start-radius"
+                ]
+            ],
             [
                 "rounded-tl",
                 [
@@ -2270,6 +2423,26 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "border-s",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-start-width"
+                ]
+            ],
+            [
+                "border-e",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-end-width"
+                ]
+            ],
             [
                 "border-t",
                 [
@@ -2401,6 +2574,30 @@ let corePlugins = {
             ]
         });
         matchUtilities({
+            "border-s": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-start-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-start-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
+            "border-e": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-end-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-end-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
             "border-t": (value)=>{
                 if (!corePlugins("borderOpacity")) {
                     return {
@@ -2756,6 +2953,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ps",
+                [
+                    "padding-inline-start"
+                ]
+            ],
+            [
+                "pe",
+                [
+                    "padding-inline-end"
+                ]
+            ],
             [
                 "pt",
                 [
@@ -2853,11 +3062,14 @@ let corePlugins = {
                 let [families, options = {}] = Array.isArray(value) && (0, _isPlainObject.default)(value[1]) ? value : [
                     value
                 ];
-                let { fontFeatureSettings  } = options;
+                let { fontFeatureSettings , fontVariationSettings  } = options;
                 return {
                     "font-family": Array.isArray(families) ? families.join(", ") : families,
                     ...fontFeatureSettings === undefined ? {} : {
                         "font-feature-settings": fontFeatureSettings
+                    },
+                    ...fontVariationSettings === undefined ? {} : {
+                        "font-variation-settings": fontVariationSettings
                     }
                 };
             }

package/lib/css/preflight.css

@@ -23,6 +23,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -32,6 +33,7 @@ html {
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+  font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
 }
 
 /*

package/lib/featureFlags.js

@@ -15,6 +15,7 @@ _export(exports, {
 });
 const _picocolors = /*#__PURE__*/ _interopRequireDefault(require("picocolors"));
 const _log = /*#__PURE__*/ _interopRequireDefault(require("./util/log"));
+const _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -22,7 +23,10 @@ function _interopRequireDefault(obj) {
 }
 let defaults = {
     optimizeUniversalDefaults: false,
-    generalizedModifiers: true
+    generalizedModifiers: true,
+    get disableColorOpacityUtilitiesByDefault () {
+        return _sharedState.env.OXIDE;
+    }
 };
 let featureFlags = {
     future: [

package/lib/index.js

@@ -1,48 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _setupTrackingContext = /*#__PURE__*/ _interopRequireDefault(require("./lib/setupTrackingContext"));
-const _processTailwindFeatures = /*#__PURE__*/ _interopRequireDefault(require("./processTailwindFeatures"));
-const _sharedState = require("./lib/sharedState");
-const _findAtConfigPath = require("./lib/findAtConfigPath");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+if (process.env.OXIDE) {
+    module.exports = require("./oxide/postcss-plugin");
+} else {
+    module.exports = require("./plugin");
 }
-module.exports = function tailwindcss(configOrPath) {
-    return {
-        postcssPlugin: "tailwindcss",
-        plugins: [
-            _sharedState.env.DEBUG && function(root) {
-                console.log("\n");
-                console.time("JIT TOTAL");
-                return root;
-            },
-            function(root, result) {
-                var _findAtConfigPath1;
-                // Use the path for the `@config` directive if it exists, otherwise use the
-                // path for the file being processed
-                configOrPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : configOrPath;
-                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");
-                return root;
-            }
-        ].filter(Boolean)
-    };
-};
-module.exports.postcss = true;

package/lib/lib/content.js

@@ -135,43 +135,43 @@ function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
             content: raw,
             extension
         }));
-    for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)){
-        let content = _fs.default.readFileSync(changedFile, "utf8");
+    let [changedFiles, mTimesToCommit] = resolveChangedFiles(candidateFiles, fileModifiedMap);
+    for (let changedFile of changedFiles){
         let extension = _path.default.extname(changedFile).slice(1);
         changedContent.push({
-            content,
+            file: changedFile,
             extension
         });
     }
-    return changedContent;
+    return [
+        changedContent,
+        mTimesToCommit
+    ];
 }
 /**
  *
  * @param {ContentPath[]} candidateFiles
  * @param {Map<string, number>} fileModifiedMap
- * @returns {Set<string>}
+ * @returns {[Set<string>, Map<string, number>]}
  */ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     let paths = candidateFiles.map((contentPath)=>contentPath.pattern);
+    let mTimesToCommit = new Map();
     let changedFiles = new Set();
     _sharedState.env.DEBUG && console.time("Finding changed files");
     let files = _fastGlob.default.sync(paths, {
         absolute: true
     });
     for (let file of files){
-        let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity;
+        let prevModified = fileModifiedMap.get(file) || -Infinity;
         let modified = _fs.default.statSync(file).mtimeMs;
-        // This check is intentionally >= because we track the last modified time of context dependencies
-        // earier in the process and we want to make sure we don't miss any changes that happen
-        // when a context dependency is also a content dependency
-        // Ideally, we'd do all this tracking at one time but that is a larger refactor
-        // than we want to commit to right now, so this is a decent compromise.
-        // This should be sufficient because file modification times will be off by at least
-        // 1ms (the precision of fstat in Node) in most cases if they exist and were changed.
-        if (modified >= prevModified) {
+        if (modified > prevModified) {
             changedFiles.add(file);
-            fileModifiedMap.set(file, modified);
+            mTimesToCommit.set(file, modified);
         }
     }
     _sharedState.env.DEBUG && console.timeEnd("Finding changed files");
-    return changedFiles;
+    return [
+        changedFiles,
+        mTimesToCommit
+    ];
 }

package/lib/lib/defaultExtractor.js

@@ -71,8 +71,13 @@ function* buildRegExps(context) {
         _regex.escape(context.tailwindConfig.prefix)
     ])) : "";
     let utility = _regex.any([
-        // Arbitrary properties
-        /\[[^\s:'"`]+:[^\s]+\]/,
+        // Arbitrary properties (without square brackets)
+        /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+        // Arbitrary properties with balanced square brackets
+        // This is a targeted fix to continue to allow theme()
+        // with square brackets to work in arbitrary properties
+        // while fixing a problem with the regex matching too much
+        /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
         // Utilities
         _regex.pattern([
             // Utility Name / Group Name

package/lib/lib/detectNesting.js

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "default", {
     enumerable: true,
     get: ()=>_default
 });
+function isRoot(node) {
+    return node.type === "root";
+}
+function isAtLayer(node) {
+    return node.type === "atrule" && node.name === "layer";
+}
 function _default(_context) {
     return (root, result)=>{
         let found = false;
         root.walkAtRules("tailwind", (node)=>{
             if (found) return false;
-            if (node.parent && node.parent.type !== "root") {
+            if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
                 found = true;
                 node.warn(result, [
                     "Nested @tailwind rules were detected, but are not supported.",

package/lib/lib/expandTailwindAtRules.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "default", {
     enumerable: true,
     get: ()=>expandTailwindAtRules
 });
+const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _quickLru = /*#__PURE__*/ _interopRequireDefault(require("quick-lru"));
 const _sharedState = /*#__PURE__*/ _interopRequireWildcard(require("./sharedState"));
 const _generateRules = require("./generateRules");
@@ -142,24 +143,48 @@ function expandTailwindAtRules(context) {
         if (Object.values(layerNodes).every((n)=>n === null)) {
             return root;
         }
+        var _context_candidates;
         // ---
         // Find potential rules in changed files
         let candidates = new Set([
+            ...(_context_candidates = context.candidates) !== null && _context_candidates !== void 0 ? _context_candidates : [],
             _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);
+        if (env.OXIDE) {
+            // TODO: Pass through or implement `extractor`
+            for (let candidate of require("@tailwindcss/oxide").parseCandidateStringsFromFiles(context.changedContent)){
+                candidates.add(candidate);
+            }
+        // for (let { file, content, extension } of context.changedContent) {
+        //   let transformer = getTransformer(context.tailwindConfig, extension)
+        //   let extractor = getExtractor(context, extension)
+        //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
+        // }
+        } else {
+            for (let { file , content , extension  } of context.changedContent){
+                let transformer = getTransformer(context.tailwindConfig, extension);
+                let extractor = getExtractor(context, extension);
+                content = file ? _fs.default.readFileSync(file, "utf8") : content;
+                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");
-        (0, _generateRules.generateRules)(candidates, context);
+        env.DEBUG && console.time("Sorting candidates");
+        let sortedCandidates = env.OXIDE ? candidates : new Set([
+            ...candidates
+        ].sort((a, z)=>{
+            if (a === z) return 0;
+            if (a < z) return -1;
+            return 1;
+        }));
+        env.DEBUG && console.timeEnd("Sorting candidates");
+        (0, _generateRules.generateRules)(sortedCandidates, 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");