tailwindcss 3.1.0 → 3.1.3

package/CHANGELOG.md

@@ -9,6 +9,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.1.3] - 2022-06-14
+
+### Fixed
+
+- Fix extraction of multi-word utilities with arbitrary values and quotes ([#8604](https://github.com/tailwindlabs/tailwindcss/pull/8604))
+- Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
+- Ignore PostCSS nodes returned by `addVariant` ([#8608](https://github.com/tailwindlabs/tailwindcss/pull/8608))
+- Fix missing spaces around arithmetic operators ([#8615](https://github.com/tailwindlabs/tailwindcss/pull/8615))
+- Detect alpha value in CSS `theme()` function when using quotes ([#8625](https://github.com/tailwindlabs/tailwindcss/pull/8625))
+- Fix "Maximum call stack size exceeded" bug ([#8636](https://github.com/tailwindlabs/tailwindcss/pull/8636))
+- Allow functions returning parallel variants to mutate the container ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
+- Remove text opacity CSS variables from `::marker` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
+
+## [3.1.2] - 2022-06-10
+
+### Fixed
+
+- Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576))
+- Enable `postcss-import` in the CLI by default in watch mode ([#8574](https://github.com/tailwindlabs/tailwindcss/pull/8574), [#8580](https://github.com/tailwindlabs/tailwindcss/pull/8580))
+
+## [3.1.1] - 2022-06-09
+
+### Fixed
+
+- Fix candidate extractor regression ([#8558](https://github.com/tailwindlabs/tailwindcss/pull/8558))
+- Split `::backdrop` into separate defaults group ([#8567](https://github.com/tailwindlabs/tailwindcss/pull/8567))
+- Fix postcss plugin type ([#8564](https://github.com/tailwindlabs/tailwindcss/pull/8564))
+- Fix class detection in markdown code fences and slim templates ([#8569](https://github.com/tailwindlabs/tailwindcss/pull/8569))
+
 ## [3.1.0] - 2022-06-08
 
 ### Fixed
@@ -1952,7 +1981,10 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.3...HEAD
+[3.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.2...v3.1.3
+[3.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.1...v3.1.2
+[3.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...v3.1.1
 [3.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.24...v3.1.0
 [3.0.24]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...v3.0.24
 [3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23

package/lib/cli.js

@@ -428,6 +428,43 @@ async function build() {
             config1.options
         ];
     }
+    function loadBuiltinPostcssPlugins() {
+        let postcss = loadPostcss();
+        let IMPORT_COMMENT = "__TAILWIND_RESTORE_IMPORT__: ";
+        return [
+            [
+                (root)=>{
+                    root.walkAtRules("import", (rule)=>{
+                        if (rule.params.slice(1).startsWith("tailwindcss/")) {
+                            rule.after(postcss.comment({
+                                text: IMPORT_COMMENT + rule.params
+                            }));
+                            rule.remove();
+                        }
+                    });
+                },
+                (()=>{
+                    try {
+                        return require("postcss-import");
+                    } catch  {}
+                    return (0, _indexJs).lazyPostcssImport();
+                })(),
+                (root)=>{
+                    root.walkComments((rule)=>{
+                        if (rule.text.startsWith(IMPORT_COMMENT)) {
+                            rule.after(postcss.atRule({
+                                name: "import",
+                                params: rule.text.replace(IMPORT_COMMENT, "")
+                            }));
+                            rule.remove();
+                        }
+                    });
+                }, 
+            ],
+            [],
+            {}, 
+        ];
+    }
     function resolveConfig() {
         let config = configPath ? require(configPath) : {};
         if (args["--purge"]) {
@@ -503,40 +540,7 @@ async function build() {
             };
         };
         tailwindPlugin.postcss = true;
-        let IMPORT_COMMENT = "__TAILWIND_RESTORE_IMPORT__: ";
-        let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : [
-            [
-                (root)=>{
-                    root.walkAtRules("import", (rule)=>{
-                        if (rule.params.slice(1).startsWith("tailwindcss/")) {
-                            rule.after(postcss.comment({
-                                text: IMPORT_COMMENT + rule.params
-                            }));
-                            rule.remove();
-                        }
-                    });
-                },
-                (()=>{
-                    try {
-                        return require("postcss-import");
-                    } catch  {}
-                    return (0, _indexJs).lazyPostcssImport();
-                })(),
-                (root)=>{
-                    root.walkComments((rule)=>{
-                        if (rule.text.startsWith(IMPORT_COMMENT)) {
-                            rule.after(postcss.atRule({
-                                name: "import",
-                                params: rule.text.replace(IMPORT_COMMENT, "")
-                            }));
-                            rule.remove();
-                        }
-                    });
-                }, 
-            ],
-            [],
-            {}, 
-        ];
+        let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : loadBuiltinPostcssPlugins();
         let plugins = [
             ...beforePlugins,
             tailwindPlugin,
@@ -623,10 +627,7 @@ async function build() {
             env.DEBUG && console.timeEnd("Module dependencies");
             return resolveConfig();
         }
-        let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [
-            [],
-            []
-        ];
+        let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : loadBuiltinPostcssPlugins();
         let plugins = [
             ...beforePlugins,
             "__TAILWIND_PLUGIN_POSITION__",

package/lib/corePlugins.js

@@ -19,6 +19,7 @@ var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
 var _normalizeScreens = require("./util/normalizeScreens");
 var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
+var _removeAlphaVariables = require("./util/removeAlphaVariables");
 var _featureFlags = require("./featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -69,8 +70,18 @@ let variantPlugins = {
         addVariant("first-letter", "&::first-letter");
         addVariant("first-line", "&::first-line");
         addVariant("marker", [
-            "& *::marker",
-            "&::marker"
+            ({ container  })=>{
+                (0, _removeAlphaVariables).removeAlphaVariables(container, [
+                    "--tw-text-opacity"
+                ]);
+                return "& *::marker";
+            },
+            ({ container  })=>{
+                (0, _removeAlphaVariables).removeAlphaVariables(container, [
+                    "--tw-text-opacity"
+                ]);
+                return "&::marker";
+            }, 
         ]);
         addVariant("selection", [
             "& *::selection",
@@ -140,22 +151,11 @@ let variantPlugins = {
             [
                 "visited",
                 ({ container  })=>{
-                    let toRemove = [
+                    (0, _removeAlphaVariables).removeAlphaVariables(container, [
                         "--tw-text-opacity",
                         "--tw-border-opacity",
-                        "--tw-bg-opacity"
-                    ];
-                    container.walkDecls((decl)=>{
-                        if (toRemove.includes(decl.prop)) {
-                            decl.remove();
-                            return;
-                        }
-                        for (const varName of toRemove){
-                            if (decl.value.includes(`/ var(${varName})`)) {
-                                decl.value = decl.value.replace(`/ var(${varName})`, "");
-                            }
-                        }
-                    });
+                        "--tw-bg-opacity", 
+                    ]);
                     return "&:visited";
                 }, 
             ],

package/lib/lib/defaultExtractor.js

@@ -52,7 +52,10 @@ function defaultExtractor(context) {
         /** @type {(string|string)[]} */ let results = [];
         for (let pattern of patterns){
             var ref;
-            results.push(...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []);
+            results = [
+                ...results,
+                ...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []
+            ];
         }
         return results.filter((v)=>v !== undefined).map(clipAtBalancedParens);
     };
@@ -62,7 +65,7 @@ function* buildRegExps(context) {
     let variantGroupingEnabled = (0, _featureFlagsJs).flagEnabled(context.tailwindConfig, "variantGrouping");
     let utility = regex.any([
         // Arbitrary properties
-        /\[[^\s:'"]+:[^\s\]]+\]/,
+        /\[[^\s:'"`]+:[^\s\]]+\]/,
         // Utilities
         regex.pattern([
             // Utility Name / Group Name
@@ -71,22 +74,22 @@ function* buildRegExps(context) {
             regex.optional(regex.any([
                 regex.pattern([
                     // Arbitrary values
-                    /-\[[^\s:]+\]/,
+                    /-(?:\w+-)*\[[^\s:]+\]/,
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
-                    /(?:\/[^\s'"\\$]*)?/, 
+                    /(?:\/[^\s'"`\\><$]*)?/, 
                 ]),
                 regex.pattern([
                     // Arbitrary values
-                    /-\[[^\s]+\]/,
+                    /-(?:\w+-)*\[[^\s]+\]/,
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
-                    /(?:\/[^\s'"\\$]*)?/, 
+                    /(?:\/[^\s'"`\\$]*)?/, 
                 ]),
                 // Normal values w/o quotes — may include an opacity modifier
-                /[-\/][^\s'"\\$={]*/, 
+                /[-\/][^\s'"`\\$={><]*/, 
             ])), 
         ]), 
     ]);
@@ -95,11 +98,11 @@ function* buildRegExps(context) {
         "((?=((",
         regex.any([
             regex.pattern([
-                /([^\s"'\[\\]+-)?\[[^\s"'\\]+\]/,
+                /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/,
                 separator
             ]),
             regex.pattern([
-                /[^\s"'\[\\]+/,
+                /[^\s"'`\[\\]+/,
                 separator
             ]), 
         ], true),
@@ -121,8 +124,8 @@ function* buildRegExps(context) {
             utility, 
         ]) : utility, 
     ]);
-// 5. Inner matches
-// yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+    // 5. Inner matches
+    yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
 }
 // We want to capture any "special" characters
 // AND the characters immediately following them (if there is one)

package/lib/lib/evaluateTailwindFunctions.js

@@ -42,7 +42,7 @@ function listKeys(obj) {
     return list(Object.keys(obj));
 }
 function validatePath(config, path, defaultValue, themeOpts = {}) {
-    const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, "").replace(/['"]+$/g, "");
+    const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, "");
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
     const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
@@ -140,7 +140,10 @@ let nodeTypePropertyMap = {
 function _default({ tailwindConfig: config  }) {
     let functions = {
         theme: (node, path, ...defaultValue)=>{
-            let matches = path.match(/^([^\/\s]+)(?:\s*\/\s*([^\/\s]+))$/);
+            // Strip quotes from beginning and end of string
+            // This allows the alpha value to be present inside of quotes
+            path = path.replace(/^['"]+|['"]+$/g, "");
+            let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/);
             let alpha = undefined;
             if (matches) {
                 path = matches[1];

package/lib/lib/generateRules.js

@@ -205,13 +205,16 @@ function applyVariant(variant, matches, context) {
                     rule1.clone()
                 ]
             });
-            for (let [variantSort, variantFunction] of variantFunctionTuples){
-                let clone = container.clone();
+            for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples){
+                let clone = containerFromArray !== null && containerFromArray !== void 0 ? containerFromArray : container.clone();
                 let collectedFormats = [];
-                let originals = new Map();
                 function prepareBackup() {
-                    if (originals.size > 0) return; // Already prepared, chicken out
-                    clone.walkRules((rule)=>originals.set(rule, rule.selector));
+                    // Already prepared, chicken out
+                    if (clone.raws.neededBackup) {
+                        return;
+                    }
+                    clone.raws.neededBackup = true;
+                    clone.walkRules((rule)=>rule.raws.originalSelector = rule.selector);
                 }
                 function modifySelectors(modifierFunction) {
                     prepareBackup();
@@ -264,7 +267,10 @@ function applyVariant(variant, matches, context) {
                             // then this might be the place too look at. One potential solution to this problem is
                             // reserving additional X places for these 'unknown' variants in between.
                             variantSort | BigInt(idx << ruleWithVariant.length),
-                            variantFunction, 
+                            variantFunction,
+                            // If the clone has been modified we have to pass that back
+                            // though so each rule can use the modified container
+                            clone.clone(), 
                         ]);
                     }
                     continue;
@@ -275,13 +281,15 @@ function applyVariant(variant, matches, context) {
                 if (ruleWithVariant === null) {
                     continue;
                 }
-                // We filled the `originals`, therefore we assume that somebody touched
+                // We had to backup selectors, therefore we assume that somebody touched
                 // `container` or `modifySelectors`. Let's see if they did, so that we
                 // can restore the selectors, and collect the format strings.
-                if (originals.size > 0) {
+                if (clone.raws.neededBackup) {
+                    delete clone.raws.neededBackup;
                     clone.walkRules((rule)=>{
-                        if (!originals.has(rule)) return;
-                        let before = originals.get(rule);
+                        let before = rule.raws.originalSelector;
+                        if (!before) return;
+                        delete rule.raws.originalSelector;
                         if (before === rule.selector) return; // No mutation happened
                         let modified = rule.selector;
                         // Rebuild the base selector, this is what plugin authors would do

package/lib/lib/resolveDefaultsAtRules.js

@@ -23,52 +23,66 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             variableNodeMap.get(variable).add(rule.parent);
             rule.remove();
         });
-        for (let universal of universals){
-            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
-            var ref;
-            let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
-            for (let rule of rules){
-                for (let selector of extractElementSelector(rule.selector)){
-                    // If selector contains a vendor prefix after a pseudo element or class,
-                    // we consider them separately because merging the declarations into
-                    // a single rule will cause browsers that do not understand the
-                    // vendor prefix to throw out the whole rule
-                    let selectorGroupName = selector.includes(":-") || selector.includes("::-") ? selector : "__DEFAULT__";
-                    var ref1;
-                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
-                    selectorGroups.set(selectorGroupName, selectors);
-                    selectors.add(selector);
+        if ((0, _featureFlags).flagEnabled(tailwindConfig, "optimizeUniversalDefaults")) {
+            for (let universal of universals){
+                /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
+                var ref;
+                let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
+                for (let rule of rules){
+                    for (let selector of extractElementSelector(rule.selector)){
+                        // If selector contains a vendor prefix after a pseudo element or class,
+                        // we consider them separately because merging the declarations into
+                        // a single rule will cause browsers that do not understand the
+                        // vendor prefix to throw out the whole rule
+                        let selectorGroupName = selector.includes(":-") || selector.includes("::-") ? selector : "__DEFAULT__";
+                        var ref1;
+                        let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                        selectorGroups.set(selectorGroupName, selectors);
+                        selectors.add(selector);
+                    }
                 }
-            }
-            if ((0, _featureFlags).flagEnabled(tailwindConfig, "optimizeUniversalDefaults")) {
-                if (selectorGroups.size === 0) {
-                    universal.remove();
-                    continue;
-                }
-                for (let [, selectors] of selectorGroups){
-                    let universalRule = _postcss.default.rule({
-                        source: universal.source
-                    });
-                    universalRule.selectors = [
-                        ...selectors
-                    ];
-                    universalRule.append(universal.nodes.map((node)=>node.clone()));
-                    universal.before(universalRule);
+                if ((0, _featureFlags).flagEnabled(tailwindConfig, "optimizeUniversalDefaults")) {
+                    if (selectorGroups.size === 0) {
+                        universal.remove();
+                        continue;
+                    }
+                    for (let [, selectors] of selectorGroups){
+                        let universalRule = _postcss.default.rule({
+                            source: universal.source
+                        });
+                        universalRule.selectors = [
+                            ...selectors
+                        ];
+                        universalRule.append(universal.nodes.map((node)=>node.clone()));
+                        universal.before(universalRule);
+                    }
                 }
-            } else {
-                let universalRule = _postcss.default.rule({
-                    source: universal.source
-                });
-                universalRule.selectors = [
+                universal.remove();
+            }
+        } else if (universals.size) {
+            let universalRule = _postcss.default.rule({
+                selectors: [
                     "*",
                     "::before",
-                    "::after",
-                    "::backdrop"
-                ];
+                    "::after"
+                ]
+            });
+            for (let universal of universals){
                 universalRule.append(universal.nodes);
-                universal.before(universalRule);
+                if (!universalRule.parent) {
+                    universal.before(universalRule);
+                }
+                if (!universalRule.source) {
+                    universalRule.source = universal.source;
+                }
+                universal.remove();
             }
-            universal.remove();
+            let backdropRule = universalRule.clone({
+                selectors: [
+                    "::backdrop"
+                ]
+            });
+            universalRule.after(backdropRule);
         }
     };
 }

package/lib/lib/setupContextUtils.js

@@ -478,10 +478,11 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                             throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
                         }
                         if (Array.isArray(result)) {
-                            return result.map((variant)=>parseVariant(variant));
+                            return result.filter((variant)=>typeof variant === "string").map((variant)=>parseVariant(variant));
                         }
                         // result may be undefined with legacy variants that use APIs like `modifySelectors`
-                        return result && parseVariant(result)(api);
+                        // result may also be a postcss node if someone was returning the result from `modifySelectors`
+                        return result && typeof result === "string" && parseVariant(result)(api);
                     };
                 }
                 if (!isValidVariantFormatString(variantFunction)) {

package/lib/util/dataTypes.js

@@ -46,9 +46,9 @@ function normalize(value, isRoot = true) {
     if (isRoot) {
         value = value.trim();
     }
-    // Add spaces around operators inside calc() that do not follow an operator
+    // Add spaces around operators inside math functions like calc() that do not follow an operator
     // or '('.
-    value = value.replace(/calc\(.+\)/g, (match)=>{
+    value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         return match.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
     });
     // Add spaces around some operators not inside calc() that do not follow an operator

package/lib/util/removeAlphaVariables.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.removeAlphaVariables = removeAlphaVariables;
+function removeAlphaVariables(container, toRemove) {
+    container.walkDecls((decl)=>{
+        if (toRemove.includes(decl.prop)) {
+            decl.remove();
+            return;
+        }
+        for (let varName of toRemove){
+            if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, "");
+            }
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.1.0",
+  "version": "3.1.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -52,8 +52,8 @@
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^28.1.0",
-    "jest-diff": "^28.1.0",
+    "jest": "^28.1.1",
+    "jest-diff": "^28.1.1",
     "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.11",
     "rimraf": "^3.0.0",
@@ -63,7 +63,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "arg": "^5.0.1",
+    "arg": "^5.0.2",
     "chokidar": "^3.5.3",
     "color-name": "^1.1.4",
     "detective": "^5.2.1",

package/src/cli.js

@@ -484,6 +484,45 @@ async function build() {
     return [beforePlugins, afterPlugins, config.options]
   }
 
+  function loadBuiltinPostcssPlugins() {
+    let postcss = loadPostcss()
+    let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+    return [
+      [
+        (root) => {
+          root.walkAtRules('import', (rule) => {
+            if (rule.params.slice(1).startsWith('tailwindcss/')) {
+              rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+              rule.remove()
+            }
+          })
+        },
+        (() => {
+          try {
+            return require('postcss-import')
+          } catch {}
+
+          return lazyPostcssImport()
+        })(),
+        (root) => {
+          root.walkComments((rule) => {
+            if (rule.text.startsWith(IMPORT_COMMENT)) {
+              rule.after(
+                postcss.atRule({
+                  name: 'import',
+                  params: rule.text.replace(IMPORT_COMMENT, ''),
+                })
+              )
+              rule.remove()
+            }
+          })
+        },
+      ],
+      [],
+      {},
+    ]
+  }
+
   function resolveConfig() {
     let config = configPath ? require(configPath) : {}
 
@@ -568,44 +607,9 @@ async function build() {
 
     tailwindPlugin.postcss = true
 
-    let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
-
     let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
       ? await loadPostCssPlugins()
-      : [
-          [
-            (root) => {
-              root.walkAtRules('import', (rule) => {
-                if (rule.params.slice(1).startsWith('tailwindcss/')) {
-                  rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
-                  rule.remove()
-                }
-              })
-            },
-            (() => {
-              try {
-                return require('postcss-import')
-              } catch {}
-
-              return lazyPostcssImport()
-            })(),
-            (root) => {
-              root.walkComments((rule) => {
-                if (rule.text.startsWith(IMPORT_COMMENT)) {
-                  rule.after(
-                    postcss.atRule({
-                      name: 'import',
-                      params: rule.text.replace(IMPORT_COMMENT, ''),
-                    })
-                  )
-                  rule.remove()
-                }
-              })
-            },
-          ],
-          [],
-          {},
-        ]
+      : loadBuiltinPostcssPlugins()
 
     let plugins = [
       ...beforePlugins,
@@ -705,7 +709,9 @@ async function build() {
       return resolveConfig()
     }
 
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+    let [beforePlugins, afterPlugins] = includePostCss
+      ? await loadPostCssPlugins()
+      : loadBuiltinPostcssPlugins()
 
     let plugins = [
       ...beforePlugins,

package/src/corePlugins.js

@@ -14,6 +14,7 @@ import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
 import { normalizeScreens } from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
 
 export let variantPlugins = {
@@ -21,7 +22,19 @@ export let variantPlugins = {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
 
-    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('marker', [
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '& *::marker'
+      },
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '&::marker'
+      },
+    ])
+
     addVariant('selection', ['& *::selection', '&::selection'])
 
     addVariant('file', '&::file-selector-button')
@@ -77,21 +90,11 @@ export let variantPlugins = {
       [
         'visited',
         ({ container }) => {
-          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
-
-          container.walkDecls((decl) => {
-            if (toRemove.includes(decl.prop)) {
-              decl.remove()
-
-              return
-            }
-
-            for (const varName of toRemove) {
-              if (decl.value.includes(`/ var(${varName})`)) {
-                decl.value = decl.value.replace(`/ var(${varName})`, '')
-              }
-            }
-          })
+          removeAlphaVariables(container, [
+            '--tw-text-opacity',
+            '--tw-border-opacity',
+            '--tw-bg-opacity',
+          ])
 
           return '&:visited'
         },

package/src/lib/defaultExtractor.js

@@ -12,7 +12,7 @@ export function defaultExtractor(context) {
     let results = []
 
     for (let pattern of patterns) {
-      results.push(...(content.match(pattern) ?? []))
+      results = [...results, ...(content.match(pattern) ?? [])]
     }
 
     return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
@@ -25,7 +25,7 @@ function* buildRegExps(context) {
 
   let utility = regex.any([
     // Arbitrary properties
-    /\[[^\s:'"]+:[^\s\]]+\]/,
+    /\[[^\s:'"`]+:[^\s\]]+\]/,
 
     // Utilities
     regex.pattern([
@@ -37,28 +37,28 @@ function* buildRegExps(context) {
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s:]+\]/,
+            /-(?:\w+-)*\[[^\s:]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
 
             // optionally followed by an opacity modifier
-            /(?:\/[^\s'"\\$]*)?/,
+            /(?:\/[^\s'"`\\><$]*)?/,
           ]),
 
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s]+\]/,
+            /-(?:\w+-)*\[[^\s]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
 
             // optionally followed by an opacity modifier
-            /(?:\/[^\s'"\\$]*)?/,
+            /(?:\/[^\s'"`\\$]*)?/,
           ]),
 
           // Normal values w/o quotes — may include an opacity modifier
-          /[-\/][^\s'"\\$={]*/,
+          /[-\/][^\s'"`\\$={><]*/,
         ])
       ),
     ]),
@@ -69,8 +69,8 @@ function* buildRegExps(context) {
     '((?=((',
     regex.any(
       [
-        regex.pattern([/([^\s"'\[\\]+-)?\[[^\s"'\\]+\]/, separator]),
-        regex.pattern([/[^\s"'\[\\]+/, separator]),
+        regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
+        regex.pattern([/[^\s"'`\[\\]+/, separator]),
       ],
       true
     ),
@@ -91,7 +91,7 @@ function* buildRegExps(context) {
   ])
 
   // 5. Inner matches
-  // yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+  yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 }
 
 // We want to capture any "special" characters

package/src/lib/evaluateTailwindFunctions.js

@@ -40,9 +40,7 @@ function listKeys(obj) {
 }
 
 function validatePath(config, path, defaultValue, themeOpts = {}) {
-  const pathString = Array.isArray(path)
-    ? pathToString(path)
-    : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+  const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
   const value = dlv(config.theme, pathSegments, defaultValue)
 
@@ -162,7 +160,11 @@ let nodeTypePropertyMap = {
 export default function ({ tailwindConfig: config }) {
   let functions = {
     theme: (node, path, ...defaultValue) => {
-      let matches = path.match(/^([^\/\s]+)(?:\s*\/\s*([^\/\s]+))$/)
+      // Strip quotes from beginning and end of string
+      // This allows the alpha value to be present inside of quotes
+      path = path.replace(/^['"]+|['"]+$/g, '')
+
+      let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
       let alpha = undefined
 
       if (matches) {

package/src/lib/generateRules.js

@@ -163,15 +163,17 @@ function applyVariant(variant, matches, context) {
 
       let container = postcss.root({ nodes: [rule.clone()] })
 
-      for (let [variantSort, variantFunction] of variantFunctionTuples) {
-        let clone = container.clone()
+      for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
+        let clone = containerFromArray ?? container.clone()
         let collectedFormats = []
 
-        let originals = new Map()
-
         function prepareBackup() {
-          if (originals.size > 0) return // Already prepared, chicken out
-          clone.walkRules((rule) => originals.set(rule, rule.selector))
+          // Already prepared, chicken out
+          if (clone.raws.neededBackup) {
+            return
+          }
+          clone.raws.neededBackup = true
+          clone.walkRules((rule) => (rule.raws.originalSelector = rule.selector))
         }
 
         function modifySelectors(modifierFunction) {
@@ -231,6 +233,10 @@ function applyVariant(variant, matches, context) {
               // reserving additional X places for these 'unknown' variants in between.
               variantSort | BigInt(idx << ruleWithVariant.length),
               variantFunction,
+
+              // If the clone has been modified we have to pass that back
+              // though so each rule can use the modified container
+              clone.clone(),
             ])
           }
           continue
@@ -244,13 +250,15 @@ function applyVariant(variant, matches, context) {
           continue
         }
 
-        // We filled the `originals`, therefore we assume that somebody touched
+        // We had to backup selectors, therefore we assume that somebody touched
         // `container` or `modifySelectors`. Let's see if they did, so that we
         // can restore the selectors, and collect the format strings.
-        if (originals.size > 0) {
+        if (clone.raws.neededBackup) {
+          delete clone.raws.neededBackup
           clone.walkRules((rule) => {
-            if (!originals.has(rule)) return
-            let before = originals.get(rule)
+            let before = rule.raws.originalSelector
+            if (!before) return
+            delete rule.raws.originalSelector
             if (before === rule.selector) return // No mutation happened
 
             let modified = rule.selector

package/src/lib/resolveDefaultsAtRules.js

@@ -91,56 +91,73 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
       rule.remove()
     })
 
-    for (let universal of universals) {
-      /** @type {Map<string, Set<string>>} */
-      let selectorGroups = new Map()
+    if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+      for (let universal of universals) {
+        /** @type {Map<string, Set<string>>} */
+        let selectorGroups = new Map()
+
+        let rules = variableNodeMap.get(universal.params) ?? []
+
+        for (let rule of rules) {
+          for (let selector of extractElementSelector(rule.selector)) {
+            // If selector contains a vendor prefix after a pseudo element or class,
+            // we consider them separately because merging the declarations into
+            // a single rule will cause browsers that do not understand the
+            // vendor prefix to throw out the whole rule
+            let selectorGroupName =
+              selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+
+            let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
+            selectorGroups.set(selectorGroupName, selectors)
+
+            selectors.add(selector)
+          }
+        }
 
-      let rules = variableNodeMap.get(universal.params) ?? []
+        if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+          if (selectorGroups.size === 0) {
+            universal.remove()
+            continue
+          }
 
-      for (let rule of rules) {
-        for (let selector of extractElementSelector(rule.selector)) {
-          // If selector contains a vendor prefix after a pseudo element or class,
-          // we consider them separately because merging the declarations into
-          // a single rule will cause browsers that do not understand the
-          // vendor prefix to throw out the whole rule
-          let selectorGroupName =
-            selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+          for (let [, selectors] of selectorGroups) {
+            let universalRule = postcss.rule({
+              source: universal.source,
+            })
 
-          let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
-          selectorGroups.set(selectorGroupName, selectors)
+            universalRule.selectors = [...selectors]
 
-          selectors.add(selector)
+            universalRule.append(universal.nodes.map((node) => node.clone()))
+            universal.before(universalRule)
+          }
         }
-      }
 
-      if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-        if (selectorGroups.size === 0) {
-          universal.remove()
-          continue
-        }
-
-        for (let [, selectors] of selectorGroups) {
-          let universalRule = postcss.rule({
-            source: universal.source,
-          })
+        universal.remove()
+      }
+    } else if (universals.size) {
+      let universalRule = postcss.rule({
+        selectors: ['*', '::before', '::after'],
+      })
 
-          universalRule.selectors = [...selectors]
+      for (let universal of universals) {
+        universalRule.append(universal.nodes)
 
-          universalRule.append(universal.nodes.map((node) => node.clone()))
+        if (!universalRule.parent) {
           universal.before(universalRule)
         }
-      } else {
-        let universalRule = postcss.rule({
-          source: universal.source,
-        })
 
-        universalRule.selectors = ['*', '::before', '::after', '::backdrop']
+        if (!universalRule.source) {
+          universalRule.source = universal.source
+        }
 
-        universalRule.append(universal.nodes)
-        universal.before(universalRule)
+        universal.remove()
       }
 
-      universal.remove()
+      let backdropRule = universalRule.clone({
+        selectors: ['::backdrop'],
+      })
+
+      universalRule.after(backdropRule)
     }
   }
 }

package/src/lib/setupContextUtils.js

@@ -465,11 +465,14 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             }
 
             if (Array.isArray(result)) {
-              return result.map((variant) => parseVariant(variant))
+              return result
+                .filter((variant) => typeof variant === 'string')
+                .map((variant) => parseVariant(variant))
             }
 
             // result may be undefined with legacy variants that use APIs like `modifySelectors`
-            return result && parseVariant(result)(api)
+            // result may also be a postcss node if someone was returning the result from `modifySelectors`
+            return result && typeof result === 'string' && parseVariant(result)(api)
           }
         }
 

package/src/util/dataTypes.js

@@ -40,9 +40,9 @@ export function normalize(value, isRoot = true) {
     value = value.trim()
   }
 
-  // Add spaces around operators inside calc() that do not follow an operator
+  // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
-  value = value.replace(/calc\(.+\)/g, (match) => {
+  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     return match.replace(
       /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
       '$1 $2 '

package/src/util/removeAlphaVariables.js

@@ -0,0 +1,24 @@
+/**
+ * This function removes any uses of CSS variables used as an alpha channel
+ *
+ * This is required for selectors like `:visited` which do not allow
+ * changes in opacity or external control using CSS variables.
+ *
+ * @param {import('postcss').Container} container
+ * @param {string[]} toRemove
+ */
+export function removeAlphaVariables(container, toRemove) {
+  container.walkDecls((decl) => {
+    if (toRemove.includes(decl.prop)) {
+      decl.remove()
+
+      return
+    }
+
+    for (let varName of toRemove) {
+      if (decl.value.includes(`/ var(${varName})`)) {
+        decl.value = decl.value.replace(`/ var(${varName})`, '')
+      }
+    }
+  })
+}

package/types/config.d.ts

@@ -1,4 +1,4 @@
-import type { CorePluginList } from './generated/CorePluginList'
+import type { CorePluginList } from './generated/corePluginList'
 import type { DefaultColors } from './generated/colors'
 
 // Helpers

package/types/index.d.ts

@@ -1 +1,7 @@
-export type { Config } from './config.d'
+import { PluginCreator } from 'postcss'
+import type { Config } from './config.d'
+
+declare const plugin: PluginCreator<string | Config | { config: string | Config }>
+
+export { Config }
+export default plugin