From 764d29de9d7e90f11a7dce5bff985ab690db12bd Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 8 May 2024 10:53:29 -0400 Subject: [PATCH 1/3] Add `@property` fallbacks for Firefox --- packages/tailwindcss/src/ast.ts | 45 ++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index dae7cf0e8893..22ad6eeed5bc 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -90,6 +90,8 @@ export function walk( export function toCss(ast: AstNode[]) { let atRoots: string = '' let seenAtProperties = new Set() + let propertyFallbacksRoot: Declaration[] = [] + let propertyFallbacksUniversal: Declaration[] = [] function stringify(node: AstNode, depth = 0): string { let css = '' @@ -129,6 +131,28 @@ export function toCss(ast: AstNode[]) { return '' } + // Collect fallbacks for `@property` rules for Firefox support + // We turn these into rules on `:root` or `*` and some pseudo-elements + // based on the value of `inherits`` + let property = node.selector.replace(/@property\s*/g, '') + let initialValue = null + let inherits = false + + for (let prop of node.nodes) { + if (prop.kind !== 'declaration') continue + if (prop.property === 'initial-value') { + initialValue = prop.value + } else if (prop.property === 'inherits') { + inherits = prop.value === 'true' + } + } + + if (inherits) { + propertyFallbacksRoot.push(decl(property, initialValue ?? ' ')) + } else { + propertyFallbacksUniversal.push(decl(property, initialValue ?? ' ')) + } + seenAtProperties.add(node.selector) } @@ -153,6 +177,7 @@ export function toCss(ast: AstNode[]) { } let css = '' + for (let node of ast) { let result = stringify(node) if (result !== '') { @@ -160,5 +185,23 @@ export function toCss(ast: AstNode[]) { } } - return `${css}${atRoots}` + let fallbackAst = [] + + if (propertyFallbacksRoot.length) { + fallbackAst.push(rule(':root', propertyFallbacksRoot)) + } + + if (propertyFallbacksUniversal.length) { + fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal)) + } + + let fallback = '' + + if (fallbackAst.length) { + fallback = stringify( + rule('@supports (-moz-orient: inline)', [rule('@layer base', fallbackAst)]), + ) + } + + return `${css}${fallback}${atRoots}` } From a34b8aeb8e50dbd9a3e76b0598ad7da5894cee25 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 8 May 2024 11:17:08 -0400 Subject: [PATCH 2/3] Update tests --- .../src/__snapshots__/index.test.ts.snap | 19 + .../src/__snapshots__/utilities.test.ts.snap | 72 +++ packages/tailwindcss/src/index.test.ts | 34 ++ packages/tailwindcss/src/utilities.test.ts | 529 ++++++++++++++++++ packages/tailwindcss/src/variants.test.ts | 24 + 5 files changed, 678 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 969f22c134cd..2751e51b01de 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -423,6 +423,25 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-colored: 0 0 #0000; + --tw-ring-color: ; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: ; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } +} + @keyframes spin { to { transform: rotate(360deg); diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 999d5f59c113..f9399b75e981 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -106,6 +106,14 @@ exports[`border-* 1`] = ` border-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -219,6 +227,14 @@ exports[`border-b-* 1`] = ` border-bottom-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -332,6 +348,14 @@ exports[`border-e-* 1`] = ` border-inline-end-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -445,6 +469,14 @@ exports[`border-l-* 1`] = ` border-left-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -558,6 +590,14 @@ exports[`border-r-* 1`] = ` border-right-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -671,6 +711,14 @@ exports[`border-s-* 1`] = ` border-inline-start-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -784,6 +832,14 @@ exports[`border-t-* 1`] = ` border-top-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -929,6 +985,14 @@ exports[`border-x-* 1`] = ` border-right-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; @@ -1074,6 +1138,14 @@ exports[`border-y-* 1`] = ` border-bottom-color: #0000; } +@supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + @property --tw-border-style { syntax: ""; inherits: false; diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 8d5cd8f8e7b0..0da484003814 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -211,6 +211,16 @@ describe('@apply', () => { } } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @keyframes spin { to { transform: rotate(360deg); @@ -257,6 +267,14 @@ describe('@apply', () => { content: var(--tw-content); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; @@ -372,6 +390,14 @@ describe('variant stacking', () => { display: flex; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; @@ -538,6 +564,14 @@ describe('sorting', () => { margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + @property --tw-space-x-reverse { syntax: ""; inherits: false; diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7357288c9bab..058b477dcdb4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -2204,6 +2204,15 @@ test('border-spacing', () => { border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + @property --tw-border-spacing-x { syntax: ""; inherits: false; @@ -2245,6 +2254,15 @@ test('border-spacing-x', () => { border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + @property --tw-border-spacing-x { syntax: ""; inherits: false; @@ -2286,6 +2304,15 @@ test('border-spacing-y', () => { border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + @property --tw-border-spacing-x { syntax: ""; inherits: false; @@ -2472,6 +2499,16 @@ test('translate', () => { translate: var(--tw-translate-x) var(--tw-translate-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @property --tw-translate-x { syntax: ""; inherits: false; @@ -2516,6 +2553,16 @@ test('translate-x', () => { translate: var(--tw-translate-x) var(--tw-translate-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @property --tw-translate-x { syntax: ""; inherits: false; @@ -2560,6 +2607,16 @@ test('translate-y', () => { translate: var(--tw-translate-x) var(--tw-translate-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @property --tw-translate-x { syntax: ""; inherits: false; @@ -2593,6 +2650,16 @@ test('translate-z', () => { translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @property --tw-translate-x { syntax: ""; inherits: false; @@ -2622,6 +2689,16 @@ test('translate-3d', () => { translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + @property --tw-translate-x { syntax: ""; inherits: false; @@ -2682,6 +2759,18 @@ test('rotate-x', () => { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -2732,6 +2821,18 @@ test('rotate-y', () => { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -2785,6 +2886,18 @@ test('skew', () => { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -2835,6 +2948,18 @@ test('skew-x', () => { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -2885,6 +3010,18 @@ test('skew-y', () => { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -2942,6 +3079,16 @@ test('scale', () => { scale: 2 1.5 3; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -2969,6 +3116,16 @@ test('scale-3d', () => { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -3007,6 +3164,16 @@ test('scale-x', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -3038,6 +3205,16 @@ test('scale-x', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -3076,6 +3253,16 @@ test('scale-y', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -3114,6 +3301,16 @@ test('scale-z', () => { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -3165,6 +3362,18 @@ test('transform', () => { transform: none; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + @property --tw-rotate-x { syntax: ""; inherits: false; @@ -3594,6 +3803,16 @@ test('touch-pan', () => { touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + } + } + } + @property --tw-pan-x { syntax: "*"; inherits: false @@ -3628,6 +3847,16 @@ test('touch-pinch-zoom', () => { touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + } + } + } + @property --tw-pan-x { syntax: "*"; inherits: false @@ -3710,6 +3939,14 @@ test('scroll-snap-type', () => { scroll-snap-type: y var(--tw-scroll-snap-strictness); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } + @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; @@ -3729,6 +3966,14 @@ test('--tw-scroll-snap-strictness', () => { --tw-scroll-snap-strictness: proximity; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } + @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; @@ -5311,6 +5556,14 @@ test('space-x', () => { margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + @property --tw-space-x-reverse { syntax: ""; inherits: false; @@ -5351,6 +5604,14 @@ test('space-y', () => { margin-bottom: calc(4px * calc(1 - var(--tw-space-y-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } + @property --tw-space-y-reverse { syntax: ""; inherits: false; @@ -5366,6 +5627,14 @@ test('space-x-reverse', () => { --tw-space-x-reverse: 1; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + @property --tw-space-x-reverse { syntax: ""; inherits: false; @@ -5381,6 +5650,14 @@ test('space-y-reverse', () => { --tw-space-y-reverse: 1; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } + @property --tw-space-y-reverse { syntax: ""; inherits: false; @@ -5423,6 +5700,15 @@ test('divide-x', () => { border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } + @property --tw-divide-x-reverse { syntax: ""; inherits: false; @@ -5460,6 +5746,15 @@ test('divide-x with custom default border width', () => { border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } + @property --tw-divide-x-reverse { syntax: ""; inherits: false; @@ -5511,6 +5806,15 @@ test('divide-y', () => { border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } + @property --tw-divide-y-reverse { syntax: ""; inherits: false; @@ -5549,6 +5853,15 @@ test('divide-y with custom default border width', () => { border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } + @property --tw-divide-y-reverse { syntax: ""; inherits: false; @@ -5569,6 +5882,14 @@ test('divide-x-reverse', () => { --tw-divide-x-reverse: 1; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + } + } + } + @property --tw-divide-x-reverse { syntax: ""; inherits: false; @@ -5584,6 +5905,14 @@ test('divide-y-reverse', () => { --tw-divide-y-reverse: 1; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + } + } + } + @property --tw-divide-y-reverse { syntax: ""; inherits: false; @@ -7291,6 +7620,14 @@ test('border with custom default border width', () => { border-width: 2px; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } + } + @property --tw-border-style { syntax: ""; inherits: false; @@ -7808,6 +8145,21 @@ test('from', () => { --tw-gradient-from-position: var(--my-position); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-gradient-from: #0000; + --tw-gradient-to: #0000; + --tw-gradient-via: transparent; + --tw-gradient-stops: ; + --tw-gradient-via-stops: ; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -8030,6 +8382,21 @@ test('via', () => { --tw-gradient-via-position: var(--my-position); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-gradient-from: #0000; + --tw-gradient-to: #0000; + --tw-gradient-via: transparent; + --tw-gradient-stops: ; + --tw-gradient-via-stops: ; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -8240,6 +8607,21 @@ test('to', () => { --tw-gradient-to-position: var(--my-position); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-gradient-from: #0000; + --tw-gradient-to: #0000; + --tw-gradient-via: transparent; + --tw-gradient-stops: ; + --tw-gradient-via-stops: ; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -9998,6 +10380,22 @@ test('filter', () => { filter: none; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-opacity: ; + --tw-saturate: ; + --tw-sepia: ; + } + } + } + @property --tw-blur { syntax: "*"; inherits: false @@ -10285,6 +10683,22 @@ test('backdrop-filter', () => { backdrop-filter: none; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + } + } + } + @property --tw-backdrop-blur { syntax: "*"; inherits: false @@ -10639,6 +11053,17 @@ test('contain', () => { contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; + } + } + } + @property --tw-contain-size { syntax: "*"; inherits: false @@ -10668,6 +11093,14 @@ test('content', () => { content: var(--tw-content); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; @@ -10841,6 +11274,18 @@ test('font-variant-numeric', () => { font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + } + } + } + @property --tw-ordinal { syntax: "*"; inherits: false @@ -11054,6 +11499,14 @@ test('outline', () => { outline-style: solid; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-outline-style: solid; + } + } + } + @property --tw-outline-style { syntax: ""; inherits: false; @@ -11543,6 +11996,25 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-colored: 0 0 #0000; + --tw-ring-color: ; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: ; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + @property --tw-shadow { syntax: "*"; inherits: false; @@ -11776,6 +12248,25 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-colored: 0 0 #0000; + --tw-ring-color: ; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: ; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + @property --tw-shadow { syntax: "*"; inherits: false; @@ -12005,6 +12496,25 @@ test('ring', () => { --tw-ring-inset: inset; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-colored: 0 0 #0000; + --tw-ring-color: ; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: ; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + @property --tw-shadow { syntax: "*"; inherits: false; @@ -12235,6 +12745,25 @@ test('inset-ring', () => { --tw-inset-ring-color: transparent; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-colored: 0 0 #0000; + --tw-ring-color: ; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: ; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + @property --tw-shadow { syntax: "*"; inherits: false; diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 92f45c14b6a7..e9398044007c 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -82,6 +82,14 @@ test('before', () => { display: flex; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; @@ -97,6 +105,14 @@ test('after', () => { display: flex; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; @@ -2100,6 +2116,14 @@ test('variant order', () => { display: flex; } + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + @property --tw-content { syntax: "*"; inherits: false; From f56e1dfec3fc889a73540c0f0d442ea4f962500e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 8 May 2024 11:28:46 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b63bddc106ba..29fd7e583787 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521)) - Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608)) +- Add fallbacks for `@property` rules for Firefox ([#13655](https://github.com/tailwindlabs/tailwindcss/pull/13655)) ## Changed