Merge 21bdf8507b into fa81d697fe

integrations/vite/index.test.ts

@@ -1568,6 +1568,64 @@ test(
   },
 )
 
+test(
+  'polyfills option: disabled',
+  {
+    fs: {
+      'package.json': txt`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^7"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { Polyfills } from 'tailwindcss'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss({ optimize: false, polyfills: Polyfills.None })],
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/utilities';
+
+        @property --no-inherit-value {
+          syntax: '*';
+          inherits: false;
+          initial-value: red;
+        }
+      `,
+    },
+  },
+  async ({ exec, expect, fs }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    let content = await fs.read(filename)
+    expect(content).toContain('@property --no-inherit-value')
+    expect(content).not.toContain('@layer properties')
+  },
+)
+
 test(
   `the plugin works when using the environment API`,
   {

packages/@tailwindcss-vite/README.md

@@ -74,3 +74,22 @@ export default defineConfig({
   ],
 })
 ```
+
+## Controlling Tailwind polyfills
+
+By default, Tailwind emits all supported CSS polyfills. You can customize this behavior using the `polyfills` option:
+
+```js
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+import { Polyfills } from 'tailwindcss'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss({
+      // Disable all Tailwind polyfills
+      polyfills: Polyfills.None,
+    }),
+  ],
+})
+```

packages/@tailwindcss-vite/src/index.ts

@@ -5,6 +5,7 @@ import {
   Instrumentation,
   normalizePath,
   optimize,
+  Polyfills,
   toSourceMap,
 } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
@@ -20,6 +21,13 @@ const COMMON_JS_PROXY_RE = /\?commonjs-proxy/
 const INLINE_STYLE_ID_RE = /[?&]index=\d+\.css$/
 
 export type PluginOptions = {
+  /**
+   * Control CSS polyfills emitted by Tailwind.
+   *
+   * Defaults to `Polyfills.All`.
+   */
+  polyfills?: Polyfills
+
   /**
    * Optimize and minify the output CSS.
    */
@@ -169,6 +177,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
       // Currently, Vite only supports CSS source maps in development and they
       // are off by default. Check to see if we need them or not.
       config?.css.devSourcemap ?? false,
+      opts.polyfills ?? Polyfills.All,
       customCssResolver,
       customJsResolver,
     )
@@ -352,6 +361,7 @@ class Root {
     private base: string,
 
     private enableSourceMaps: boolean,
+    private polyfills: Polyfills,
     private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
     private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
   ) {}
@@ -397,12 +407,17 @@ class Root {
 
       this.addBuildDependency(idToPath(inputPath))
 
+      // CSS Modules cannot safely receive the `@property` fallback polyfill
+      // because it emits global `*` rules, which Vite treats as non-pure.
       DEBUG && I.start('Setup compiler')
       let addBuildDependenciesPromises: Promise<void>[] = []
       this.compiler = await compile(content, {
         from: this.enableSourceMaps ? this.id : undefined,
         base: inputBase,
         shouldRewriteUrls: true,
+        polyfills: inputPath.endsWith('.module.css')
+          ? this.polyfills & ~Polyfills.AtProperty
+          : this.polyfills,
         onDependency: (path) => {
           addWatchFile(path)
           addBuildDependenciesPromises.push(this.addBuildDependency(path))