tailwindcss 0.0.0-insiders.b3d8464 → 0.0.0-insiders.b42e7d9

package/README.md

@@ -14,7 +14,7 @@
 
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/nodejs.yml?branch=master" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci-stable.yml?branch=master" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>

package/lib/cli/build/plugin.js

@@ -18,7 +18,7 @@ const _options = /*#__PURE__*/ _interopRequireDefault(require("postcss-load-conf
 const _processTailwindFeatures = /*#__PURE__*/ _interopRequireDefault(require("../../processTailwindFeatures"));
 const _deps = require("./deps");
 const _utils = require("./utils");
-const _shared = require("../shared");
+const _sharedState = require("../../lib/sharedState");
 const _resolveConfigJs = /*#__PURE__*/ _interopRequireDefault(require("../../../resolveConfig.js"));
 const _getModuleDependenciesJs = /*#__PURE__*/ _interopRequireDefault(require("../../lib/getModuleDependencies.js"));
 const _contentJs = require("../../lib/content.js");
@@ -143,7 +143,7 @@ let state = {
         return config;
     },
     refreshConfigDependencies (configPath) {
-        _shared.env.DEBUG && console.time("Module dependencies");
+        _sharedState.env.DEBUG && console.time("Module dependencies");
         for (let file of this.configDependencies){
             delete require.cache[require.resolve(file)];
         }
@@ -153,7 +153,7 @@ let state = {
                 this.configDependencies.add(dependency);
             }
         }
-        _shared.env.DEBUG && console.timeEnd("Module dependencies");
+        _sharedState.env.DEBUG && console.timeEnd("Module dependencies");
     },
     readContentPaths () {
         let content = [];
@@ -161,7 +161,7 @@ let state = {
         // TODO: When we make the postcss plugin async-capable this can become async
         let files = _fastGlob.default.sync(this.contentPatterns.all);
         for (let file of files){
-            if (_shared.env.OXIDE) {
+            if (_sharedState.env.OXIDE) {
                 content.push({
                     file,
                     extension: _path.default.extname(file).slice(1)
@@ -190,26 +190,26 @@ let state = {
             this.context.changedContent = this.changedContent.splice(0);
             return this.context;
         }
-        _shared.env.DEBUG && console.time("Searching for config");
+        _sharedState.env.DEBUG && console.time("Searching for config");
         var _findAtConfigPath;
         let configPath = (_findAtConfigPath = (0, _findAtConfigPathJs.findAtConfigPath)(root, result)) !== null && _findAtConfigPath !== void 0 ? _findAtConfigPath : cliConfigPath;
-        _shared.env.DEBUG && console.timeEnd("Searching for config");
-        _shared.env.DEBUG && console.time("Loading config");
+        _sharedState.env.DEBUG && console.timeEnd("Searching for config");
+        _sharedState.env.DEBUG && console.time("Loading config");
         let config = this.loadConfig(configPath, content);
-        _shared.env.DEBUG && console.timeEnd("Loading config");
-        _shared.env.DEBUG && console.time("Creating context");
+        _sharedState.env.DEBUG && console.timeEnd("Loading config");
+        _sharedState.env.DEBUG && console.time("Creating context");
         this.context = createContext(config, []);
         Object.assign(this.context, {
             userConfigPath: configPath
         });
-        _shared.env.DEBUG && console.timeEnd("Creating context");
-        _shared.env.DEBUG && console.time("Resolving content paths");
+        _sharedState.env.DEBUG && console.timeEnd("Creating context");
+        _sharedState.env.DEBUG && console.time("Resolving content paths");
         this.refreshContentPaths();
-        _shared.env.DEBUG && console.timeEnd("Resolving content paths");
+        _sharedState.env.DEBUG && console.timeEnd("Resolving content paths");
         if (this.watcher) {
-            _shared.env.DEBUG && console.time("Watch new files");
+            _sharedState.env.DEBUG && console.time("Watch new files");
             this.watcher.refreshWatchedFiles();
-            _shared.env.DEBUG && console.timeEnd("Watch new files");
+            _sharedState.env.DEBUG && console.timeEnd("Watch new files");
         }
         for (let file of this.readContentPaths()){
             this.context.changedContent.push(file);
@@ -240,7 +240,7 @@ async function createProcessor(args, cliConfigPath) {
         return {
             postcssPlugin: "tailwindcss",
             Once (root, { result  }) {
-                _shared.env.DEBUG && console.time("Compiling CSS");
+                _sharedState.env.DEBUG && console.time("Compiling CSS");
                 (0, _processTailwindFeatures.default)(({ createContext  })=>{
                     console.error();
                     console.error("Rebuilding...");
@@ -254,7 +254,7 @@ async function createProcessor(args, cliConfigPath) {
                         });
                     };
                 })(root, result);
-                _shared.env.DEBUG && console.timeEnd("Compiling CSS");
+                _sharedState.env.DEBUG && console.timeEnd("Compiling CSS");
             }
         };
     };
@@ -291,17 +291,17 @@ async function createProcessor(args, cliConfigPath) {
             if (!state.watcher) {
                 return result;
             }
-            _shared.env.DEBUG && console.time("Recording PostCSS dependencies");
+            _sharedState.env.DEBUG && console.time("Recording PostCSS dependencies");
             for (let message of result.messages){
                 if (message.type === "dependency") {
                     state.contextDependencies.add(message.file);
                 }
             }
-            _shared.env.DEBUG && console.timeEnd("Recording PostCSS dependencies");
+            _sharedState.env.DEBUG && console.timeEnd("Recording PostCSS dependencies");
             // TODO: This needs to be in a different spot
-            _shared.env.DEBUG && console.time("Watch new files");
+            _sharedState.env.DEBUG && console.time("Watch new files");
             state.watcher.refreshWatchedFiles();
-            _shared.env.DEBUG && console.timeEnd("Watch new files");
+            _sharedState.env.DEBUG && console.timeEnd("Watch new files");
             return result;
         }).then((result)=>{
             if (!output) {

package/lib/corePluginList.js

@@ -40,6 +40,7 @@ const _default = [
     "flexGrow",
     "flexBasis",
     "tableLayout",
+    "captionSide",
     "borderCollapse",
     "borderSpacing",
     "transformOrigin",
@@ -91,6 +92,7 @@ const _default = [
     "overscrollBehavior",
     "scrollBehavior",
     "textOverflow",
+    "hyphens",
     "whitespace",
     "wordBreak",
     "borderRadius",

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"));
@@ -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,13 @@ function _interopRequireDefault(obj) {
 }
 let defaults = {
     optimizeUniversalDefaults: false,
-    generalizedModifiers: true
+    generalizedModifiers: true,
+    get disableColorOpacityUtilitiesByDefault () {
+        return _sharedState.env.OXIDE;
+    },
+    get relativeContentPathsByDefault () {
+        return _sharedState.env.OXIDE;
+    }
 };
 let featureFlags = {
     future: [

package/lib/lib/expandTailwindAtRules.js

@@ -13,7 +13,6 @@ const _generateRules = require("./generateRules");
 const _log = /*#__PURE__*/ _interopRequireDefault(require("../util/log"));
 const _cloneNodes = /*#__PURE__*/ _interopRequireDefault(require("../util/cloneNodes"));
 const _defaultExtractor = require("./defaultExtractor");
-const _oxide = /*#__PURE__*/ _interopRequireDefault(require("@tailwindcss/oxide"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -155,7 +154,7 @@ function expandTailwindAtRules(context) {
         env.DEBUG && console.time("Reading changed files");
         if (env.OXIDE) {
             // TODO: Pass through or implement `extractor`
-            for (let candidate of _oxide.default.parseCandidateStringsFromFiles(context.changedContent)){
+            for (let candidate of require("@tailwindcss/oxide").parseCandidateStringsFromFiles(context.changedContent)){
                 candidates.add(candidate);
             }
         // for (let { file, content, extension } of context.changedContent) {
@@ -176,16 +175,14 @@ function expandTailwindAtRules(context) {
         // Generate the actual CSS
         let classCacheCount = context.classCache.size;
         env.DEBUG && console.time("Generate rules");
-        // TODO: Sorting is _probably_ slow, but right now it can guarantee the same order. Eventually
-        // we will be able to get rid of this.
         env.DEBUG && console.time("Sorting candidates");
-        let sortedCandidates = typeof process !== "undefined" && process.env.JEST_WORKER_ID ? new Set([
+        let sortedCandidates = env.OXIDE ? candidates : new Set([
             ...candidates
         ].sort((a, z)=>{
             if (a === z) return 0;
             if (a < z) return -1;
             return 1;
-        })) : candidates;
+        }));
         env.DEBUG && console.timeEnd("Sorting candidates");
         (0, _generateRules.generateRules)(sortedCandidates, context);
         env.DEBUG && console.timeEnd("Generate rules");

package/lib/lib/generateRules.js

@@ -162,12 +162,12 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
-            r.selector = (0, _pluginUtils.updateAllClasses)((0, _pluginUtils.filterSelectorsForClass)(r.selector, classCandidate), (className)=>{
-                if (className === classCandidate) {
-                    return `!${className}`;
-                }
-                return className;
-            });
+            let ast = (0, _postcssSelectorParser.default)().astSync(r.selector);
+            // Remove extraneous selectors that do not include the base candidate
+            ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));
+            // Update all instances of the base candidate to include the important marker
+            (0, _pluginUtils.updateAllClasses)(ast, (className)=>className === classCandidate ? `!${className}` : className);
+            r.selector = ast.toString();
             r.walkDecls((d)=>d.important = true);
         });
         result.push([
@@ -198,10 +198,16 @@ function applyVariant(variant, matches, context) {
     };
     // Retrieve "modifier"
     {
-        let match = /(.*)\/(.*)$/g.exec(variant);
-        if (match) {
-            variant = match[1];
-            args.modifier = match[2];
+        let [baseVariant, ...modifiers] = (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(variant, "/");
+        // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
+        // In this case 1/10 is a value but /20 is a modifier
+        if (modifiers.length > 1) {
+            baseVariant = baseVariant + "/" + modifiers.slice(0, -1).join("/");
+            modifiers = modifiers.slice(-1);
+        }
+        if (modifiers.length && !context.variantMap.has(variant)) {
+            variant = baseVariant;
+            args.modifier = modifiers[0];
             if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
                 return [];
             }
@@ -216,9 +222,9 @@ function applyVariant(variant, matches, context) {
         // But we don't want:
         //   @-[200px]        (`-` is incorrect)
         //   group[:hover]    (`-` is missing)
-        let match1 = /(.)(-?)\[(.*)\]/g.exec(variant);
-        if (match1) {
-            let [, char, seperator, value] = match1;
+        let match = /(.)(-?)\[(.*)\]/g.exec(variant);
+        if (match) {
+            let [, char, seperator, value] = match;
             // @-[200px] case
             if (char === "@" && seperator === "-") return [];
             // group[:hover] case
@@ -229,18 +235,21 @@ function applyVariant(variant, matches, context) {
     }
     // Register arbitrary variants
     if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+        let sort = context.offsets.recordVariant(variant);
         let selector = (0, _dataTypes.normalize)(variant.slice(1, -1));
-        if (!(0, _setupContextUtils.isValidVariantFormatString)(selector)) {
+        let selectors = (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(selector, ",");
+        // We do not support multiple selectors for arbitrary variants
+        if (selectors.length > 1) {
             return [];
         }
-        let fn = (0, _setupContextUtils.parseVariant)(selector);
-        let sort = context.offsets.recordVariant(variant);
-        context.variantMap.set(variant, [
-            [
-                sort,
-                fn
-            ]
-        ]);
+        if (!selectors.every(_setupContextUtils.isValidVariantFormatString)) {
+            return [];
+        }
+        let records = selectors.map((sel, idx)=>[
+                context.offsets.applyParallelOffset(sort, idx),
+                (0, _setupContextUtils.parseVariant)(sel.trim())
+            ]);
+        context.variantMap.set(variant, records);
     }
     if (context.variantMap.has(variant)) {
         let isArbitraryVariant = isArbitraryValue(variant);

package/lib/lib/offsets.js

@@ -167,6 +167,11 @@ class Offsets {
         if (a.layer !== b.layer) {
             return this.layerPositions[a.layer] - this.layerPositions[b.layer];
         }
+        // When sorting the `variants` layer, we need to sort based on the parent layer as well within
+        // this variants layer.
+        if (a.parentLayer !== b.parentLayer) {
+            return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer];
+        }
         // Sort based on the sorting function
         for (let aOptions of a.options){
             for (let bOptions of b.options){