Skip to content

Commit 37ba9ad

Browse files
Add Vite polyfills option
1 parent f9216b2 commit 37ba9ad

3 files changed

Lines changed: 92 additions & 0 deletions

File tree

integrations/vite/index.test.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1216,6 +1216,64 @@ test(
12161216
},
12171217
)
12181218

1219+
test(
1220+
'polyfills option: disabled',
1221+
{
1222+
fs: {
1223+
'package.json': txt`
1224+
{
1225+
"type": "module",
1226+
"dependencies": {
1227+
"@tailwindcss/vite": "workspace:^",
1228+
"tailwindcss": "workspace:^"
1229+
},
1230+
"devDependencies": {
1231+
"vite": "^7"
1232+
}
1233+
}
1234+
`,
1235+
'vite.config.ts': ts`
1236+
import tailwindcss from '@tailwindcss/vite'
1237+
import { Polyfills } from 'tailwindcss'
1238+
import { defineConfig } from 'vite'
1239+
1240+
export default defineConfig({
1241+
build: { cssMinify: false },
1242+
plugins: [tailwindcss({ optimize: false, polyfills: Polyfills.None })],
1243+
})
1244+
`,
1245+
'index.html': html`
1246+
<head>
1247+
<link rel="stylesheet" href="./src/index.css" />
1248+
</head>
1249+
<body>
1250+
<div class="underline">Hello, world!</div>
1251+
</body>
1252+
`,
1253+
'src/index.css': css`
1254+
@import 'tailwindcss/utilities';
1255+
1256+
@property --no-inherit-value {
1257+
syntax: '*';
1258+
inherits: false;
1259+
initial-value: red;
1260+
}
1261+
`,
1262+
},
1263+
},
1264+
async ({ exec, expect, fs }) => {
1265+
await exec('pnpm vite build')
1266+
1267+
let files = await fs.glob('dist/**/*.css')
1268+
expect(files).toHaveLength(1)
1269+
let [filename] = files[0]
1270+
1271+
let content = await fs.read(filename)
1272+
expect(content).toContain('@property --no-inherit-value')
1273+
expect(content).not.toContain('@layer properties')
1274+
},
1275+
)
1276+
12191277
test(
12201278
`the plugin works when using the environment API`,
12211279
{

packages/@tailwindcss-vite/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,22 @@ export default defineConfig({
7474
],
7575
})
7676
```
77+
78+
## Controlling Tailwind polyfills
79+
80+
By default, Tailwind emits all supported CSS polyfills. You can customize this behavior using the `polyfills` option:
81+
82+
```js
83+
import tailwindcss from '@tailwindcss/vite'
84+
import { defineConfig } from 'vite'
85+
import { Polyfills } from 'tailwindcss'
86+
87+
export default defineConfig({
88+
plugins: [
89+
tailwindcss({
90+
// Disable all Tailwind polyfills
91+
polyfills: Polyfills.None,
92+
}),
93+
],
94+
})
95+
```

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Instrumentation,
66
normalizePath,
77
optimize,
8+
Polyfills,
89
toSourceMap,
910
} from '@tailwindcss/node'
1011
import { clearRequireCache } from '@tailwindcss/node/require-cache'
@@ -27,6 +28,13 @@ const COMMON_JS_PROXY_RE = /\?commonjs-proxy/
2728
const INLINE_STYLE_ID_RE = /[?&]index=\d+\.css$/
2829

2930
export type PluginOptions = {
31+
/**
32+
* Control CSS polyfills emitted by Tailwind.
33+
*
34+
* Defaults to `Polyfills.All`.
35+
*/
36+
polyfills?: Polyfills
37+
3038
/**
3139
* Optimize and minify the output CSS.
3240
*/
@@ -177,6 +185,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
177185
// Currently, Vite only supports CSS source maps in development and they
178186
// are off by default. Check to see if we need them or not.
179187
config?.css.devSourcemap ?? false,
188+
opts.polyfills ?? Polyfills.All,
180189
customCssResolver,
181190
customJsResolver,
182191
)
@@ -443,6 +452,7 @@ class Root {
443452
private base: string,
444453

445454
private enableSourceMaps: boolean,
455+
private polyfills: Polyfills,
446456
private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
447457
private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
448458
) {}
@@ -492,12 +502,17 @@ class Root {
492502

493503
this.addBuildDependency(idToPath(inputPath))
494504

505+
// CSS Modules cannot safely receive the `@property` fallback polyfill
506+
// because it emits global `*` rules, which Vite treats as non-pure.
495507
DEBUG && I.start('Setup compiler')
496508
let addBuildDependenciesPromises: Promise<void>[] = []
497509
this.compiler = await compile(content, {
498510
from: this.enableSourceMaps ? this.id : undefined,
499511
base: inputBase,
500512
shouldRewriteUrls: true,
513+
polyfills: inputPath.endsWith('.module.css')
514+
? this.polyfills & ~Polyfills.AtProperty
515+
: this.polyfills,
501516
onDependency: (path) => {
502517
addWatchFile(path)
503518
addBuildDependenciesPromises.push(this.addBuildDependency(path))

0 commit comments

Comments
 (0)