tailwindcss 0.0.0-insiders.9d83400 → 0.0.0-insiders.9dcd97a

package/lib/cli/build/plugin.js

@@ -237,14 +237,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');

package/lib/corePluginList.js

@@ -32,6 +32,7 @@ const _default = [
     "lineClamp",
     "display",
     "aspectRatio",
+    "size",
     "height",
     "maxHeight",
     "minHeight",
@@ -184,5 +185,6 @@ const _default = [
     "transitionDuration",
     "transitionTimingFunction",
     "willChange",
-    "content"
+    "content",
+    "forcedColorAdjust"
 ];

package/lib/corePlugins.js

@@ -82,6 +82,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');
@@ -265,15 +268,15 @@ let variantPlugins = {
         }
     },
     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', [
@@ -282,10 +285,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 })=>{
@@ -466,6 +507,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 = [
@@ -781,6 +825,12 @@ let corePlugins = {
     ]),
     float: ({ addUtilities })=>{
         addUtilities({
+            '.float-start': {
+                float: 'inline-start'
+            },
+            '.float-end': {
+                float: 'inline-end'
+            },
             '.float-right': {
                 float: 'right'
             },
@@ -794,6 +844,12 @@ let corePlugins = {
     },
     clear: ({ addUtilities })=>{
         addUtilities({
+            '.clear-start': {
+                clear: 'inline-start'
+            },
+            '.clear-end': {
+                clear: 'inline-end'
+            },
             '.clear-left': {
                 clear: 'left'
             },
@@ -977,6 +1033,15 @@ let corePlugins = {
             ]
         ]
     ]),
+    size: (0, _createUtilityPlugin.default)('size', [
+        [
+            'size',
+            [
+                'width',
+                'height'
+            ]
+        ]
+    ]),
     height: (0, _createUtilityPlugin.default)('height', [
         [
             'h',
@@ -1620,6 +1685,9 @@ let corePlugins = {
         addUtilities({
             '.appearance-none': {
                 appearance: 'none'
+            },
+            '.appearance-auto': {
+                appearance: 'auto'
             }
         });
     },
@@ -4196,5 +4264,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,6 +24,7 @@
 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,
@@ -35,6 +36,7 @@ html,
   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 */
 }
 
 /*
@@ -100,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,
@@ -109,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 */
 }
 
 /*

package/lib/lib/content.js

@@ -21,7 +21,6 @@ const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
 const _path = /*#__PURE__*/ _interop_require_default(require("path"));
 const _isglob = /*#__PURE__*/ _interop_require_default(require("is-glob"));
 const _fastglob = /*#__PURE__*/ _interop_require_default(require("fast-glob"));
-const _normalizepath = /*#__PURE__*/ _interop_require_default(require("normalize-path"));
 const _parseGlob = require("../util/parseGlob");
 const _sharedState = require("./sharedState");
 const _oxide = require("@tailwindcss/oxide");
@@ -30,6 +29,37 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+/*!
+ * Modified version of normalize-path, original license below
+ *
+ * normalize-path <https://github.com/jonschlinkert/normalize-path>
+ *
+ * Copyright (c) 2014-2018, Jon Schlinkert.
+ * Released under the MIT License.
+ */ function normalizePath(path) {
+    if (typeof path !== 'string') {
+        throw new TypeError('expected path to be a string');
+    }
+    if (path === '\\' || path === '/') return '/';
+    var len = path.length;
+    if (len <= 1) return path;
+    // ensure that win32 namespaces has two leading slashes, so that the path is
+    // handled properly by the win32 version of path.parse() after being normalized
+    // https://msdn.microsoft.com/library/windows/desktop/aa365247(v=vs.85).aspx#namespaces
+    var prefix = '';
+    if (len > 4 && path[3] === '\\') {
+        var ch = path[2];
+        if ((ch === '?' || ch === '.') && path.slice(0, 2) === '\\\\') {
+            path = path.slice(2);
+            prefix = '//';
+        }
+    }
+    // Modified part: instead of purely splitting on `\\` and `/`, we split on
+    // `/` and `\\` that is _not_ followed by any of the following characters: ()[]
+    // This is to ensure that we keep the escaping of brackets and parentheses
+    let segs = path.split(/[/\\]+(?![\(\)\[\]])/);
+    return prefix + segs.join('/');
+}
 /** @typedef {import('../../types/config.js').RawFile} RawFile */ /** @typedef {import('../../types/config.js').FilePath} FilePath */ /*
  * @param {import('tailwindcss').Config} tailwindConfig
  * @param {{skip:string[]}} options
@@ -59,7 +89,7 @@ function parseCandidateFiles(context, tailwindConfig) {
     });
     // Normalize the file globs
     files = files.filter((filePath)=>typeof filePath === 'string');
-    files = files.map(_normalizepath.default);
+    files = files.map(normalizePath);
     // Split into included and excluded globs
     let tasks = _fastglob.default.generateTasks(files);
     /** @type {ContentPath[]} */ let included = [];
@@ -86,6 +116,9 @@ function parseCandidateFiles(context, tailwindConfig) {
  * @param {boolean} ignore
  * @returns {ContentPath}
  */ function parseFilePath(filePath, ignore) {
+    // Escape special characters in the file path such as: ()[]
+    // But only if the special character isn't already escaped
+    filePath = filePath.replace(RegExp("(?<!\\\\)([\\[\\]\\(\\)])", "g"), '\\$1');
     let contentPath = {
         original: filePath,
         base: filePath,
@@ -107,7 +140,7 @@ function parseCandidateFiles(context, tailwindConfig) {
     // Afaik, this technically shouldn't be needed but there's probably
     // some internal, direct path matching with a normalized path in
     // a package which can't handle mixed directory separators
-    let base = (0, _normalizepath.default)(contentPath.base);
+    let base = normalizePath(contentPath.base);
     // If the user's file path contains any special characters (like parens) for instance fast-glob
     // is like "OOOH SHINY" and treats them as such. So we have to escape the base path to fix this
     base = _fastglob.default.escapePath(base);

package/lib/lib/defaultExtractor.js

@@ -82,12 +82,21 @@ function* buildRegExps(context) {
         // Utilities
         _regex.pattern([
             // Utility Name / Group Name
-            /-?(?:\w+)/,
+            _regex.any([
+                /-?(?:\w+)/,
+                // This is here to make sure @container supports everything that other utilities do
+                /@(?:\w+)/
+            ]),
             // Normal/Arbitrary values
             _regex.optional(_regex.any([
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s:]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s:\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
@@ -95,7 +104,12 @@ function* buildRegExps(context) {
                 ]),
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier

package/lib/lib/expandTailwindAtRules.js

@@ -285,6 +285,9 @@ function expandTailwindAtRules(context) {
             });
             root.append(cloned);
         }
+        var _root_source_end;
+        // TODO: Why is the root node having no source location for `end` possible?
+        root.source.end = (_root_source_end = root.source.end) !== null && _root_source_end !== void 0 ? _root_source_end : root.source.start;
         // If we've got a utility layer and no utilities are generated there's likely something wrong
         const hasUtilityVariants = variantNodes.some((node)=>{
             var _node_raws_tailwind;

package/lib/lib/generateRules.js

@@ -163,6 +163,9 @@ function applyImportant(matches, classCandidate) {
         return matches;
     }
     let result = [];
+    function isInKeyframes(rule) {
+        return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes';
+    }
     for (let [meta, rule] of matches){
         let container = _postcss.default.root({
             nodes: [
@@ -170,6 +173,11 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
+            // Declarations inside keyframes cannot be marked as important
+            // They will be ignored by the browser
+            if (isInKeyframes(r)) {
+                return;
+            }
             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));
@@ -813,6 +821,10 @@ function applyFinalFormat(match, { context, candidate }) {
     if (!isValid) {
         return null;
     }
+    // If all rules have been eliminated we can skip this candidate entirely
+    if (container.nodes.length === 0) {
+        return null;
+    }
     match[1] = container.nodes[0];
     return match;
 }

package/lib/lib/load-config.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "loadConfig", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    loadConfig: function() {
         return loadConfig;
+    },
+    useCustomJiti: function() {
+        return useCustomJiti;
     }
 });
 const _jiti = /*#__PURE__*/ _interop_require_default(require("jiti"));
@@ -16,6 +24,9 @@ function _interop_require_default(obj) {
     };
 }
 let jiti = null;
+function useCustomJiti(_jiti) {
+    jiti = _jiti();
+}
 function lazyJiti() {
     return jiti !== null && jiti !== void 0 ? jiti : jiti = (0, _jiti.default)(__filename, {
         interopDefault: true,

package/lib/lib/setupContextUtils.js

@@ -742,6 +742,7 @@ function resolvePlugins(context, root) {
     // TODO: This is a workaround for backwards compatibility, since custom variants
     // were historically sorted before screen/stackable variants.
     let beforeVariants = [
+        _corePlugins.variantPlugins['childVariant'],
         _corePlugins.variantPlugins['pseudoElementVariants'],
         _corePlugins.variantPlugins['pseudoClassVariants'],
         _corePlugins.variantPlugins['hasVariants'],
@@ -750,14 +751,31 @@ function resolvePlugins(context, root) {
     ];
     let afterVariants = [
         _corePlugins.variantPlugins['supportsVariants'],
-        _corePlugins.variantPlugins['directionVariants'],
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['prefersContrastVariants'],
-        _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['printVariant'],
         _corePlugins.variantPlugins['screenVariants'],
-        _corePlugins.variantPlugins['orientationVariants']
+        _corePlugins.variantPlugins['orientationVariants'],
+        _corePlugins.variantPlugins['directionVariants'],
+        _corePlugins.variantPlugins['darkVariants'],
+        _corePlugins.variantPlugins['forcedColorsVariants'],
+        _corePlugins.variantPlugins['printVariant']
     ];
+    // This is a compatibility fix for the pre 3.4 dark mode behavior
+    // `class` retains the old behavior, but `selector` keeps the new behavior
+    let isLegacyDarkMode = context.tailwindConfig.darkMode === 'class' || Array.isArray(context.tailwindConfig.darkMode) && context.tailwindConfig.darkMode[0] === 'class';
+    if (isLegacyDarkMode) {
+        afterVariants = [
+            _corePlugins.variantPlugins['supportsVariants'],
+            _corePlugins.variantPlugins['reducedMotionVariants'],
+            _corePlugins.variantPlugins['prefersContrastVariants'],
+            _corePlugins.variantPlugins['darkVariants'],
+            _corePlugins.variantPlugins['screenVariants'],
+            _corePlugins.variantPlugins['orientationVariants'],
+            _corePlugins.variantPlugins['directionVariants'],
+            _corePlugins.variantPlugins['forcedColorsVariants'],
+            _corePlugins.variantPlugins['printVariant']
+        ];
+    }
     return [
         ...corePluginList,
         ...beforeVariants,

package/lib/util/cloneNodes.js

@@ -1,4 +1,9 @@
-"use strict";
+/**
+ * @param {import('postcss').Container[]} nodes
+ * @param {any} source
+ * @param {any} raws
+ * @returns {import('postcss').Container[]}
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -10,25 +15,40 @@ Object.defineProperty(exports, "default", {
 });
 function cloneNodes(nodes, source = undefined, raws = undefined) {
     return nodes.map((node)=>{
-        var _node_raws_tailwind;
         let cloned = node.clone();
-        // We always want override the source map
-        // except when explicitly told not to
-        let shouldOverwriteSource = ((_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.preserveSource) !== true || !cloned.source;
-        if (source !== undefined && shouldOverwriteSource) {
-            cloned.source = source;
-            if ('walk' in cloned) {
-                cloned.walk((child)=>{
-                    child.source = source;
-                });
-            }
-        }
         if (raws !== undefined) {
             cloned.raws.tailwind = {
                 ...cloned.raws.tailwind,
                 ...raws
             };
         }
+        if (source !== undefined) {
+            traverse(cloned, (node)=>{
+                var _node_raws_tailwind;
+                // Do not traverse nodes that have opted
+                // to preserve their original source
+                let shouldPreserveSource = ((_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.preserveSource) === true && node.source;
+                if (shouldPreserveSource) {
+                    return false;
+                }
+                // Otherwise we can safely replace the source
+                // And continue traversing
+                node.source = source;
+            });
+        }
         return cloned;
     });
 }
+/**
+ * Traverse a tree of nodes and don't traverse children if the callback
+ * returns false. Ideally we'd use Container#walk instead of this
+ * function but it stops traversing siblings too.
+ *
+ * @param {import('postcss').Container} node
+ * @param {(node: import('postcss').Container) => boolean} onNode
+ */ function traverse(node, onNode) {
+    if (onNode(node) !== false) {
+        var _node_each;
+        (_node_each = node.each) === null || _node_each === void 0 ? void 0 : _node_each.call(node, (child)=>traverse(child, onNode));
+    }
+}

package/lib/util/dataTypes.js

@@ -115,7 +115,7 @@ function normalize(value, context = null, isRoot = true) {
 }
 /**
  * Add spaces around operators inside math functions
- * like calc() that do not follow an operator or '('.
+ * like calc() that do not follow an operator, '(', or `,`.
  *
  * @param {string} value
  * @returns {string}
@@ -141,7 +141,13 @@ function normalize(value, context = null, isRoot = true) {
         'keyboard-inset-bottom',
         'keyboard-inset-left',
         'keyboard-inset-width',
-        'keyboard-inset-height'
+        'keyboard-inset-height',
+        'radial-gradient',
+        'linear-gradient',
+        'conic-gradient',
+        'repeating-radial-gradient',
+        'repeating-linear-gradient',
+        'repeating-conic-gradient'
     ];
     return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         let result = '';
@@ -187,6 +193,10 @@ function normalize(value, context = null, isRoot = true) {
                 result += consumeUntil([
                     ')'
                 ]);
+            } else if (peek('[')) {
+                result += consumeUntil([
+                    ']'
+                ]);
             } else if ([
                 '+',
                 '-',
@@ -197,7 +207,8 @@ function normalize(value, context = null, isRoot = true) {
                 '+',
                 '-',
                 '*',
-                '/'
+                '/',
+                ','
             ].includes(lastChar())) {
                 result += ` ${char} `;
             } else {

package/lib/util/pluginUtils.js

@@ -91,6 +91,19 @@ function isArbitraryValue(input) {
 }
 function splitUtilityModifier(modifier) {
     let slashIdx = modifier.lastIndexOf('/');
+    // If the `/` is inside an arbitrary, we want to find the previous one if any
+    // This logic probably isn't perfect but it should work for most cases
+    let arbitraryStartIdx = modifier.lastIndexOf('[', slashIdx);
+    let arbitraryEndIdx = modifier.indexOf(']', slashIdx);
+    let isNextToArbitrary = modifier[slashIdx - 1] === ']' || modifier[slashIdx + 1] === '[';
+    // Backtrack to the previous `/` if the one we found was inside an arbitrary
+    if (!isNextToArbitrary) {
+        if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+            if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+                slashIdx = modifier.lastIndexOf('/', arbitraryStartIdx);
+            }
+        }
+    }
     if (slashIdx === -1 || slashIdx === modifier.length - 1) {
         return [
             modifier,

package/lib/util/pseudoElements.js

@@ -114,6 +114,9 @@ let elementProperties = {
         'terminal',
         'jumpable'
     ],
+    ':where': [],
+    ':is': [],
+    ':has': [],
     // The default value is used when the pseudo-element is not recognized
     // Because it's not recognized, we don't know if it's terminal or not
     // So we assume it can be moved AND can have user-action pseudo classes attached to it