Document colorMixPolyfill in the package README; assert the @supports wrapper in the default-arm test

This commit is contained in:
Ben Maurer 2026-08-29 23:02:23 -07:00
parent b92b9f7bdd
commit 2cd26db975
2 changed files with 20 additions and 1 deletions

View file

@ -88,6 +88,25 @@ export default {
}
```
### Enabling or disabling the `color-mix(…)` polyfill
For browsers without `color-mix()` support (Safari < 16.2), the plugin emits every `color-mix(…)` declaration twice: a plain fallback declaration, plus the original gated behind `@supports (color: color-mix(in lab, red, red))`. This is enabled by default.
If every browser you support has `color-mix()`, you can set `colorMixPolyfill` to `false` to drop the duplicated declarations from the output:
```js
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
// Disable the `color-mix(…)` fallbacks
colorMixPolyfill: false,
}),
],
}
```
### Enabling or disabling `url(…)` rewriting
Our PostCSS plugin can rewrite `url(…)`s for you since it also handles `@import` (no `postcss-import` is needed). This feature is enabled by default.

View file

@ -111,7 +111,7 @@ test('`color-mix(…)` fallbacks can be disabled', async () => {
let withPolyfill = await postcss([
tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
]).process(input, { from: inputCssFilePath() })
expect(withPolyfill.css).toContain('color-mix(in lab, red, red)')
expect(withPolyfill.css).toContain('@supports (color: color-mix(in lab, red, red))')
// Disabled: the declaration ships once, and nothing else changes.
let withoutPolyfill = await postcss([