WIP2
This commit is contained in:
Philipp Spiess
parent
bf2e96163b
commit
449796191e
17 changed files with 721 additions and 1223 deletions
|
|
@ -446,7 +446,7 @@ function optimizeCss(
|
|||
nonStandard: {
|
||||
deepSelectorCombinator: true,
|
||||
},
|
||||
include: Features.Nesting | Features.MediaQueries,
|
||||
include: Features.Nesting | Features.MediaRangeSyntax,
|
||||
exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
|
||||
targets: {
|
||||
safari: (16 << 16) | (4 << 8),
|
||||
|
|
|
|||
|
|
@ -164,10 +164,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
|
|||
}
|
||||
|
||||
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
::placeholder {
|
||||
color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
::placeholder {
|
||||
color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,17 +259,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
|
|||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.text-black\\/50 {
|
||||
color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
||||
}
|
||||
.text-black\\/50 {
|
||||
color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
@media (width >= 96rem) {
|
||||
@media (min-width: 96rem) {
|
||||
.\\32 xl\\:font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
|
|||
)
|
||||
|
||||
expect(result.css.trim()).toMatchInlineSnapshot(`
|
||||
"@media (width >= 48rem) {
|
||||
"@media (min-width: 48rem) {
|
||||
.foo {
|
||||
bar: baz;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ export type PluginOptions = {
|
|||
function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
|
||||
let base = opts.base ?? process.cwd()
|
||||
let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'
|
||||
console.log({ opts, flag: process.env.NODE_ENV })
|
||||
|
||||
return {
|
||||
postcssPlugin: '@tailwindcss/postcss',
|
||||
|
|
@ -326,7 +325,7 @@ function optimizeCss(
|
|||
LightningCssFeatures.DirSelector |
|
||||
LightningCssFeatures.LightDark,
|
||||
targets: {
|
||||
safari: (15 << 16) | (4 << 8),
|
||||
safari: (16 << 16) | (4 << 8),
|
||||
ios_saf: (16 << 16) | (4 << 8),
|
||||
firefox: 128 << 16,
|
||||
chrome: 111 << 16,
|
||||
|
|
@ -335,14 +334,9 @@ function optimizeCss(
|
|||
}).code
|
||||
}
|
||||
|
||||
let out = optimize(optimize(Buffer.from(input))).toString()
|
||||
console.log({ out })
|
||||
|
||||
out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ')
|
||||
|
||||
// Running Lightning CSS twice to ensure that adjacent rules are merged after
|
||||
// nesting is applied. This creates a more optimized output.
|
||||
return out
|
||||
return optimize(optimize(Buffer.from(input))).toString()
|
||||
}
|
||||
|
||||
export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ function optimizeCss(
|
|||
nonStandard: {
|
||||
deepSelectorCombinator: true,
|
||||
},
|
||||
include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries,
|
||||
include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax,
|
||||
exclude:
|
||||
LightningCssFeatures.LogicalProperties |
|
||||
LightningCssFeatures.DirSelector |
|
||||
|
|
|
|||
|
|
@ -79,10 +79,8 @@ exports[`border-* 1`] = `
|
|||
border-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-\\[\\#0088cc\\]\\/50 {
|
||||
border-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-\\[\\#0088cc\\]\\/50 {
|
||||
border-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -105,10 +103,8 @@ exports[`border-* 1`] = `
|
|||
border-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-current\\/50 {
|
||||
border-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-current\\/50 {
|
||||
border-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-inherit {
|
||||
|
|
@ -131,10 +127,8 @@ exports[`border-* 1`] = `
|
|||
border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-red-500\\/50 {
|
||||
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-red-500\\/50 {
|
||||
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
|
|
@ -227,10 +221,8 @@ exports[`border-b-* 1`] = `
|
|||
border-bottom-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-b-\\[\\#0088cc\\]\\/50 {
|
||||
border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-b-\\[\\#0088cc\\]\\/50 {
|
||||
border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-b-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -253,10 +245,8 @@ exports[`border-b-* 1`] = `
|
|||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-b-current\\/50 {
|
||||
border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-b-current\\/50 {
|
||||
border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-b-inherit {
|
||||
|
|
@ -279,10 +269,8 @@ exports[`border-b-* 1`] = `
|
|||
border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-b-red-500\\/50 {
|
||||
border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-b-red-500\\/50 {
|
||||
border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-b-transparent {
|
||||
|
|
@ -375,10 +363,8 @@ exports[`border-e-* 1`] = `
|
|||
border-inline-end-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-e-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-e-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-e-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -401,10 +387,8 @@ exports[`border-e-* 1`] = `
|
|||
border-inline-end-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-e-current\\/50 {
|
||||
border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-e-current\\/50 {
|
||||
border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-e-inherit {
|
||||
|
|
@ -427,10 +411,8 @@ exports[`border-e-* 1`] = `
|
|||
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-e-red-500\\/50 {
|
||||
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-e-red-500\\/50 {
|
||||
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-e-transparent {
|
||||
|
|
@ -523,10 +505,8 @@ exports[`border-l-* 1`] = `
|
|||
border-left-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-l-\\[\\#0088cc\\]\\/50 {
|
||||
border-left-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-l-\\[\\#0088cc\\]\\/50 {
|
||||
border-left-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-l-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -549,10 +529,8 @@ exports[`border-l-* 1`] = `
|
|||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-l-current\\/50 {
|
||||
border-left-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-l-current\\/50 {
|
||||
border-left-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-l-inherit {
|
||||
|
|
@ -575,10 +553,8 @@ exports[`border-l-* 1`] = `
|
|||
border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-l-red-500\\/50 {
|
||||
border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-l-red-500\\/50 {
|
||||
border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-l-transparent {
|
||||
|
|
@ -671,10 +647,8 @@ exports[`border-r-* 1`] = `
|
|||
border-right-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-r-\\[\\#0088cc\\]\\/50 {
|
||||
border-right-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-r-\\[\\#0088cc\\]\\/50 {
|
||||
border-right-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-r-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -697,10 +671,8 @@ exports[`border-r-* 1`] = `
|
|||
border-right-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-r-current\\/50 {
|
||||
border-right-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-r-current\\/50 {
|
||||
border-right-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-r-inherit {
|
||||
|
|
@ -723,10 +695,8 @@ exports[`border-r-* 1`] = `
|
|||
border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-r-red-500\\/50 {
|
||||
border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-r-red-500\\/50 {
|
||||
border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-r-transparent {
|
||||
|
|
@ -819,10 +789,8 @@ exports[`border-s-* 1`] = `
|
|||
border-inline-start-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-s-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-s-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-s-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -845,10 +813,8 @@ exports[`border-s-* 1`] = `
|
|||
border-inline-start-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-s-current\\/50 {
|
||||
border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-s-current\\/50 {
|
||||
border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-s-inherit {
|
||||
|
|
@ -871,10 +837,8 @@ exports[`border-s-* 1`] = `
|
|||
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-s-red-500\\/50 {
|
||||
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-s-red-500\\/50 {
|
||||
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-s-transparent {
|
||||
|
|
@ -967,10 +931,8 @@ exports[`border-t-* 1`] = `
|
|||
border-top-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-t-\\[\\#0088cc\\]\\/50 {
|
||||
border-top-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-t-\\[\\#0088cc\\]\\/50 {
|
||||
border-top-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-t-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -993,10 +955,8 @@ exports[`border-t-* 1`] = `
|
|||
border-top-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-t-current\\/50 {
|
||||
border-top-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-t-current\\/50 {
|
||||
border-top-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-t-inherit {
|
||||
|
|
@ -1019,10 +979,8 @@ exports[`border-t-* 1`] = `
|
|||
border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-t-red-500\\/50 {
|
||||
border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-t-red-500\\/50 {
|
||||
border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-t-transparent {
|
||||
|
|
@ -1115,10 +1073,8 @@ exports[`border-x-* 1`] = `
|
|||
border-inline-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-x-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-x-\\[\\#0088cc\\]\\/50 {
|
||||
border-inline-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-x-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -1141,10 +1097,8 @@ exports[`border-x-* 1`] = `
|
|||
border-inline-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-x-current\\/50 {
|
||||
border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-x-current\\/50 {
|
||||
border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-x-inherit {
|
||||
|
|
@ -1167,10 +1121,8 @@ exports[`border-x-* 1`] = `
|
|||
border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-x-red-500\\/50 {
|
||||
border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-x-red-500\\/50 {
|
||||
border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-x-transparent {
|
||||
|
|
@ -1263,10 +1215,8 @@ exports[`border-y-* 1`] = `
|
|||
border-block-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-y-\\[\\#0088cc\\]\\/50 {
|
||||
border-block-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.border-y-\\[\\#0088cc\\]\\/50 {
|
||||
border-block-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.border-y-\\[color\\:var\\(--my-color\\)\\] {
|
||||
|
|
@ -1289,10 +1239,8 @@ exports[`border-y-* 1`] = `
|
|||
border-block-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-y-current\\/50 {
|
||||
border-block-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
.border-y-current\\/50 {
|
||||
border-block-color: color-mix(in oklab, currentColor 50%, transparent);
|
||||
}
|
||||
|
||||
.border-y-inherit {
|
||||
|
|
@ -1315,10 +1263,8 @@ exports[`border-y-* 1`] = `
|
|||
border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.border-y-red-500\\/50 {
|
||||
border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.border-y-red-500\\/50 {
|
||||
border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-y-transparent {
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@ const css = String.raw
|
|||
it('should pretty print an AST', () => {
|
||||
expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'))))
|
||||
.toMatchInlineSnapshot(`
|
||||
".foo {
|
||||
color: red;
|
||||
&:hover {
|
||||
color: blue;
|
||||
".foo {
|
||||
color: red;
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
`)
|
||||
"
|
||||
`)
|
||||
})
|
||||
|
||||
it('allows the placement of context nodes', () => {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ import { parseAtRule } from './css-parser'
|
|||
import type { DesignSystem } from './design-system'
|
||||
import { Theme, ThemeOptions } from './theme'
|
||||
import { DefaultMap } from './utils/default-map'
|
||||
import { segment } from './utils/segment'
|
||||
import { extractUsedVariables } from './utils/variables'
|
||||
import * as ValueParser from './value-parser'
|
||||
|
||||
const AT_SIGN = 0x40
|
||||
|
||||
|
|
@ -316,50 +314,6 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
|
|||
usedKeyframeNames.add(keyframeName)
|
||||
}
|
||||
|
||||
// "Polyfill" `color-mix(…)`
|
||||
if (node.value.includes('color-mix(')) {
|
||||
let ast = ValueParser.parse(node.value)
|
||||
let didGenerateFallback = false
|
||||
ValueParser.walk(ast, (node, { replaceWith }) => {
|
||||
if (node.kind === 'function' && node.value === 'color-mix') {
|
||||
let args = ValueParser.toCss(node.nodes)
|
||||
let match = args.match(/in \w+, (.+) ?(\d+%), transparent/)
|
||||
if (match) {
|
||||
let color = match[1]
|
||||
let percentage = match[2]
|
||||
|
||||
if (color.startsWith('var(')) {
|
||||
let name = segment(color.slice(4, -1), ',')[0]
|
||||
if (!name) return
|
||||
let resolved = designSystem.theme.resolveValue(null, [name as any])
|
||||
if (!resolved) return
|
||||
color = resolved
|
||||
}
|
||||
|
||||
if (
|
||||
(color.startsWith('oklch(') ||
|
||||
color.startsWith('oklab(') ||
|
||||
color.startsWith('lab(') ||
|
||||
color.startsWith('lch(')) &&
|
||||
color.endsWith(')')
|
||||
) {
|
||||
let fallback = `${color.slice(0, -1)} / ${percentage})`
|
||||
didGenerateFallback = true
|
||||
replaceWith({ kind: 'word', value: fallback })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (didGenerateFallback) {
|
||||
let fallback = { ...node, value: ValueParser.toCss(ast) }
|
||||
let colorMixQuery = rule('@supports (color: color-mix(in srgb, red 0%, red))', [node])
|
||||
|
||||
parent.push(fallback, colorMixQuery)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
parent.push(node)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ test('@supports', async () => {
|
|||
),
|
||||
).resolves.toMatchInlineSnapshot(`
|
||||
"@supports (display: grid) {
|
||||
@media screen and (width <= 400px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -337,7 +337,7 @@ test('@supports', async () => {
|
|||
),
|
||||
).resolves.toMatchInlineSnapshot(`
|
||||
"@supports (not (display: grid)) and (display: flex) {
|
||||
@media screen and (width <= 400px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1156,21 +1156,21 @@ test('utilities must be prefixed', async () => {
|
|||
// Prefixed utilities are generated
|
||||
expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
|
||||
.toMatchInlineSnapshot(`
|
||||
".tw\\:custom {
|
||||
color: red;
|
||||
}
|
||||
.tw\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.tw\\:hover\\:line-through {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: line-through;
|
||||
".tw\\:custom {
|
||||
color: red;
|
||||
}
|
||||
.tw\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.tw\\:hover\\:line-through {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
`)
|
||||
"
|
||||
`)
|
||||
|
||||
// Non-prefixed utilities are ignored
|
||||
compiler = await compile(input, {
|
||||
|
|
|
|||
|
|
@ -243,14 +243,14 @@ describe('theme', async () => {
|
|||
|
||||
expect(compiler.build(['animate-duration-316', 'animate-duration-slow']))
|
||||
.toMatchInlineSnapshot(`
|
||||
".animate-duration-316 {
|
||||
animation-duration: 316ms;
|
||||
}
|
||||
.animate-duration-slow {
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
"
|
||||
`)
|
||||
".animate-duration-316 {
|
||||
animation-duration: 316ms;
|
||||
}
|
||||
.animate-duration-slow {
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
"
|
||||
`)
|
||||
})
|
||||
|
||||
test('plugin theme can have opacity modifiers', async () => {
|
||||
|
|
@ -285,16 +285,10 @@ describe('theme', async () => {
|
|||
|
||||
expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
|
||||
".fraction {
|
||||
color: #ef444 / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, #ef4444 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, #ef4444 50%, transparent);
|
||||
}
|
||||
.percentage {
|
||||
color: #ef444 / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, #ef4444 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, #ef4444 50%, transparent);
|
||||
}
|
||||
.variable {
|
||||
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
|
||||
|
|
@ -365,31 +359,19 @@ describe('theme', async () => {
|
|||
]),
|
||||
).toMatchInlineSnapshot(`
|
||||
".css-fraction {
|
||||
color: rgba(255 0 0 / <alpha-value> / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
|
||||
}
|
||||
.css-percentage {
|
||||
color: rgba(255 0 0 / <alpha-value> / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
|
||||
}
|
||||
.css-variable {
|
||||
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
|
||||
}
|
||||
.js-fraction {
|
||||
color: rgb(255 0 0 / 1 / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
|
||||
}
|
||||
.js-percentage {
|
||||
color: rgb(255 0 0 / 1 / 50%);
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
|
||||
}
|
||||
.js-variable {
|
||||
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
|
||||
|
|
@ -1752,7 +1734,7 @@ describe('addVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width <= 400px) {
|
||||
@media (max-width: 400px) {
|
||||
@supports (font: bold) {
|
||||
.potato\\:flex:large-potato {
|
||||
display: flex;
|
||||
|
|
@ -2071,19 +2053,19 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 500px) {
|
||||
@media (min-width: 500px) {
|
||||
.testmin-\\[500px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 600px) {
|
||||
@media (min-width: 600px) {
|
||||
.testmin-\\[600px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 700px) {
|
||||
@media (min-width: 700px) {
|
||||
.testmin-\\[700px\\]\\:italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -2126,19 +2108,19 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 500px) {
|
||||
@media (min-width: 500px) {
|
||||
.testmin-\\[500px\\]\\:italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 600px) {
|
||||
@media (min-width: 600px) {
|
||||
.testmin-example\\:italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 700px) {
|
||||
@media (min-width: 700px) {
|
||||
.testmin-\\[700px\\]\\:italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -2186,30 +2168,30 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 150px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 150px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 350px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 350px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 300px) {
|
||||
@media (max-width: 300px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 {
|
||||
order: 4;
|
||||
}
|
||||
|
|
@ -2256,8 +2238,8 @@ describe('matchVariant', () => {
|
|||
// Expect :focus to come after :hover
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 200px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 200px) {
|
||||
@media (hover: hover) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover {
|
||||
text-decoration-line: underline;
|
||||
|
|
@ -2310,32 +2292,32 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 200px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 300px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 300px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (width <= 300px) {
|
||||
@media (min-width: 200px) {
|
||||
@media (max-width: 300px) {
|
||||
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
|
||||
order: 4;
|
||||
}
|
||||
|
|
@ -2382,28 +2364,28 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width <= 400px) {
|
||||
@media (width >= 100px) {
|
||||
@media (max-width: 400px) {
|
||||
@media (min-width: 100px) {
|
||||
.testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (min-width: 200px) {
|
||||
.testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 300px) {
|
||||
@media (width >= 100px) {
|
||||
@media (max-width: 300px) {
|
||||
@media (min-width: 100px) {
|
||||
.testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (min-width: 200px) {
|
||||
.testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
|
@ -2458,32 +2440,32 @@ describe('matchVariant', () => {
|
|||
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (width <= 400px) {
|
||||
@media (min-width: 200px) {
|
||||
@media (max-width: 400px) {
|
||||
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 100px) {
|
||||
@media (width <= 300px) {
|
||||
@media (min-width: 100px) {
|
||||
@media (max-width: 300px) {
|
||||
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 200px) {
|
||||
@media (width <= 300px) {
|
||||
@media (min-width: 200px) {
|
||||
@media (max-width: 300px) {
|
||||
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
|
||||
order: 4;
|
||||
}
|
||||
|
|
@ -2647,13 +2629,13 @@ describe('matchVariant', () => {
|
|||
'my-container-[250px]/placement:underline',
|
||||
])
|
||||
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
|
||||
"@container (width >= 250px) {
|
||||
"@container (min-width: 250px) {
|
||||
.my-container-\\[250px\\]\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@container placement (width >= 250px) {
|
||||
@container placement (min-width: 250px) {
|
||||
.my-container-\\[250px\\]\\/placement\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
|
@ -2694,20 +2676,20 @@ describe('addUtilities()', () => {
|
|||
|
||||
expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim())
|
||||
.toMatchInlineSnapshot(`
|
||||
"@layer utilities {
|
||||
.text-trim {
|
||||
text-box-trim: both;
|
||||
text-box-edge: cap alphabetic;
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
.lg\\:text-trim {
|
||||
"@layer utilities {
|
||||
.text-trim {
|
||||
text-box-trim: both;
|
||||
text-box-edge: cap alphabetic;
|
||||
}
|
||||
}
|
||||
}"
|
||||
`)
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:text-trim {
|
||||
text-box-trim: both;
|
||||
text-box-edge: cap alphabetic;
|
||||
}
|
||||
}
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('return multiple rule objects from a custom utility', async () => {
|
||||
|
|
@ -2891,7 +2873,7 @@ describe('addUtilities()', () => {
|
|||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:foo {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -2972,7 +2954,7 @@ describe('addUtilities()', () => {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:form-textarea {
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
|
|
@ -3298,7 +3280,7 @@ describe('matchUtilities()', () => {
|
|||
border-block-width: var(--foo);
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:border-block-2 {
|
||||
border-block-width: 2px;
|
||||
}
|
||||
|
|
@ -3349,16 +3331,16 @@ describe('matchUtilities()', () => {
|
|||
}
|
||||
|
||||
expect(optimizeCss(await run(['@w-1', 'hover:@w-1'])).trim()).toMatchInlineSnapshot(`
|
||||
".\\@w-1 {
|
||||
".\\@w-1 {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.hover\\:\\@w-1:hover {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.hover\\:\\@w-1:hover {
|
||||
width: 1px;
|
||||
}
|
||||
}"
|
||||
`)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('custom functional utilities can return an array of rules', async () => {
|
||||
|
|
@ -3596,10 +3578,8 @@ describe('matchUtilities()', () => {
|
|||
scrollbar-color: #08c;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.scrollbar-\\[\\#08c\\]\\/50 {
|
||||
scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
.scrollbar-\\[\\#08c\\]\\/50 {
|
||||
scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5);
|
||||
}
|
||||
|
||||
.scrollbar-\\[2px\\] {
|
||||
|
|
@ -3761,10 +3741,8 @@ describe('matchUtilities()', () => {
|
|||
scrollbar-color: #fff;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.scrollbar-\\[\\#fff\\]\\/50 {
|
||||
scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
|
||||
}
|
||||
.scrollbar-\\[\\#fff\\]\\/50 {
|
||||
scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
|
||||
}
|
||||
|
||||
.scrollbar-\\[2px\\] {
|
||||
|
|
@ -3795,10 +3773,8 @@ describe('matchUtilities()', () => {
|
|||
scrollbar-color: black;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.scrollbar-black\\/50 {
|
||||
scrollbar-color: oklab(0% none none / .5);
|
||||
}
|
||||
.scrollbar-black\\/50 {
|
||||
scrollbar-color: oklab(0% none none / .5);
|
||||
}"
|
||||
`)
|
||||
|
||||
|
|
@ -3871,24 +3847,20 @@ describe('matchUtilities()', () => {
|
|||
scrollbar-color: black;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.scrollbar-black\\/33 {
|
||||
scrollbar-color: oklab(0% none none / .33);
|
||||
}
|
||||
.scrollbar-black\\/33 {
|
||||
scrollbar-color: oklab(0% none none / .33);
|
||||
}
|
||||
|
||||
.scrollbar-black\\/\\[50\\%\\] {
|
||||
scrollbar-color: oklab(0% none none / .5);
|
||||
}
|
||||
.scrollbar-black\\/\\[50\\%\\] {
|
||||
scrollbar-color: oklab(0% none none / .5);
|
||||
}
|
||||
|
||||
.scrollbar-current {
|
||||
scrollbar-color: currentColor;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.scrollbar-current\\/45 {
|
||||
scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);
|
||||
}
|
||||
.scrollbar-current\\/45 {
|
||||
scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -4003,7 +3975,7 @@ describe('matchUtilities()', () => {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:foo-\\[12px\\] {
|
||||
--foo: 12px;
|
||||
display: flex;
|
||||
|
|
@ -4160,30 +4132,30 @@ describe('addComponents()', () => {
|
|||
|
||||
expect(optimizeCss(compiled.build(['btn', 'btn-blue', 'btn-red'])).trim())
|
||||
.toMatchInlineSnapshot(`
|
||||
".btn {
|
||||
border-radius: .25rem;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
".btn {
|
||||
border-radius: .25rem;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
}
|
||||
.btn-blue {
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
}
|
||||
|
||||
.btn-blue:hover {
|
||||
background-color: #2779bd;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
background-color: #2779bd;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
color: #fff;
|
||||
background-color: #e3342f;
|
||||
}
|
||||
.btn-red {
|
||||
color: #fff;
|
||||
background-color: #e3342f;
|
||||
}
|
||||
|
||||
.btn-red:hover {
|
||||
background-color: #cc1f1a;
|
||||
}"
|
||||
`)
|
||||
.btn-red:hover {
|
||||
background-color: #cc1f1a;
|
||||
}"
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -4219,16 +4191,16 @@ describe('matchComponents()', () => {
|
|||
|
||||
expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim())
|
||||
.toMatchInlineSnapshot(`
|
||||
".prose {
|
||||
--container-size: normal;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.hover\\:prose-lg:hover {
|
||||
--container-size: lg;
|
||||
".prose {
|
||||
--container-size: normal;
|
||||
}
|
||||
}"
|
||||
`)
|
||||
|
||||
@media (hover: hover) {
|
||||
.hover\\:prose-lg:hover {
|
||||
--container-size: lg;
|
||||
}
|
||||
}"
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@ describe('--alpha(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.foo {
|
||||
margin: oklab(62.7955% .22486 .12584 / .5);
|
||||
}
|
||||
".foo {
|
||||
margin: oklab(62.7955% .22486 .12584 / .5);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -197,10 +195,8 @@ describe('--theme(…)', () => {
|
|||
--color-red-500: red;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
.red {
|
||||
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -216,10 +212,8 @@ describe('--theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .224863 .125846);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .224863 .125846);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -349,13 +343,13 @@ describe('--theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 48rem) {
|
||||
"@media (min-width: 48rem) {
|
||||
.blue {
|
||||
color: #00f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 64rem) {
|
||||
@media (min-width: 64rem) {
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -508,10 +502,8 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -527,10 +519,8 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -546,10 +536,8 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .22486 .12584 / .75);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -708,10 +696,10 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
".fam {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}"
|
||||
`)
|
||||
".fam {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('theme(fontFamily.sans) (config)', async () => {
|
||||
|
|
@ -728,10 +716,10 @@ describe('theme(…)', () => {
|
|||
)
|
||||
|
||||
expect(optimizeCss(compiled.build([])).trim()).toMatchInlineSnapshot(`
|
||||
".fam {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}"
|
||||
`)
|
||||
".fam {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}"
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -773,10 +761,8 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .25);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .22486 .12584 / .25);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -848,13 +834,7 @@ describe('theme(…)', () => {
|
|||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
".red {
|
||||
color: color-mix(in oklab, red 50%, transparent / 50%);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .25);
|
||||
}
|
||||
color: oklab(62.7955% .22486 .12584 / .25);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -889,10 +869,8 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.red {
|
||||
color: oklab(62.7955% .22486 .12584 / .5);
|
||||
}
|
||||
".red {
|
||||
color: oklab(62.7955% .22486 .12584 / .5);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
@ -982,7 +960,7 @@ describe('theme(…)', () => {
|
|||
['sm:[--color:theme(colors.red[500])]'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 40rem) {
|
||||
"@media (min-width: 40rem) {
|
||||
.sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] {
|
||||
--color: red;
|
||||
}
|
||||
|
|
@ -1043,7 +1021,7 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 48rem) and (width <= 64rem) {
|
||||
"@media (min-width: 48rem) and (max-width: 64rem) {
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -1064,13 +1042,7 @@ describe('theme(…)', () => {
|
|||
}
|
||||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 48rem) and ((width < 64rem)) {
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
}"
|
||||
`)
|
||||
).toMatchInlineSnapshot(`""`)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1088,7 +1060,7 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 48rem) {
|
||||
"@media (min-width: 48rem) {
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -1109,7 +1081,7 @@ describe('theme(…)', () => {
|
|||
}
|
||||
`),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@container (width > 48rem) {
|
||||
"@container not (max-width: 48rem) {
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -1185,15 +1157,8 @@ describe('in plugins', () => {
|
|||
.my-base-rule {
|
||||
color: oklch(62% .25 30);
|
||||
background-color: oklch(45% .31 264);
|
||||
border-color: oklch(87% .07 7 / .1);
|
||||
outline-color: oklch(79% .17 70 / .15);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.my-base-rule {
|
||||
border-color: oklab(87% .06947 .00853 / .1);
|
||||
outline-color: oklab(79% .05814 .15974 / .15);
|
||||
}
|
||||
border-color: oklab(87% .06947 .00853 / .1);
|
||||
outline-color: oklab(79% .05814 .15974 / .15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4683,13 +4683,7 @@ it.only('does the `color-mix(…)` thing', async () => {
|
|||
}
|
||||
|
||||
.text-red-500\\/50 {
|
||||
color: oklch(63.7% .237 25.331 / .5);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, red 0%, red)) {
|
||||
.text-red-500\\/50 {
|
||||
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -332,48 +332,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a
|
|||
|
||||
expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown']))
|
||||
.toMatchInlineSnapshot(`
|
||||
[
|
||||
".custom-1-red {
|
||||
color: #ff0000;
|
||||
}
|
||||
",
|
||||
".custom-1-green {
|
||||
color: #ff0000;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
[
|
||||
".custom-1-red {
|
||||
color: #ff0000;
|
||||
}
|
||||
",
|
||||
".custom-1-green {
|
||||
color: #ff0000;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
|
||||
expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown']))
|
||||
.toMatchInlineSnapshot(`
|
||||
[
|
||||
".custom-2-red {
|
||||
color: #ff0000 / 0%;
|
||||
}
|
||||
",
|
||||
".custom-2-green {
|
||||
color: #ff0000 / 0%;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
[
|
||||
".custom-2-red {
|
||||
color: #ff0000 / 0%;
|
||||
}
|
||||
",
|
||||
".custom-2-green {
|
||||
color: #ff0000 / 0%;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
|
||||
expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown']))
|
||||
.toMatchInlineSnapshot(`
|
||||
[
|
||||
".custom-2-red\\/50 {
|
||||
color: #ff0000 / 50%;
|
||||
}
|
||||
",
|
||||
".custom-2-red\\/75 {
|
||||
color: #ff0000 / 75%;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
[
|
||||
".custom-2-red\\/50 {
|
||||
color: #ff0000 / 50%;
|
||||
}
|
||||
",
|
||||
".custom-2-red\\/75 {
|
||||
color: #ff0000 / 75%;
|
||||
}
|
||||
",
|
||||
null,
|
||||
]
|
||||
`)
|
||||
|
||||
let classMap = new Map(design.getClassList())
|
||||
let classNames = Array.from(classMap.keys())
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export function optimizeCss(
|
|||
nonStandard: {
|
||||
deepSelectorCombinator: true,
|
||||
},
|
||||
include: Features.Nesting | Features.MediaQueries,
|
||||
include: Features.Nesting | Features.MediaRangeSyntax,
|
||||
exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
|
||||
targets: {
|
||||
safari: (16 << 16) | (4 << 8),
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -793,31 +793,31 @@ test('default breakpoints', async () => {
|
|||
['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 640px) {
|
||||
"@media (min-width: 640px) {
|
||||
.sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1280px) {
|
||||
@media (min-width: 1280px) {
|
||||
.xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1536px) {
|
||||
@media (min-width: 1536px) {
|
||||
.\\32 xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -853,7 +853,7 @@ test('custom breakpoint', async () => {
|
|||
['10xl:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 5000px) {
|
||||
"@media (min-width: 5000px) {
|
||||
.\\31 0xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -876,19 +876,19 @@ test('max-*', async () => {
|
|||
['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width < 1024px) {
|
||||
"@media not (min-width: 1024px) {
|
||||
.max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 768px) {
|
||||
@media not (min-width: 768px) {
|
||||
.max-md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 640px) {
|
||||
@media not (min-width: 640px) {
|
||||
.max-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -925,19 +925,19 @@ test('min-*', async () => {
|
|||
['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 640px) {
|
||||
"@media (min-width: 640px) {
|
||||
.min-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.min-md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.min-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -976,30 +976,30 @@ test('sorting stacked min-* and max-* variants', async () => {
|
|||
['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 280px) {
|
||||
@media (width < 640px) {
|
||||
"@media (min-width: 280px) {
|
||||
@media not (min-width: 640px) {
|
||||
.min-xs\\:max-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 640px) {
|
||||
@media (width < 1280px) {
|
||||
@media (min-width: 640px) {
|
||||
@media not (min-width: 1280px) {
|
||||
.min-sm\\:max-xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 1024px) {
|
||||
@media not (min-width: 1024px) {
|
||||
.min-sm\\:max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (width < 1024px) {
|
||||
@media (min-width: 768px) {
|
||||
@media not (min-width: 1024px) {
|
||||
.min-md\\:max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1023,24 +1023,24 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a
|
|||
['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width >= 640px) {
|
||||
"@media (min-width: 640px) {
|
||||
.sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width < 1024px) {
|
||||
@media not (min-width: 1024px) {
|
||||
.min-sm\\:max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width < 1024px) {
|
||||
@media not (min-width: 1024px) {
|
||||
.min-md\\:max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1079,49 +1079,49 @@ test('min, max and unprefixed breakpoints', async () => {
|
|||
],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width < 1024px) {
|
||||
"@media not (min-width: 1024px) {
|
||||
.max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 1000px) {
|
||||
@media not (min-width: 1000px) {
|
||||
.max-\\[1000px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 768px) {
|
||||
@media not (min-width: 768px) {
|
||||
.max-md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 640px) {
|
||||
@media not (min-width: 640px) {
|
||||
.max-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 640px) {
|
||||
@media (min-width: 640px) {
|
||||
.min-sm\\:flex, .sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 700px) {
|
||||
@media (min-width: 700px) {
|
||||
.min-\\[700px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.md\\:flex, .min-md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:flex, .min-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1154,121 +1154,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
|
|||
'max-[12vh]:flex',
|
||||
]),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@media (width < calc(1000px + 12em)) {
|
||||
"@media not (min-width: calc(1000px + 12em)) {
|
||||
.max-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < calc(50vh + 12em)) {
|
||||
@media not (min-width: calc(50vh + 12em)) {
|
||||
.max-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 12em) {
|
||||
@media not (min-width: 12em) {
|
||||
.max-\\[12em\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 10em) {
|
||||
@media not (min-width: 10em) {
|
||||
.max-\\[10em\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 12px) {
|
||||
@media not (min-width: 12px) {
|
||||
.max-\\[12px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 10px) {
|
||||
@media not (min-width: 10px) {
|
||||
.max-\\[10px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 12rem) {
|
||||
@media not (min-width: 12rem) {
|
||||
.max-\\[12rem\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 10rem) {
|
||||
@media not (min-width: 10rem) {
|
||||
.max-\\[10rem\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 12vh) {
|
||||
@media not (min-width: 12vh) {
|
||||
.max-\\[12vh\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 10vh) {
|
||||
@media not (min-width: 10vh) {
|
||||
.max-\\[10vh\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= calc(1000px + 12em)) {
|
||||
@media (min-width: calc(1000px + 12em)) {
|
||||
.min-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= calc(50vh + 12em)) {
|
||||
@media (min-width: calc(50vh + 12em)) {
|
||||
.min-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 10em) {
|
||||
@media (min-width: 10em) {
|
||||
.min-\\[10em\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 12em) {
|
||||
@media (min-width: 12em) {
|
||||
.min-\\[12em\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 10px) {
|
||||
@media (min-width: 10px) {
|
||||
.min-\\[10px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 12px) {
|
||||
@media (min-width: 12px) {
|
||||
.min-\\[12px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 10rem) {
|
||||
@media (min-width: 10rem) {
|
||||
.min-\\[10rem\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 12rem) {
|
||||
@media (min-width: 12rem) {
|
||||
.min-\\[12rem\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 10vh) {
|
||||
@media (min-width: 10vh) {
|
||||
.min-\\[10vh\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 12vh) {
|
||||
@media (min-width: 12vh) {
|
||||
.min-\\[12vh\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1502,25 +1502,25 @@ test('not', async () => {
|
|||
}
|
||||
}
|
||||
|
||||
@media (width >= 640px) {
|
||||
@media (min-width: 640px) {
|
||||
.not-max-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 130px) {
|
||||
@media (min-width: 130px) {
|
||||
.not-max-\\[130px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 130px) {
|
||||
@media not (min-width: 130px) {
|
||||
.not-min-\\[130px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 640px) {
|
||||
@media not (min-width: 640px) {
|
||||
.not-min-sm\\:flex, .not-sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -2092,61 +2092,61 @@ test('container queries', async () => {
|
|||
],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
"@container name (width < 1024px) {
|
||||
"@container name not (min-width: 1024px) {
|
||||
.\\@max-lg\\/name\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width < 1024px) {
|
||||
@container not (min-width: 1024px) {
|
||||
.\\@max-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container name (width < 456px) {
|
||||
@container name not (min-width: 456px) {
|
||||
.\\@max-\\[456px\\]\\/name\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width < 123px) {
|
||||
@container not (min-width: 123px) {
|
||||
.\\@max-\\[123px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width >= 123px) {
|
||||
@container (min-width: 123px) {
|
||||
.\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container name (width >= 456px) {
|
||||
@container name (min-width: 456px) {
|
||||
.\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container name (width >= 1024px) {
|
||||
@container name (min-width: 1024px) {
|
||||
.\\@lg\\/name\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width >= 1024px) {
|
||||
@container (min-width: 1024px) {
|
||||
.\\@lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container name (width >= 1024px) {
|
||||
@container name (min-width: 1024px) {
|
||||
.\\@min-lg\\/name\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width >= 1024px) {
|
||||
@container (min-width: 1024px) {
|
||||
.\\@min-lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -2340,31 +2340,31 @@ test('variant order', async () => {
|
|||
}
|
||||
}
|
||||
|
||||
@media (width >= 640px) {
|
||||
@media (min-width: 640px) {
|
||||
.sm\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1280px) {
|
||||
@media (min-width: 1280px) {
|
||||
.xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1536px) {
|
||||
@media (min-width: 1536px) {
|
||||
.\\32 xl\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue