Merge branch 'main' into feat/bump-vitest

Author: thecrypticace

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Substitute `@variant` inside legacy JS APIs ([#19263](https://github.com/tailwindlabs/tailwindcss/pull/19263))
+
 ### Added
 
 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))

Cargo.lock

@@ -28,8 +28,8 @@
   "browser": "tailwindcss-oxide.wasi-browser.js",
   "dependencies": {
     "@napi-rs/wasm-runtime": "^1.0.7",
-    "@emnapi/core": "^1.5.0",
-    "@emnapi/runtime": "^1.5.0",
+    "@emnapi/core": "^1.6.0",
+    "@emnapi/runtime": "^1.6.0",
     "@tybys/wasm-util": "^0.10.1",
     "@emnapi/wasi-threads": "^1.1.0",
     "tslib": "^2.4.0"

crates/node/npm/wasm32-wasi/package.json

@@ -33,9 +33,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@napi-rs/cli": "^3.3.0",
+    "@napi-rs/cli": "^3.4.1",
     "@napi-rs/wasm-runtime": "^1.0.7",
-    "emnapi": "1.5.0"
+    "emnapi": "1.6.0"
   },
   "engines": {
     "node": ">= 10"

crates/node/package.json

@@ -9,7 +9,6 @@ globwalk = "0.9.1"
 log = "0.4.22"
 rayon = "1.10.0"
 fxhash = { package = "rustc-hash", version = "2.1.1" }
-crossbeam = "0.8.4"
 tracing = { version = "0.1.40", features = [] }
 tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
 walkdir = "2.5.0"

crates/oxide/Cargo.toml

@@ -41,7 +41,7 @@
     "enhanced-resolve": "^5.18.3",
     "jiti": "^2.6.1",
     "lightningcss": "catalog:",
-    "magic-string": "^0.30.19",
+    "magic-string": "^0.30.21",
     "source-map-js": "^1.2.1",
     "tailwindcss": "workspace:*"
   }

packages/@tailwindcss-node/package.json

@@ -132,7 +132,7 @@
     "@types/node": "catalog:",
     "dedent": "1.7.0",
     "lightningcss": "catalog:",
-    "magic-string": "^0.30.19",
+    "magic-string": "^0.30.21",
     "source-map-js": "^1.2.1"
   }
 }

packages/tailwindcss/package.json

@@ -23,7 +23,7 @@ import { Theme, ThemeOptions, type ThemeKey } from './theme'
 import { Utilities, createUtilities, withAlpha } from './utilities'
 import { DefaultMap } from './utils/default-map'
 import { extractUsedVariables } from './utils/variables'
-import { Variants, createVariants } from './variants'
+import { Variants, createVariants, substituteAtVariant } from './variants'
 
 export const enum CompileAstFlags {
   None = 0,
@@ -77,15 +77,21 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
     return new DefaultMap<Candidate>((candidate) => {
       let ast = compileAstNodes(candidate, designSystem, flags)
 
-      // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
-      // properties (`[--my-var:theme(--color-red-500)]`) can contain function
-      // calls so we need evaluate any functions we find there that weren't in
-      // the source CSS.
       try {
+        // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
+        // properties (`[--my-var:theme(--color-red-500)]`) can contain function
+        // calls so we need evaluate any functions we find there that weren't in
+        // the source CSS.
         substituteFunctions(
           ast.map(({ node }) => node),
           designSystem,
         )
+
+        // JS plugins might contain an `@variant` inside a generated utility
+        substituteAtVariant(
+          ast.map(({ node }) => node),
+          designSystem,
+        )
       } catch (err) {
         // If substitution fails then the candidate likely contains a call to
         // `theme()` that is invalid which may be because of incorrect usage,

packages/tailwindcss/src/design-system.ts

@@ -4665,6 +4665,60 @@ test('addBase', async () => {
   `)
 })
 
+test('JS APIs support @variant', async () => {
+  let { build } = await compile(
+    css`
+      @plugin "my-plugin";
+      @layer base, utilities;
+      @layer utilities {
+        @tailwind utilities;
+      }
+    `,
+    {
+      loadModule: async () => ({
+        path: '',
+        base: '/root',
+        module: ({ addBase, addUtilities, matchUtilities }: PluginAPI) => {
+          addBase({ body: { '@variant dark': { color: 'red' } } })
+          addUtilities({ '.foo': { '@variant dark': { '--foo': 'foo' } } })
+          matchUtilities(
+            { bar: (value) => ({ '@variant dark': { '--bar': value } }) },
+            { values: { one: '1' } },
+          )
+        },
+      }),
+    },
+  )
+
+  let compiled = build(['underline', 'foo', 'bar-one'])
+
+  expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+    "@layer base {
+      @media (prefers-color-scheme: dark) {
+        body {
+          color: red;
+        }
+      }
+    }
+
+    @layer utilities {
+      .underline {
+        text-decoration-line: underline;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .bar-one {
+          --bar: 1;
+        }
+
+        .foo {
+          --foo: foo;
+        }
+      }
+    }"
+  `)
+})
+
 it("should error when `layer(…)` is used, but it's not the first param", async () => {
   await expect(async () => {
     return await compileCss(

packages/tailwindcss/src/index.test.ts

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@types/node": "catalog:",
     "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
+    "@types/react-dom": "^19.2.2",
     "eslint": "^9.37.0",
     "eslint-config-next": "^15.5.6",
     "typescript": "^5.5.4"