tailwindcss 0.0.0-insiders.fb796cd → 0.0.0-insiders.fbbba6f

package/lib/corePlugins.js

@@ -2740,30 +2740,63 @@ let corePlugins = {
                     "any"
                 ]
             };
+            let positionOptions = {
+                values: theme("gradientColorStopPositions"),
+                type: [
+                    "length",
+                    "percentage"
+                ]
+            };
             matchUtilities({
                 from: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-from": (0, _toColorValue.default)(value, "from"),
-                        "--tw-gradient-to": transparentToValue,
+                        "--tw-gradient-from": `${(0, _toColorValue.default)(value, "from")} var(--tw-gradient-from-position)`,
+                        "--tw-gradient-from-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-from-position)`,
+                        "--tw-gradient-to-position": " ",
                         "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                from: (value)=>{
+                    return {
+                        "--tw-gradient-from-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 via: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-to": transparentToValue,
-                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")}, var(--tw-gradient-to)`
+                        "--tw-gradient-via-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " ",
+                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")} var(--tw-gradient-via-position), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                via: (value)=>{
+                    return {
+                        "--tw-gradient-via-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 to: (value)=>({
-                        "--tw-gradient-to": (0, _toColorValue.default)(value, "to")
+                        "--tw-gradient-to": `${(0, _toColorValue.default)(value, "to")} var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " "
                     })
             }, options);
+            matchUtilities({
+                to: (value)=>{
+                    return {
+                        "--tw-gradient-to-position": value
+                    };
+                }
+            }, positionOptions);
         };
     })(),
     boxDecorationBreak: ({ addUtilities  })=>{

package/lib/lib/expandApplyAtRules.js

@@ -11,6 +11,7 @@ const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("pos
 const _generateRules = require("./generateRules");
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _applyImportantSelector = require("../util/applyImportantSelector");
+const _pseudoElements = require("../util/pseudoElements");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -487,6 +488,10 @@ function processApply(root, context, localCache) {
                         rule.walkDecls((d)=>{
                             d.important = meta.important || important1;
                         });
+                        // Move pseudo elements to the end of the selector (if necessary)
+                        let selector = (0, _postcssSelectorParser.default)().astSync(rule.selector);
+                        selector.each((sel)=>(0, _pseudoElements.movePseudos)(sel));
+                        rule.selector = selector.toString();
                     });
                 }
                 // It could be that the node we were inserted was removed because the class didn't match

package/lib/lib/load-config.js

@@ -28,9 +28,13 @@ function lazyJiti() {
     });
 }
 function loadConfig(path) {
-    try {
-        return path ? require(path) : {};
-    } catch  {
-        return lazyJiti()(path);
-    }
+    let config = function() {
+        try {
+            return path ? require(path) : {};
+        } catch  {
+            return lazyJiti()(path);
+        }
+    }();
+    var _config_default;
+    return (_config_default = config.default) !== null && _config_default !== void 0 ? _config_default : config;
 }

package/lib/lib/sharedState.js

@@ -25,11 +25,16 @@ function _interopRequireDefault(obj) {
     };
 }
 let OXIDE_DEFAULT_ENABLED = _packageJson.default.tailwindcss.engine === "oxide";
-const env = {
+const env = typeof process !== "undefined" ? {
     NODE_ENV: process.env.NODE_ENV,
     DEBUG: resolveDebug(process.env.DEBUG),
     ENGINE: _packageJson.default.tailwindcss.engine,
     OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED)
+} : {
+    NODE_ENV: "production",
+    DEBUG: false,
+    ENGINE: _packageJson.default.tailwindcss.engine,
+    OXIDE: OXIDE_DEFAULT_ENABLED
 };
 const contextMap = new Map();
 const configContextMap = new Map();

package/lib/util/applyImportantSelector.js

@@ -6,17 +6,29 @@ Object.defineProperty(exports, "applyImportantSelector", {
     enumerable: true,
     get: ()=>applyImportantSelector
 });
-const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
-function applyImportantSelector(selector, important) {
-    let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector);
-    if (!matches) return `${important} ${wrapWithIs(selector)}`;
-    let [, before, pseudo, brackets] = matches;
-    return `${important} ${wrapWithIs(before + brackets)}${pseudo}`;
+const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
+const _pseudoElements = require("./pseudoElements");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
-function wrapWithIs(selector) {
-    let parts = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(selector, " ");
-    if (parts.length === 1 && parts[0].startsWith(":is(") && parts[0].endsWith(")")) {
-        return selector;
-    }
-    return `:is(${selector})`;
+function applyImportantSelector(selector, important) {
+    let sel = (0, _postcssSelectorParser.default)().astSync(selector);
+    sel.each((sel)=>{
+        // Wrap with :is if it's not already wrapped
+        let isWrapped = sel.nodes[0].type === "pseudo" && sel.nodes[0].value === ":is" && sel.nodes.every((node)=>node.type !== "combinator");
+        if (!isWrapped) {
+            sel.nodes = [
+                _postcssSelectorParser.default.pseudo({
+                    value: ":is",
+                    nodes: [
+                        sel.clone()
+                    ]
+                })
+            ];
+        }
+        (0, _pseudoElements.movePseudos)(sel);
+    });
+    return `${important} ${sel.toString()}`;
 }

package/lib/util/formatVariantSelector.js

@@ -18,6 +18,7 @@ const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("pos
 const _unesc = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser/dist/util/unesc"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _prefixSelector = /*#__PURE__*/ _interopRequireDefault(require("../util/prefixSelector"));
+const _pseudoElements = require("./pseudoElements");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -201,12 +202,7 @@ function finalizeSelector(current, formats, { context , candidate , base  }) {
         }
     });
     // Move pseudo elements to the end of the selector (if necessary)
-    selector.each((sel)=>{
-        let pseudoElements = collectPseudoElements(sel);
-        if (pseudoElements.length > 0) {
-            sel.nodes.push(pseudoElements.sort(sortSelector));
-        }
-    });
+    selector.each((sel)=>(0, _pseudoElements.movePseudos)(sel));
     return selector.toString();
 }
 function handleMergePseudo(selector, format) {
@@ -257,85 +253,3 @@ function handleMergePseudo(selector, format) {
         format
     ];
 }
-// Note: As a rule, double colons (::) should be used instead of a single colon
-// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
-// this distinction was not present in older versions of the W3C spec, most
-// browsers support both syntaxes for the original pseudo-elements.
-let pseudoElementsBC = [
-    ":before",
-    ":after",
-    ":first-line",
-    ":first-letter"
-];
-// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = [
-    "::file-selector-button",
-    // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-    "::-webkit-scrollbar",
-    "::-webkit-scrollbar-button",
-    "::-webkit-scrollbar-thumb",
-    "::-webkit-scrollbar-track",
-    "::-webkit-scrollbar-track-piece",
-    "::-webkit-scrollbar-corner",
-    "::-webkit-resizer"
-];
-/**
- * This will make sure to move pseudo's to the correct spot (the end for
- * pseudo elements) because otherwise the selector will never work
- * anyway.
- *
- * E.g.:
- *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
- *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
- *
- * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
- *
- * @param {Selector} selector
- **/ function collectPseudoElements(selector) {
-    /** @type {Node[]} */ let nodes = [];
-    for (let node of selector.nodes){
-        if (isPseudoElement(node)) {
-            nodes.push(node);
-            selector.removeChild(node);
-        }
-        if (node === null || node === void 0 ? void 0 : node.nodes) {
-            nodes.push(...collectPseudoElements(node));
-        }
-    }
-    return nodes;
-}
-// This will make sure to move pseudo's to the correct spot (the end for
-// pseudo elements) because otherwise the selector will never work
-// anyway.
-//
-// E.g.:
-//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-//
-// `::before:hover` doesn't work, which means that we can make it work
-// for you by flipping the order.
-function sortSelector(a, z) {
-    // Both nodes are non-pseudo's so we can safely ignore them and keep
-    // them in the same order.
-    if (a.type !== "pseudo" && z.type !== "pseudo") {
-        return 0;
-    }
-    // If one of them is a combinator, we need to keep it in the same order
-    // because that means it will start a new "section" in the selector.
-    if (a.type === "combinator" ^ z.type === "combinator") {
-        return 0;
-    }
-    // One of the items is a pseudo and the other one isn't. Let's move
-    // the pseudo to the right.
-    if (a.type === "pseudo" ^ z.type === "pseudo") {
-        return (a.type === "pseudo") - (z.type === "pseudo");
-    }
-    // Both are pseudo's, move the pseudo elements (except for
-    // ::file-selector-button) to the right.
-    return isPseudoElement(a) - isPseudoElement(z);
-}
-function isPseudoElement(node) {
-    if (node.type !== "pseudo") return false;
-    if (pseudoElementExceptions.includes(node.value)) return false;
-    return node.value.startsWith("::") || pseudoElementsBC.includes(node.value);
-}

package/lib/util/normalizeConfig.js

@@ -276,19 +276,5 @@ function normalizeConfig(config) {
             break;
         }
     }
-    // Warn if the line-clamp plugin is installed
-    if (config.plugins.length > 0) {
-        let plugin;
-        try {
-            plugin = require("@tailwindcss/line-clamp");
-        } catch  {}
-        if (plugin && config.plugins.includes(plugin)) {
-            _log.default.warn("line-clamp-in-core", [
-                "As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.",
-                "Remove it from the `plugins` array in your configuration to eliminate this warning."
-            ]);
-            config.plugins = config.plugins.filter((p)=>p !== plugin);
-        }
-    }
     return config;
 }

package/lib/util/pseudoElements.js

@@ -0,0 +1,223 @@
+/** @typedef {import('postcss-selector-parser').Root} Root */ /** @typedef {import('postcss-selector-parser').Selector} Selector */ /** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */ /** @typedef {import('postcss-selector-parser').Node} Node */ // There are some pseudo-elements that may or may not be:
+// **Actionable**
+// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself
+// structural-pseudo-classes are NOT allowed but we don't make
+// The spec is not clear on whether this is allowed or not — but in practice it is.
+// **Terminal**
+// It MUST be placed at the end of a selector
+//
+// This is the required in the spec. However, some pseudo elements are not "terminal" because
+// they represent a "boundary piercing" that is compiled out by a build step.
+// **Jumpable**
+// Any terminal element may "jump" over combinators when moving to the end of the selector
+//
+// This is a backwards-compat quirk of :before and :after variants.
+/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */ /** @type {Record<string, PseudoProperty[]>} */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "movePseudos", {
+    enumerable: true,
+    get: ()=>movePseudos
+});
+let elementProperties = {
+    "::after": [
+        "terminal",
+        "jumpable"
+    ],
+    "::backdrop": [
+        "terminal"
+    ],
+    "::before": [
+        "terminal",
+        "jumpable"
+    ],
+    "::cue": [
+        "terminal"
+    ],
+    "::cue-region": [
+        "terminal"
+    ],
+    "::first-letter": [
+        "terminal",
+        "jumpable"
+    ],
+    "::first-line": [
+        "terminal",
+        "jumpable"
+    ],
+    "::grammar-error": [
+        "terminal"
+    ],
+    "::marker": [
+        "terminal"
+    ],
+    "::part": [
+        "terminal",
+        "actionable"
+    ],
+    "::placeholder": [
+        "terminal"
+    ],
+    "::selection": [
+        "terminal"
+    ],
+    "::slotted": [
+        "terminal"
+    ],
+    "::spelling-error": [
+        "terminal"
+    ],
+    "::target-text": [
+        "terminal"
+    ],
+    // other
+    "::file-selector-button": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-progress-bar": [
+        "terminal",
+        "actionable"
+    ],
+    // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+    "::-webkit-scrollbar": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-button": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-thumb": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-track": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-track-piece": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-corner": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-resizer": [
+        "terminal",
+        "actionable"
+    ],
+    // Note: As a rule, double colons (::) should be used instead of a single colon
+    // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+    // this distinction was not present in older versions of the W3C spec, most
+    // browsers support both syntaxes for the original pseudo-elements.
+    ":after": [
+        "terminal",
+        "jumpable"
+    ],
+    ":before": [
+        "terminal",
+        "jumpable"
+    ],
+    ":first-letter": [
+        "terminal",
+        "jumpable"
+    ],
+    ":first-line": [
+        "terminal",
+        "jumpable"
+    ],
+    // 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't be moved AND can have user-action pseudo classes attached to it
+    __default__: [
+        "actionable"
+    ]
+};
+function movePseudos(sel) {
+    let [pseudos] = movablePseudos(sel);
+    // Remove all pseudo elements from their respective selectors
+    pseudos.forEach(([sel, pseudo])=>sel.removeChild(pseudo));
+    // Re-add them to the end of the selector in the correct order.
+    // This moves terminal pseudo elements to the end of the
+    // selector otherwise the selector will not be valid.
+    //
+    // Examples:
+    //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+    //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+    //
+    // The selector `::before:hover` does not work but we
+    // can make it work for you by flipping the order.
+    sel.nodes.push(...pseudos.map(([, pseudo])=>pseudo));
+    return sel;
+}
+/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */ /** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */ /**
+ * @param {Selector} sel
+ * @returns {MovablePseudosResult}
+ */ function movablePseudos(sel) {
+    /** @type {MovablePseudo[]} */ let buffer = [];
+    /** @type {Pseudo | null} */ let lastSeenElement = null;
+    for (let node of sel.nodes){
+        if (node.type === "combinator") {
+            buffer = buffer.filter(([, node])=>propertiesForPseudo(node).includes("jumpable"));
+            lastSeenElement = null;
+        } else if (node.type === "pseudo") {
+            if (isMovablePseudoElement(node)) {
+                lastSeenElement = node;
+                buffer.push([
+                    sel,
+                    node,
+                    null
+                ]);
+            } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) {
+                buffer.push([
+                    sel,
+                    node,
+                    lastSeenElement
+                ]);
+            } else {
+                lastSeenElement = null;
+            }
+            var _node_nodes;
+            for (let sub of (_node_nodes = node.nodes) !== null && _node_nodes !== void 0 ? _node_nodes : []){
+                let [movable, lastSeenElementInSub] = movablePseudos(sub);
+                lastSeenElement = lastSeenElementInSub || lastSeenElement;
+                buffer.push(...movable);
+            }
+        }
+    }
+    return [
+        buffer,
+        lastSeenElement
+    ];
+}
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */ function isPseudoElement(node) {
+    return node.value.startsWith("::") || elementProperties[node.value] !== undefined;
+}
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */ function isMovablePseudoElement(node) {
+    return isPseudoElement(node) && propertiesForPseudo(node).includes("terminal");
+}
+/**
+ * @param {Node} node
+ * @param {Pseudo} pseudo
+ * @returns {boolean}
+ */ function isAttachablePseudoClass(node, pseudo) {
+    if (node.type !== "pseudo") return false;
+    if (isPseudoElement(node)) return false;
+    return propertiesForPseudo(pseudo).includes("actionable");
+}
+/**
+ * @param {Pseudo} pseudo
+ * @returns {PseudoProperty[]}
+ */ function propertiesForPseudo(pseudo) {
+    var _elementProperties_pseudo_value;
+    return (_elementProperties_pseudo_value = elementProperties[pseudo.value]) !== null && _elementProperties_pseudo_value !== void 0 ? _elementProperties_pseudo_value : elementProperties.__default__;
+}

package/lib/util/validateConfig.js

@@ -20,5 +20,16 @@ function validateConfig(config) {
             "https://tailwindcss.com/docs/content-configuration"
         ]);
     }
+    // Warn if the line-clamp plugin is installed
+    try {
+        let plugin = require("@tailwindcss/line-clamp");
+        if (config.plugins.includes(plugin)) {
+            _log.default.warn("line-clamp-in-core", [
+                "As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.",
+                "Remove it from the `plugins` array in your configuration to eliminate this warning."
+            ]);
+            config.plugins = config.plugins.filter((p)=>p !== plugin);
+        }
+    } catch  {}
     return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.fb796cd",
+  "version": "0.0.0-insiders.fbbba6f",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/corePlugins.js

@@ -1756,40 +1756,92 @@ export let corePlugins = {
         type: ['color', 'any'],
       }
 
+      let positionOptions = {
+        values: theme('gradientColorStopPositions'),
+        type: ['length', 'percentage'],
+      }
+
       matchUtilities(
         {
           from: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-from': `${toColorValue(
+                value,
+                'from'
+              )} var(--tw-gradient-from-position)`,
+              '--tw-gradient-from-position': ' ',
+              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-from-position)`,
+              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
+      matchUtilities(
+        {
+          from: (value) => {
+            return {
+              '--tw-gradient-from-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
       matchUtilities(
         {
           via: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-via-position': ' ',
+              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
+              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                 value,
                 'via'
-              )}, var(--tw-gradient-to)`,
+              )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
       matchUtilities(
-        { to: (value) => ({ '--tw-gradient-to': toColorValue(value, 'to') }) },
+        {
+          via: (value) => {
+            return {
+              '--tw-gradient-via-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
+      matchUtilities(
+        {
+          to: (value) => ({
+            '--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
+            '--tw-gradient-to-position': ' ',
+          }),
+        },
         options
       )
+
+      matchUtilities(
+        {
+          to: (value) => {
+            return {
+              '--tw-gradient-to-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
     }
   })(),
 

package/src/lib/expandApplyAtRules.js

@@ -4,6 +4,7 @@ import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import escapeClassName from '../util/escapeClassName'
 import { applyImportantSelector } from '../util/applyImportantSelector'
+import { movePseudos } from '../util/pseudoElements'
 
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
 
@@ -562,6 +563,11 @@ function processApply(root, context, localCache) {
             rule.walkDecls((d) => {
               d.important = meta.important || important
             })
+
+            // Move pseudo elements to the end of the selector (if necessary)
+            let selector = parser().astSync(rule.selector)
+            selector.each((sel) => movePseudos(sel))
+            rule.selector = selector.toString()
           })
         }
 

package/src/lib/load-config.ts

@@ -19,9 +19,13 @@ function lazyJiti() {
 }
 
 export function loadConfig(path: string): Config {
-  try {
-    return path ? require(path) : {}
-  } catch {
-    return lazyJiti()(path)
-  }
+  let config = (function () {
+    try {
+      return path ? require(path) : {}
+    } catch {
+      return lazyJiti()(path)
+    }
+  })()
+
+  return config.default ?? config
 }

package/src/lib/sharedState.js

@@ -1,12 +1,21 @@
 import pkg from '../../package.json'
 let OXIDE_DEFAULT_ENABLED = pkg.tailwindcss.engine === 'oxide'
 
-export const env = {
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: resolveDebug(process.env.DEBUG),
-  ENGINE: pkg.tailwindcss.engine,
-  OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
-}
+export const env =
+  typeof process !== 'undefined'
+    ? {
+        NODE_ENV: process.env.NODE_ENV,
+        DEBUG: resolveDebug(process.env.DEBUG),
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
+      }
+    : {
+        NODE_ENV: 'production',
+        DEBUG: false,
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: OXIDE_DEFAULT_ENABLED,
+      }
+
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()

package/src/util/applyImportantSelector.js

@@ -1,19 +1,27 @@
-import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+import parser from 'postcss-selector-parser'
+import { movePseudos } from './pseudoElements'
 
 export function applyImportantSelector(selector, important) {
-  let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector)
-  if (!matches) return `${important} ${wrapWithIs(selector)}`
+  let sel = parser().astSync(selector)
 
-  let [, before, pseudo, brackets] = matches
-  return `${important} ${wrapWithIs(before + brackets)}${pseudo}`
-}
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
 
-function wrapWithIs(selector) {
-  let parts = splitAtTopLevelOnly(selector, ' ')
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
 
-  if (parts.length === 1 && parts[0].startsWith(':is(') && parts[0].endsWith(')')) {
-    return selector
-  }
+    movePseudos(sel)
+  })
 
-  return `:is(${selector})`
+  return `${important} ${sel.toString()}`
 }

package/src/util/formatVariantSelector.js

@@ -2,6 +2,7 @@ import selectorParser from 'postcss-selector-parser'
 import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
+import { movePseudos } from './pseudoElements'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
@@ -245,12 +246,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   })
 
   // Move pseudo elements to the end of the selector (if necessary)
-  selector.each((sel) => {
-    let pseudoElements = collectPseudoElements(sel)
-    if (pseudoElements.length > 0) {
-      sel.nodes.push(pseudoElements.sort(sortSelector))
-    }
-  })
+  selector.each((sel) => movePseudos(sel))
 
   return selector.toString()
 }
@@ -318,95 +314,3 @@ export function handleMergePseudo(selector, format) {
 
   return [selector, format]
 }
-
-// Note: As a rule, double colons (::) should be used instead of a single colon
-// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
-// this distinction was not present in older versions of the W3C spec, most
-// browsers support both syntaxes for the original pseudo-elements.
-let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter']
-
-// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = [
-  '::file-selector-button',
-
-  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-  '::-webkit-scrollbar',
-  '::-webkit-scrollbar-button',
-  '::-webkit-scrollbar-thumb',
-  '::-webkit-scrollbar-track',
-  '::-webkit-scrollbar-track-piece',
-  '::-webkit-scrollbar-corner',
-  '::-webkit-resizer',
-]
-
-/**
- * This will make sure to move pseudo's to the correct spot (the end for
- * pseudo elements) because otherwise the selector will never work
- * anyway.
- *
- * E.g.:
- *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
- *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
- *
- * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
- *
- * @param {Selector} selector
- **/
-function collectPseudoElements(selector) {
-  /** @type {Node[]} */
-  let nodes = []
-
-  for (let node of selector.nodes) {
-    if (isPseudoElement(node)) {
-      nodes.push(node)
-      selector.removeChild(node)
-    }
-
-    if (node?.nodes) {
-      nodes.push(...collectPseudoElements(node))
-    }
-  }
-
-  return nodes
-}
-
-// This will make sure to move pseudo's to the correct spot (the end for
-// pseudo elements) because otherwise the selector will never work
-// anyway.
-//
-// E.g.:
-//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-//
-// `::before:hover` doesn't work, which means that we can make it work
-// for you by flipping the order.
-function sortSelector(a, z) {
-  // Both nodes are non-pseudo's so we can safely ignore them and keep
-  // them in the same order.
-  if (a.type !== 'pseudo' && z.type !== 'pseudo') {
-    return 0
-  }
-
-  // If one of them is a combinator, we need to keep it in the same order
-  // because that means it will start a new "section" in the selector.
-  if ((a.type === 'combinator') ^ (z.type === 'combinator')) {
-    return 0
-  }
-
-  // One of the items is a pseudo and the other one isn't. Let's move
-  // the pseudo to the right.
-  if ((a.type === 'pseudo') ^ (z.type === 'pseudo')) {
-    return (a.type === 'pseudo') - (z.type === 'pseudo')
-  }
-
-  // Both are pseudo's, move the pseudo elements (except for
-  // ::file-selector-button) to the right.
-  return isPseudoElement(a) - isPseudoElement(z)
-}
-
-function isPseudoElement(node) {
-  if (node.type !== 'pseudo') return false
-  if (pseudoElementExceptions.includes(node.value)) return false
-
-  return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
-}

package/src/util/normalizeConfig.js

@@ -297,22 +297,5 @@ export function normalizeConfig(config) {
     }
   }
 
-  // Warn if the line-clamp plugin is installed
-  if (config.plugins.length > 0) {
-    let plugin
-    try {
-      plugin = require('@tailwindcss/line-clamp')
-    } catch {}
-
-    if (plugin && config.plugins.includes(plugin)) {
-      log.warn('line-clamp-in-core', [
-        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
-        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
-      ])
-
-      config.plugins = config.plugins.filter((p) => p !== plugin)
-    }
-  }
-
   return config
 }

package/src/util/pseudoElements.js

@@ -0,0 +1,170 @@
+/** @typedef {import('postcss-selector-parser').Root} Root */
+/** @typedef {import('postcss-selector-parser').Selector} Selector */
+/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
+/** @typedef {import('postcss-selector-parser').Node} Node */
+
+// There are some pseudo-elements that may or may not be:
+
+// **Actionable**
+// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself
+// structural-pseudo-classes are NOT allowed but we don't make
+// The spec is not clear on whether this is allowed or not — but in practice it is.
+
+// **Terminal**
+// It MUST be placed at the end of a selector
+//
+// This is the required in the spec. However, some pseudo elements are not "terminal" because
+// they represent a "boundary piercing" that is compiled out by a build step.
+
+// **Jumpable**
+// Any terminal element may "jump" over combinators when moving to the end of the selector
+//
+// This is a backwards-compat quirk of :before and :after variants.
+
+/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */
+
+/** @type {Record<string, PseudoProperty[]>} */
+let elementProperties = {
+  '::after': ['terminal', 'jumpable'],
+  '::backdrop': ['terminal'],
+  '::before': ['terminal', 'jumpable'],
+  '::cue': ['terminal'],
+  '::cue-region': ['terminal'],
+  '::first-letter': ['terminal', 'jumpable'],
+  '::first-line': ['terminal', 'jumpable'],
+  '::grammar-error': ['terminal'],
+  '::marker': ['terminal'],
+  '::part': ['terminal', 'actionable'],
+  '::placeholder': ['terminal'],
+  '::selection': ['terminal'],
+  '::slotted': ['terminal'],
+  '::spelling-error': ['terminal'],
+  '::target-text': ['terminal'],
+
+  // other
+  '::file-selector-button': ['terminal', 'actionable'],
+  '::-webkit-progress-bar': ['terminal', 'actionable'],
+
+  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+  '::-webkit-scrollbar': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-button': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-thumb': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track-piece': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-corner': ['terminal', 'actionable'],
+  '::-webkit-resizer': ['terminal', 'actionable'],
+
+  // Note: As a rule, double colons (::) should be used instead of a single colon
+  // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+  // this distinction was not present in older versions of the W3C spec, most
+  // browsers support both syntaxes for the original pseudo-elements.
+  ':after': ['terminal', 'jumpable'],
+  ':before': ['terminal', 'jumpable'],
+  ':first-letter': ['terminal', 'jumpable'],
+  ':first-line': ['terminal', 'jumpable'],
+
+  // 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't be moved AND can have user-action pseudo classes attached to it
+  __default__: ['actionable'],
+}
+
+/**
+ * @param {Selector} sel
+ * @returns {Selector}
+ */
+export function movePseudos(sel) {
+  let [pseudos] = movablePseudos(sel)
+
+  // Remove all pseudo elements from their respective selectors
+  pseudos.forEach(([sel, pseudo]) => sel.removeChild(pseudo))
+
+  // Re-add them to the end of the selector in the correct order.
+  // This moves terminal pseudo elements to the end of the
+  // selector otherwise the selector will not be valid.
+  //
+  // Examples:
+  //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+  //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+  //
+  // The selector `::before:hover` does not work but we
+  // can make it work for you by flipping the order.
+  sel.nodes.push(...pseudos.map(([, pseudo]) => pseudo))
+
+  return sel
+}
+
+/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */
+/** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */
+
+/**
+ * @param {Selector} sel
+ * @returns {MovablePseudosResult}
+ */
+function movablePseudos(sel) {
+  /** @type {MovablePseudo[]} */
+  let buffer = []
+
+  /** @type {Pseudo | null} */
+  let lastSeenElement = null
+
+  for (let node of sel.nodes) {
+    if (node.type === 'combinator') {
+      buffer = buffer.filter(([, node]) => propertiesForPseudo(node).includes('jumpable'))
+      lastSeenElement = null
+    } else if (node.type === 'pseudo') {
+      if (isMovablePseudoElement(node)) {
+        lastSeenElement = node
+        buffer.push([sel, node, null])
+      } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) {
+        buffer.push([sel, node, lastSeenElement])
+      } else {
+        lastSeenElement = null
+      }
+
+      for (let sub of node.nodes ?? []) {
+        let [movable, lastSeenElementInSub] = movablePseudos(sub)
+        lastSeenElement = lastSeenElementInSub || lastSeenElement
+        buffer.push(...movable)
+      }
+    }
+  }
+
+  return [buffer, lastSeenElement]
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isPseudoElement(node) {
+  return node.value.startsWith('::') || elementProperties[node.value] !== undefined
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isMovablePseudoElement(node) {
+  return isPseudoElement(node) && propertiesForPseudo(node).includes('terminal')
+}
+
+/**
+ * @param {Node} node
+ * @param {Pseudo} pseudo
+ * @returns {boolean}
+ */
+function isAttachablePseudoClass(node, pseudo) {
+  if (node.type !== 'pseudo') return false
+  if (isPseudoElement(node)) return false
+
+  return propertiesForPseudo(pseudo).includes('actionable')
+}
+
+/**
+ * @param {Pseudo} pseudo
+ * @returns {PseudoProperty[]}
+ */
+function propertiesForPseudo(pseudo) {
+  return elementProperties[pseudo.value] ?? elementProperties.__default__
+}

package/src/util/validateConfig.js

@@ -9,5 +9,18 @@ export function validateConfig(config) {
     ])
   }
 
+  // Warn if the line-clamp plugin is installed
+  try {
+    let plugin = require('@tailwindcss/line-clamp')
+    if (config.plugins.includes(plugin)) {
+      log.warn('line-clamp-in-core', [
+        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
+        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
+      ])
+
+      config.plugins = config.plugins.filter((p) => p !== plugin)
+    }
+  } catch {}
+
   return config
 }

package/stubs/config.full.js

@@ -355,6 +355,29 @@ module.exports = {
     },
     gap: ({ theme }) => theme('spacing'),
     gradientColorStops: ({ theme }) => theme('colors'),
+    gradientColorStopPositions: {
+      '0%': '0%',
+      '5%': '5%',
+      '10%': '10%',
+      '15%': '15%',
+      '20%': '20%',
+      '25%': '25%',
+      '30%': '30%',
+      '35%': '35%',
+      '40%': '40%',
+      '45%': '45%',
+      '50%': '50%',
+      '55%': '55%',
+      '60%': '60%',
+      '65%': '65%',
+      '70%': '70%',
+      '75%': '75%',
+      '80%': '80%',
+      '85%': '85%',
+      '90%': '90%',
+      '95%': '95%',
+      '100%': '100%',
+    },
     grayscale: {
       0: '0',
       DEFAULT: '100%',

package/types/config.d.ts

@@ -46,12 +46,7 @@ type PrefixConfig = string
 type SeparatorConfig = string
 
 // Safelist related config
-type SafelistConfig =
-  | string[]
-  | {
-      pattern: RegExp
-      variants?: string[]
-    }[]
+type SafelistConfig = (string | { pattern: RegExp; variants?: string[] })[]
 
 // Blocklist related config
 type BlocklistConfig = string[]

package/types/generated/default-theme.d.ts

@@ -153,6 +153,30 @@ export type DefaultTheme = Config['theme'] & {
     | 'black',
     string
   >
+  gradientColorStopPositions: Record<
+    | '0%'
+    | '5%'
+    | '10%'
+    | '15%'
+    | '20%'
+    | '25%'
+    | '30%'
+    | '35%'
+    | '40%'
+    | '45%'
+    | '50%'
+    | '55%'
+    | '60%'
+    | '65%'
+    | '70%'
+    | '75%'
+    | '80%'
+    | '85%'
+    | '90%'
+    | '95%'
+    | '100%',
+    string
+  >
   grayscale: Record<'0' | 'DEFAULT', string>
   gridAutoColumns: Record<'auto' | 'min' | 'max' | 'fr', string>
   gridAutoRows: Record<'auto' | 'min' | 'max' | 'fr', string>