Merge branch 'main' into fix/vite-html-style-blocks

RobinMalfait · web-flow · commit 317115bd2ce2 · 2025-01-30T17:14:09.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
+- Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
+- Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072))
+- Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
+- Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
 - Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
 
 ## [4.0.1] - 2025-01-29
diff --git a/integrations/vite/solidstart.test.ts b/integrations/vite/solidstart.test.ts
@@ -0,0 +1,108 @@
+import { candidate, css, fetchStyles, js, json, retryAssertion, test, ts } from '../utils'
+
+const WORKSPACE = {
+  'package.json': json`
+    {
+      "type": "module",
+      "dependencies": {
+        "@solidjs/start": "^1",
+        "solid-js": "^1",
+        "vinxi": "^0",
+        "@tailwindcss/vite": "workspace:^",
+        "tailwindcss": "workspace:^"
+      }
+    }
+  `,
+  'jsconfig.json': json`
+    {
+      "compilerOptions": {
+        "jsx": "preserve",
+        "jsxImportSource": "solid-js"
+      }
+    }
+  `,
+  'app.config.js': ts`
+    import { defineConfig } from '@solidjs/start/config'
+    import tailwindcss from '@tailwindcss/vite'
+
+    export default defineConfig({
+      vite: {
+        plugins: [tailwindcss()],
+      },
+    })
+  `,
+  'src/entry-server.jsx': js`
+    // @refresh reload
+    import { createHandler, StartServer } from '@solidjs/start/server'
+
+    export default createHandler(() => (
+      <StartServer
+        document={({ assets, children, scripts }) => (
+          <html lang="en">
+            <head>{assets}</head>
+            <body>
+              <div id="app">{children}</div>
+              {scripts}
+            </body>
+          </html>
+        )}
+      />
+    ))
+  `,
+  'src/entry-client.jsx': js`
+    // @refresh reload
+    import { mount, StartClient } from '@solidjs/start/client'
+
+    mount(() => <StartClient />, document.getElementById('app'))
+  `,
+  'src/app.jsx': js`
+    import './app.css'
+    export default function App() {
+      return <h1 class="underline">Hello world!</h1>
+    }
+  `,
+  'src/app.css': css`@import 'tailwindcss';`,
+}
+
+test(
+  'dev mode',
+  {
+    fs: WORKSPACE,
+  },
+  async ({ fs, spawn, expect }) => {
+    let process = await spawn('pnpm vinxi dev', {
+      env: {
+        TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT
+        NODE_ENV: 'development',
+      },
+    })
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let css = await fetchStyles(url)
+      expect(css).toContain(candidate`underline`)
+    })
+
+    await retryAssertion(async () => {
+      await fs.write(
+        'src/app.jsx',
+        js`
+          import './app.css'
+          export default function App() {
+            return <h1 class="underline font-bold">Hello world!</h1>
+          }
+        `,
+      )
+
+      let css = await fetchStyles(url)
+      expect(css).toContain(candidate`underline`)
+      expect(css).toContain(candidate`font-bold`)
+    })
+  },
+)
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -248,6 +248,56 @@ test('bail early when Tailwind is not used', async () => {
   `)
 })
 
+test('handle CSS when only using a `@reference` (we should not bail early)', async () => {
+  let processor = postcss([
+    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
+  ])
+
+  let result = await processor.process(
+    css`
+      @reference "tailwindcss/theme.css";
+
+      .foo {
+        @variant md {
+          bar: baz;
+        }
+      }
+    `,
+    { from: inputCssFilePath() },
+  )
+
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    "@media (width >= 48rem) {
+      .foo {
+        bar: baz;
+      }
+    }"
+  `)
+})
+
+test('handle CSS when using a `@variant` using variants that do not rely on the `@theme`', async () => {
+  let processor = postcss([
+    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
+  ])
+
+  let result = await processor.process(
+    css`
+      .foo {
+        @variant data-is-hoverable {
+          bar: baz;
+        }
+      }
+    `,
+    { from: inputCssFilePath() },
+  )
+
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    ".foo[data-is-hoverable] {
+      bar: baz;
+    }"
+  `)
+})
+
 test('runs `Once` plugins in the right order', async () => {
   let before = ''
   let after = ''
diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts
@@ -77,7 +77,9 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
             root.walkAtRules((node) => {
               if (
                 node.name === 'import' ||
+                node.name === 'reference' ||
                 node.name === 'theme' ||
+                node.name === 'variant' ||
                 node.name === 'config' ||
                 node.name === 'plugin' ||
                 node.name === 'apply'
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -64,7 +64,7 @@ export default function tailwindcss(): Plugin[] {
     )
   })
 
-  function scanFile(id: string, content: string, extension: string, isSSR: boolean) {
+  function scanFile(id: string, content: string, extension: string) {
     for (let dependency of IGNORED_DEPENDENCIES) {
       // We validated that Vite IDs always use posix style path separators, even on Windows.
       // In dev build, Vite precompiles dependencies
@@ -84,26 +84,16 @@ export default function tailwindcss(): Plugin[] {
     }
 
     if (updated) {
-      invalidateAllRoots(isSSR)
+      invalidateAllRoots()
     }
   }
 
-  function invalidateAllRoots(isSSR: boolean) {
+  function invalidateAllRoots() {
     for (let server of servers) {
       let updates: Update[] = []
-      for (let [id, root] of roots.entries()) {
+      for (let [id] of roots.entries()) {
         let module = server.moduleGraph.getModuleById(id)
-        if (!module) {
-          // Note: Removing this during SSR is not safe and will produce
-          // inconsistent results based on the timing of the removal and
-          // the order / timing of transforms.
-          if (!isSSR) {
-            // It is safe to remove the item here since we're iterating on a copy
-            // of the keys.
-            roots.delete(id)
-          }
-          continue
-        }
+        if (!module) continue
 
         roots.get(id).requiresRebuild = false
         server.moduleGraph.invalidateModule(module)
@@ -114,7 +104,6 @@ export default function tailwindcss(): Plugin[] {
           timestamp: Date.now(),
         })
       }
-
       if (updates.length > 0) {
         server.hot.send({ type: 'update', updates })
       }
@@ -211,12 +200,15 @@ export default function tailwindcss(): Plugin[] {
 
       // Scan all non-CSS files for candidates
       transformIndexHtml(html, { path }) {
-        scanFile(path, html, 'html', isSSR)
+        // SolidStart emits HTML chunks with an undefined path and the html content of `\`.
+        if (!path) return
+
+        scanFile(path, html, 'html')
       },
       transform(src, id, options) {
         let extension = getExtension(id)
         if (isPotentialCssRootFile(id)) return
-        scanFile(id, src, extension, options?.ssr ?? false)
+        scanFile(id, src, extension)
       },
     },
 
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklab, ;
+      --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklab, ;
+      --tw-gradient-position: to bottom left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklab, ;
+      --tw-gradient-position: to bottom right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklab, ;
+      --tw-gradient-position: to left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklab, ;
+      --tw-gradient-position: to top in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklab, ;
+      --tw-gradient-position: to top left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklab, ;
+      --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     ['tl', 'top left'],
   ]) {
     designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklab,`),
+      decl('--tw-gradient-position', `to ${direction} in oklab`),
       decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
     ])
   }
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {`
`14`	`14`	`['tl', 'top left'],`
`15`	`15`	`]) {`
`16`	`16`	designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
`17`		- decl('--tw-gradient-position', `to ${direction} in oklab,`),
	`17`	+ decl('--tw-gradient-position', `to ${direction} in oklab`),
`18`	`18`	decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
`19`	`19`	`])`
`20`	`20`	`}`