Document colorMixPolyfill in the package README; assert the @supports wrapper in the default-arm test
This commit is contained in:
parent
b92b9f7bdd
commit
2cd26db975
2 changed files with 20 additions and 1 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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([
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue