tailwindcss 0.0.0-insiders.0ddc71e → 0.0.0-insiders.0de1f0c

package/README.md

@@ -12,15 +12,14 @@
   A utility-first CSS framework for rapidly building custom user interfaces.
 </p>
 
-
 <p align="center">
-    <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://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.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>
 </p>
 
-------
+---
 
 ## Documentation
 

package/lib/cli/build/plugin.js

@@ -167,17 +167,10 @@ 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 (false) {
-                content.push({
-                    file,
-                    extension: _path.default.extname(file).slice(1)
-                });
-            } else {
-                content.push({
-                    content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
-                    extension: _path.default.extname(file).slice(1)
-                });
-            }
+            content.push({
+                content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
+                extension: _path.default.extname(file).slice(1)
+            });
         }
         // Resolve raw content in the tailwind config
         let rawContent = this.config.content.files.filter((file)=>{
@@ -192,14 +185,14 @@ let state = {
         return content;
     },
     getContext ({ createContext , cliConfigPath , root , result , content  }) {
-        if (this.context) {
-            this.context.changedContent = this.changedContent.splice(0);
-            return this.context;
-        }
         _sharedState.env.DEBUG && console.time("Searching for config");
         var _findAtConfigPath1;
         let configPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : cliConfigPath;
         _sharedState.env.DEBUG && console.timeEnd("Searching for config");
+        if (this.context) {
+            this.context.changedContent = this.changedContent.splice(0);
+            return this.context;
+        }
         _sharedState.env.DEBUG && console.time("Loading config");
         let config = this.loadConfig(configPath, content);
         _sharedState.env.DEBUG && console.timeEnd("Loading config");
@@ -245,9 +238,9 @@ async function createProcessor(args, cliConfigPath) {
     let tailwindPlugin = ()=>{
         return {
             postcssPlugin: "tailwindcss",
-            Once (root, { result  }) {
+            async Once (root, { result  }) {
                 _sharedState.env.DEBUG && console.time("Compiling CSS");
-                (0, _processTailwindFeatures.default)(({ createContext  })=>{
+                await (0, _processTailwindFeatures.default)(({ createContext  })=>{
                     console.error();
                     console.error("Rebuilding...");
                     return ()=>{

package/lib/cli/build/watching.js

@@ -126,7 +126,7 @@ function createWatcher(args, { state , rebuild  }) {
     // This is very likely a chokidar bug but it's one we need to work around
     // We treat this as a change event and rebuild the CSS
     watcher.on("raw", (evt, filePath, meta)=>{
-        if (evt !== "rename") {
+        if (evt !== "rename" || filePath === null) {
             return;
         }
         let watchedPath = meta.watchedPath;

package/lib/cli.js

@@ -1,7 +1,3 @@
 #!/usr/bin/env node
 "use strict";
-if (false) {
-    module.exports = require("./oxide/cli");
-} else {
-    module.exports = require("./cli/index");
-}
+module.exports = require("./cli/index");

package/lib/corePluginList.js

@@ -32,6 +32,7 @@ const _default = [
     "lineClamp",
     "display",
     "aspectRatio",
+    "size",
     "height",
     "maxHeight",
     "minHeight",
@@ -98,6 +99,7 @@ const _default = [
     "textOverflow",
     "hyphens",
     "whitespace",
+    "textWrap",
     "wordBreak",
     "borderRadius",
     "borderWidth",
@@ -183,5 +185,7 @@ const _default = [
     "transitionDuration",
     "transitionTimingFunction",
     "willChange",
-    "content"
+    "contain",
+    "content",
+    "forcedColorAdjust"
 ];

package/lib/corePlugins.js

@@ -35,6 +35,7 @@ const _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 const _removeAlphaVariables = require("./util/removeAlphaVariables");
 const _featureFlags = require("./featureFlags");
 const _dataTypes = require("./util/dataTypes");
+const _setupContextUtils = require("./lib/setupContextUtils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -80,6 +81,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 let variantPlugins = {
+    childVariant: ({ addVariant  })=>{
+        addVariant("*", "& > *");
+    },
     pseudoElementVariants: ({ addVariant  })=>{
         addVariant("first-letter", "&::first-letter");
         addVariant("first-line", "&::first-line");
@@ -135,7 +139,7 @@ let variantPlugins = {
             return "&::after";
         });
     },
-    pseudoClassVariants: ({ addVariant , matchVariant , config  })=>{
+    pseudoClassVariants: ({ addVariant , matchVariant , config , prefix  })=>{
         let pseudoVariants = [
             // Positional
             [
@@ -216,17 +220,17 @@ let variantPlugins = {
         }
         let variants = {
             group: (_, { modifier  })=>modifier ? [
-                    `:merge(.group\\/${(0, _escapeClassName.default)(modifier)})`,
+                    `:merge(${prefix(".group")}\\/${(0, _escapeClassName.default)(modifier)})`,
                     " &"
                 ] : [
-                    `:merge(.group)`,
+                    `:merge(${prefix(".group")})`,
                     " &"
                 ],
             peer: (_, { modifier  })=>modifier ? [
-                    `:merge(.peer\\/${(0, _escapeClassName.default)(modifier)})`,
+                    `:merge(${prefix(".peer")}\\/${(0, _escapeClassName.default)(modifier)})`,
                     " ~ &"
                 ] : [
-                    `:merge(.peer)`,
+                    `:merge(${prefix(".peer")})`,
                     " ~ &"
                 ]
         };
@@ -255,20 +259,23 @@ let variantPlugins = {
                 // 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)
+                values: Object.fromEntries(pseudoVariants),
+                [_setupContextUtils.INTERNAL_FEATURES]: {
+                    respectPrefix: false
+                }
             });
         }
     },
     directionVariants: ({ addVariant  })=>{
-        addVariant("ltr", ':is([dir="ltr"] &)');
-        addVariant("rtl", ':is([dir="rtl"] &)');
+        addVariant("ltr", '&:where([dir="ltr"], [dir="ltr"] *)');
+        addVariant("rtl", '&:where([dir="rtl"], [dir="rtl"] *)');
     },
     reducedMotionVariants: ({ addVariant  })=>{
         addVariant("motion-safe", "@media (prefers-reduced-motion: no-preference)");
         addVariant("motion-reduce", "@media (prefers-reduced-motion: reduce)");
     },
     darkVariants: ({ config , addVariant  })=>{
-        let [mode, className = ".dark"] = [].concat(config("darkMode", "media"));
+        let [mode, selector = ".dark"] = [].concat(config("darkMode", "media"));
         if (mode === false) {
             mode = "media";
             _log.default.warn("darkmode-false", [
@@ -277,10 +284,48 @@ let variantPlugins = {
                 "https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration"
             ]);
         }
-        if (mode === "class") {
-            addVariant("dark", `:is(${className} &)`);
+        if (mode === "variant") {
+            let formats;
+            if (Array.isArray(selector)) {
+                formats = selector;
+            } else if (typeof selector === "function") {
+                formats = selector;
+            } else if (typeof selector === "string") {
+                formats = [
+                    selector
+                ];
+            }
+            // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+            // But this is an advanced enough use case that it's probably not necessary
+            if (Array.isArray(formats)) {
+                for (let format of formats){
+                    if (format === ".dark") {
+                        mode = false;
+                        _log.default.warn("darkmode-variant-without-selector", [
+                            "When using `variant` for `darkMode`, you must provide a selector.",
+                            'Example: `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    } else if (!format.includes("&")) {
+                        mode = false;
+                        _log.default.warn("darkmode-variant-without-ampersand", [
+                            "When using `variant` for `darkMode`, your selector must contain `&`.",
+                            'Example `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    }
+                }
+            }
+            selector = formats;
+        }
+        if (mode === "selector") {
+            // New preferred behavior
+            addVariant("dark", `&:where(${selector}, ${selector} *)`);
         } else if (mode === "media") {
             addVariant("dark", "@media (prefers-color-scheme: dark)");
+        } else if (mode === "variant") {
+            addVariant("dark", selector);
+        } else if (mode === "class") {
+            // Old behavior
+            addVariant("dark", `&:is(${selector} *)`);
         }
     },
     printVariant: ({ addVariant  })=>{
@@ -398,7 +443,7 @@ let variantPlugins = {
         matchVariant("supports", (value = "")=>{
             let check = (0, _dataTypes.normalize)(value);
             let isRaw = /^\w*\s*\(/.test(check);
-            // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+            // Chrome has a bug where `(condition1)or(condition2)` is not valid
             // But `(condition1) or (condition2)` is supported.
             check = isRaw ? check.replace(/\b(and|or|not)\b/g, " $1 ") : check;
             if (isRaw) {
@@ -415,6 +460,26 @@ let variantPlugins = {
             values: (_theme = theme("supports")) !== null && _theme !== void 0 ? _theme : {}
         });
     },
+    hasVariants: ({ matchVariant , prefix  })=>{
+        matchVariant("has", (value)=>`&:has(${(0, _dataTypes.normalize)(value)})`, {
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
+        });
+        matchVariant("group-has", (value, { modifier  })=>modifier ? `:merge(${prefix(".group")}\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) &` : `:merge(${prefix(".group")}):has(${(0, _dataTypes.normalize)(value)}) &`, {
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
+        });
+        matchVariant("peer-has", (value, { modifier  })=>modifier ? `:merge(${prefix(".peer")}\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) ~ &` : `:merge(${prefix(".peer")}):has(${(0, _dataTypes.normalize)(value)}) ~ &`, {
+            values: {},
+            [_setupContextUtils.INTERNAL_FEATURES]: {
+                respectPrefix: false
+            }
+        });
+    },
     ariaVariants: ({ matchVariant , theme  })=>{
         var _theme;
         matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalize)(value)}]`, {
@@ -450,6 +515,9 @@ let variantPlugins = {
     prefersContrastVariants: ({ addVariant  })=>{
         addVariant("contrast-more", "@media (prefers-contrast: more)");
         addVariant("contrast-less", "@media (prefers-contrast: less)");
+    },
+    forcedColorsVariants: ({ addVariant  })=>{
+        addVariant("forced-colors", "@media (forced-colors: active)");
     }
 };
 let cssTransformValue = [
@@ -735,7 +803,9 @@ let corePlugins = {
                 "gridColumnStart"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridColumnEnd: (0, _createUtilityPlugin.default)("gridColumnEnd", [
         [
             "col-end",
@@ -743,7 +813,9 @@ let corePlugins = {
                 "gridColumnEnd"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridRow: (0, _createUtilityPlugin.default)("gridRow", [
         [
             "row",
@@ -759,7 +831,9 @@ let corePlugins = {
                 "gridRowStart"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     gridRowEnd: (0, _createUtilityPlugin.default)("gridRowEnd", [
         [
             "row-end",
@@ -767,9 +841,17 @@ let corePlugins = {
                 "gridRowEnd"
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     float: ({ addUtilities  })=>{
         addUtilities({
+            ".float-start": {
+                float: "inline-start"
+            },
+            ".float-end": {
+                float: "inline-end"
+            },
             ".float-right": {
                 float: "right"
             },
@@ -783,6 +865,12 @@ let corePlugins = {
     },
     clear: ({ addUtilities  })=>{
         addUtilities({
+            ".clear-start": {
+                clear: "inline-start"
+            },
+            ".clear-end": {
+                clear: "inline-end"
+            },
             ".clear-left": {
                 clear: "left"
             },
@@ -966,6 +1054,15 @@ let corePlugins = {
             ]
         ]
     ]),
+    size: (0, _createUtilityPlugin.default)("size", [
+        [
+            "size",
+            [
+                "width",
+                "height"
+            ]
+        ]
+    ]),
     height: (0, _createUtilityPlugin.default)("height", [
         [
             "h",
@@ -1283,7 +1380,7 @@ let corePlugins = {
         });
     },
     animation: ({ matchUtilities , theme , config  })=>{
-        let prefixName = (name)=>`${config("prefix")}${(0, _escapeClassName.default)(name)}`;
+        let prefixName = (name)=>(0, _escapeClassName.default)(config("prefix") + name);
         var _theme;
         let keyframes = Object.fromEntries(Object.entries((_theme = theme("keyframes")) !== null && _theme !== void 0 ? _theme : {}).map(([key, value])=>{
             return [
@@ -1609,6 +1706,9 @@ let corePlugins = {
         addUtilities({
             ".appearance-none": {
                 appearance: "none"
+            },
+            ".appearance-auto": {
+                appearance: "auto"
             }
         });
     },
@@ -1939,15 +2039,6 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
-                    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",
@@ -1983,16 +2074,6 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
-                    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": {},
@@ -2293,6 +2374,22 @@ let corePlugins = {
             }
         });
     },
+    textWrap: ({ addUtilities  })=>{
+        addUtilities({
+            ".text-wrap": {
+                "text-wrap": "wrap"
+            },
+            ".text-nowrap": {
+                "text-wrap": "nowrap"
+            },
+            ".text-balance": {
+                "text-wrap": "balance"
+            },
+            ".text-pretty": {
+                "text-wrap": "pretty"
+            }
+        });
+    },
     wordBreak: ({ addUtilities  })=>{
         addUtilities({
             ".break-normal": {
@@ -3593,6 +3690,9 @@ let corePlugins = {
             ".mix-blend-luminosity": {
                 "mix-blend-mode": "luminosity"
             },
+            ".mix-blend-plus-darker": {
+                "mix-blend-mode": "plus-darker"
+            },
             ".mix-blend-plus-lighter": {
                 "mix-blend-mode": "plus-lighter"
             }
@@ -3606,7 +3706,7 @@ let corePlugins = {
             `var(--tw-shadow)`
         ].join(", ");
         return function({ matchUtilities , addDefaults , theme  }) {
-            addDefaults(" box-shadow", {
+            addDefaults("box-shadow", {
                 "--tw-ring-offset-shadow": "0 0 #0000",
                 "--tw-ring-shadow": "0 0 #0000",
                 "--tw-shadow": "0 0 #0000",
@@ -3829,7 +3929,7 @@ let corePlugins = {
         matchUtilities({
             blur: (value)=>{
                 return {
-                    "--tw-blur": `blur(${value})`,
+                    "--tw-blur": value.trim() === "" ? " " : `blur(${value})`,
                     "@defaults filter": {},
                     filter: cssFilterValue
                 };
@@ -3969,7 +4069,7 @@ let corePlugins = {
         matchUtilities({
             "backdrop-blur": (value)=>{
                 return {
-                    "--tw-backdrop-blur": `blur(${value})`,
+                    "--tw-backdrop-blur": value.trim() === "" ? " " : `blur(${value})`,
                     "@defaults backdrop-filter": {},
                     "backdrop-filter": cssBackdropFilterValue
                 };
@@ -4158,6 +4258,51 @@ let corePlugins = {
             ]
         ]
     ]),
+    contain: ({ addDefaults , addUtilities  })=>{
+        let cssContainValue = "var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)";
+        addDefaults("contain", {
+            "--tw-contain-size": " ",
+            "--tw-contain-layout": " ",
+            "--tw-contain-paint": " ",
+            "--tw-contain-style": " "
+        });
+        addUtilities({
+            ".contain-none": {
+                contain: "none"
+            },
+            ".contain-content": {
+                contain: "content"
+            },
+            ".contain-strict": {
+                contain: "strict"
+            },
+            ".contain-size": {
+                "@defaults contain": {},
+                "--tw-contain-size": "size",
+                contain: cssContainValue
+            },
+            ".contain-inline-size": {
+                "@defaults contain": {},
+                "--tw-contain-size": "inline-size",
+                contain: cssContainValue
+            },
+            ".contain-layout": {
+                "@defaults contain": {},
+                "--tw-contain-layout": "layout",
+                contain: cssContainValue
+            },
+            ".contain-paint": {
+                "@defaults contain": {},
+                "--tw-contain-paint": "paint",
+                contain: cssContainValue
+            },
+            ".contain-style": {
+                "@defaults contain": {},
+                "--tw-contain-style": "style",
+                contain: cssContainValue
+            }
+        });
+    },
     content: (0, _createUtilityPlugin.default)("content", [
         [
             "content",
@@ -4169,5 +4314,15 @@ let corePlugins = {
                 ]
             ]
         ]
-    ])
+    ]),
+    forcedColorAdjust: ({ addUtilities  })=>{
+        addUtilities({
+            ".forced-color-adjust-auto": {
+                "forced-color-adjust": "auto"
+            },
+            ".forced-color-adjust-none": {
+                "forced-color-adjust": "none"
+            }
+        });
+    }
 };

package/lib/css/preflight.css

@@ -24,16 +24,19 @@
 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.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   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-family: theme('fontFamily.sans', ui-sans-serif, system-ui, 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 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -99,8 +102,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -108,7 +113,9 @@ kbd,
 samp,
 pre {
   font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
-  font-size: 1em; /* 2 */
+  font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */
+  font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */
+  font-size: 1em; /* 4 */
 }
 
 /*
@@ -163,9 +170,12 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -186,9 +196,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -300,6 +310,13 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */

package/lib/featureFlags.js

@@ -29,12 +29,8 @@ function _interop_require_default(obj) {
 let defaults = {
     optimizeUniversalDefaults: false,
     generalizedModifiers: true,
-    get disableColorOpacityUtilitiesByDefault () {
-        return false;
-    },
-    get relativeContentPathsByDefault () {
-        return false;
-    }
+    disableColorOpacityUtilitiesByDefault: false,
+    relativeContentPathsByDefault: false
 };
 let featureFlags = {
     future: [