tailwindcss 3.4.0 → 3.4.2

package/lib/lib/setupContextUtils.js

@@ -762,13 +762,29 @@ function resolvePlugins(context, root) {
         _corePlugins.variantPlugins["supportsVariants"],
         _corePlugins.variantPlugins["reducedMotionVariants"],
         _corePlugins.variantPlugins["prefersContrastVariants"],
-        _corePlugins.variantPlugins["printVariant"],
         _corePlugins.variantPlugins["screenVariants"],
         _corePlugins.variantPlugins["orientationVariants"],
         _corePlugins.variantPlugins["directionVariants"],
         _corePlugins.variantPlugins["darkVariants"],
-        _corePlugins.variantPlugins["forcedColorsVariants"]
+        _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,
@@ -1005,6 +1021,10 @@ function registerPlugins(plugins, context) {
     };
     // Generate a list of available variants with meta information of the type of variant.
     context.getVariants = function getVariants() {
+        // We use a unique, random ID for candidate names to avoid conflicts
+        // We can't use characters like `_`, `:`, `@` or `.` because they might
+        // be used as a separator
+        let id = Math.random().toString(36).substring(7).toUpperCase();
         let result = [];
         for (let [name, options] of context.variantOptions.entries()){
             if (options.variantInfo === VARIANT_INFO.Base) continue;
@@ -1015,7 +1035,7 @@ function registerPlugins(plugins, context) {
                 values: Object.keys((_options_values = options.values) !== null && _options_values !== void 0 ? _options_values : {}),
                 hasDash: name !== "@",
                 selectors ({ modifier , value  } = {}) {
-                    let candidate = "__TAILWIND_PLACEHOLDER__";
+                    let candidate = `TAILWINDPLACEHOLDER${id}`;
                     let rule = _postcss.default.rule({
                         selector: `.${candidate}`
                     });

package/lib/lib/sharedState.js

@@ -34,20 +34,12 @@ _export(exports, {
         return resolveDebug;
     }
 });
-const _packagejson = /*#__PURE__*/ _interop_require_default(require("../../package.json"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const env = typeof process !== "undefined" ? {
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: resolveDebug(process.env.DEBUG),
-    ENGINE: _packagejson.default.tailwindcss.engine
+    DEBUG: resolveDebug(process.env.DEBUG)
 } : {
     NODE_ENV: "production",
-    DEBUG: false,
-    ENGINE: _packagejson.default.tailwindcss.engine
+    DEBUG: false
 };
 const contextMap = new Map();
 const configContextMap = new Map();

package/lib/plugin.js

@@ -37,56 +37,6 @@ module.exports = function tailwindcss(configOrPath) {
                 }
                 await (0, _processTailwindFeatures.default)(context)(root, result);
             },
-            false && function lightningCssPlugin(_root, result) {
-                let postcss = require("postcss");
-                let lightningcss = require("lightningcss");
-                let browserslist = require("browserslist");
-                try {
-                    let transformed = lightningcss.transform({
-                        filename: result.opts.from,
-                        code: Buffer.from(result.root.toString()),
-                        minify: false,
-                        sourceMap: !!result.map,
-                        inputSourceMap: result.map ? result.map.toString() : undefined,
-                        targets: typeof process !== "undefined" && process.env.JEST_WORKER_ID ? {
-                            chrome: 106 << 16
-                        } : lightningcss.browserslistToTargets(browserslist(require("../package.json").browserslist)),
-                        drafts: {
-                            nesting: true,
-                            customMedia: true
-                        }
-                    });
-                    var _result_map;
-                    result.map = Object.assign((_result_map = result.map) !== null && _result_map !== void 0 ? _result_map : {}, {
-                        toJSON () {
-                            return transformed.map.toJSON();
-                        },
-                        toString () {
-                            return transformed.map.toString();
-                        }
-                    });
-                    result.root = postcss.parse(transformed.code.toString("utf8"));
-                } catch (err) {
-                    if (typeof process !== "undefined" && process.env.JEST_WORKER_ID) {
-                        let lines = err.source.split("\n");
-                        err = new Error([
-                            "Error formatting using Lightning CSS:",
-                            "",
-                            ...[
-                                "```css",
-                                ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
-                                " ".repeat(err.loc.column - 1) + "^-- " + err.toString(),
-                                ...lines.slice(err.loc.line, err.loc.line + 2),
-                                "```"
-                            ]
-                        ].join("\n"));
-                    }
-                    if (Error.captureStackTrace) {
-                        Error.captureStackTrace(err, lightningCssPlugin);
-                    }
-                    throw err;
-                }
-            },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd("JIT TOTAL");
                 console.log("\n");

package/lib/processTailwindFeatures.js

@@ -17,7 +17,6 @@ const _resolveDefaultsAtRules = /*#__PURE__*/ _interop_require_default(require("
 const _collapseAdjacentRules = /*#__PURE__*/ _interop_require_default(require("./lib/collapseAdjacentRules"));
 const _collapseDuplicateDeclarations = /*#__PURE__*/ _interop_require_default(require("./lib/collapseDuplicateDeclarations"));
 const _partitionApplyAtRules = /*#__PURE__*/ _interop_require_default(require("./lib/partitionApplyAtRules"));
-const _detectNesting = /*#__PURE__*/ _interop_require_default(require("./lib/detectNesting"));
 const _setupContextUtils = require("./lib/setupContextUtils");
 const _featureFlags = require("./featureFlags");
 function _interop_require_default(obj) {
@@ -28,7 +27,6 @@ function _interop_require_default(obj) {
 function processTailwindFeatures(setupContext) {
     return async function(root, result) {
         let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives.default)(root);
-        (0, _detectNesting.default)()(root, result);
         // Partition apply rules that are found in the css
         // itself.
         (0, _partitionApplyAtRules.default)()(root, result);

package/lib/util/dataTypes.js

@@ -140,7 +140,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 = "";
@@ -186,6 +192,10 @@ function normalize(value, context = null, isRoot = true) {
                 result += consumeUntil([
                     ")"
                 ]);
+            } else if (peek("[")) {
+                result += consumeUntil([
+                    "]"
+                ]);
             } else if ([
                 "+",
                 "-",
@@ -390,7 +400,7 @@ let absoluteSizes = new Set([
     "medium",
     "large",
     "x-large",
-    "x-large",
+    "xx-large",
     "xxx-large"
 ]);
 function absoluteSize(value) {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -12,12 +12,9 @@
     "tailwind": "lib/cli.js",
     "tailwindcss": "lib/cli.js"
   },
-  "tailwindcss": {
-    "engine": "stable"
-  },
   "scripts": {
     "prebuild": "npm run generate && rimraf lib",
-    "build": "swc src --out-dir lib --copy-files --config jsc.transform.optimizer.globals.vars.__OXIDE__='\"false\"'",
+    "build": "swc src --out-dir lib --copy-files",
     "postbuild": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js --define:process.env.CSS_TRANSFORMER_WASM=false",
     "rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js",
     "style": "eslint .",
@@ -54,13 +51,13 @@
     "browserslist": "^4.21.5",
     "concurrently": "^8.0.1",
     "cssnano": "^6.0.0",
-    "esbuild": "^0.17.18",
+    "esbuild": "^0.20.2",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.6.0",
     "jest-diff": "^29.6.0",
-    "lightningcss": "1.18.0",
+    "lightningcss": "1.24.1",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",
     "source-map-js": "^1.0.2",
@@ -75,7 +72,7 @@
     "fast-glob": "^3.3.0",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
-    "jiti": "^1.19.1",
+    "jiti": "^1.21.0",
     "lilconfig": "^2.1.0",
     "micromatch": "^4.0.5",
     "normalize-path": "^3.0.0",