Skip to content

Commit aceec2e

Browse files
thecrypticacethecrypticace
authored
Add fallbacks for @property rules for Firefox (tailwindlabs#13655)
* Add `@property` fallbacks for Firefox * Update tests * Update changelog
1 parent 3a59340 commit aceec2e

File tree

7 files changed

+723
-1
lines changed

7 files changed

+723
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
1313
- Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608))
14+
- Add fallbacks for `@property` rules for Firefox ([#13655](https://github.com/tailwindlabs/tailwindcss/pull/13655))
1415

1516
## Changed
1617

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,25 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
423423
}
424424
}
425425
426+
@supports (-moz-orient: inline) {
427+
@layer base {
428+
*, :before, :after, ::backdrop {
429+
--tw-shadow: 0 0 #0000;
430+
--tw-shadow-colored: 0 0 #0000;
431+
--tw-inset-shadow: 0 0 #0000;
432+
--tw-inset-shadow-colored: 0 0 #0000;
433+
--tw-ring-color: ;
434+
--tw-ring-shadow: 0 0 #0000;
435+
--tw-inset-ring-color: ;
436+
--tw-inset-ring-shadow: 0 0 #0000;
437+
--tw-ring-inset: ;
438+
--tw-ring-offset-width: 0px;
439+
--tw-ring-offset-color: #fff;
440+
--tw-ring-offset-shadow: 0 0 #0000;
441+
}
442+
}
443+
}
444+
426445
@keyframes spin {
427446
to {
428447
transform: rotate(360deg);

‎packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,14 @@ exports[`border-* 1`] = `
106106
border-color: #0000;
107107
}
108108
109+
@supports (-moz-orient: inline) {
110+
@layer base {
111+
*, :before, :after, ::backdrop {
112+
--tw-border-style: solid;
113+
}
114+
}
115+
}
116+
109117
@property --tw-border-style {
110118
syntax: "<custom-ident>";
111119
inherits: false;
@@ -219,6 +227,14 @@ exports[`border-b-* 1`] = `
219227
border-bottom-color: #0000;
220228
}
221229
230+
@supports (-moz-orient: inline) {
231+
@layer base {
232+
*, :before, :after, ::backdrop {
233+
--tw-border-style: solid;
234+
}
235+
}
236+
}
237+
222238
@property --tw-border-style {
223239
syntax: "<custom-ident>";
224240
inherits: false;
@@ -332,6 +348,14 @@ exports[`border-e-* 1`] = `
332348
border-inline-end-color: #0000;
333349
}
334350
351+
@supports (-moz-orient: inline) {
352+
@layer base {
353+
*, :before, :after, ::backdrop {
354+
--tw-border-style: solid;
355+
}
356+
}
357+
}
358+
335359
@property --tw-border-style {
336360
syntax: "<custom-ident>";
337361
inherits: false;
@@ -445,6 +469,14 @@ exports[`border-l-* 1`] = `
445469
border-left-color: #0000;
446470
}
447471
472+
@supports (-moz-orient: inline) {
473+
@layer base {
474+
*, :before, :after, ::backdrop {
475+
--tw-border-style: solid;
476+
}
477+
}
478+
}
479+
448480
@property --tw-border-style {
449481
syntax: "<custom-ident>";
450482
inherits: false;
@@ -558,6 +590,14 @@ exports[`border-r-* 1`] = `
558590
border-right-color: #0000;
559591
}
560592
593+
@supports (-moz-orient: inline) {
594+
@layer base {
595+
*, :before, :after, ::backdrop {
596+
--tw-border-style: solid;
597+
}
598+
}
599+
}
600+
561601
@property --tw-border-style {
562602
syntax: "<custom-ident>";
563603
inherits: false;
@@ -671,6 +711,14 @@ exports[`border-s-* 1`] = `
671711
border-inline-start-color: #0000;
672712
}
673713
714+
@supports (-moz-orient: inline) {
715+
@layer base {
716+
*, :before, :after, ::backdrop {
717+
--tw-border-style: solid;
718+
}
719+
}
720+
}
721+
674722
@property --tw-border-style {
675723
syntax: "<custom-ident>";
676724
inherits: false;
@@ -784,6 +832,14 @@ exports[`border-t-* 1`] = `
784832
border-top-color: #0000;
785833
}
786834
835+
@supports (-moz-orient: inline) {
836+
@layer base {
837+
*, :before, :after, ::backdrop {
838+
--tw-border-style: solid;
839+
}
840+
}
841+
}
842+
787843
@property --tw-border-style {
788844
syntax: "<custom-ident>";
789845
inherits: false;
@@ -929,6 +985,14 @@ exports[`border-x-* 1`] = `
929985
border-right-color: #0000;
930986
}
931987
988+
@supports (-moz-orient: inline) {
989+
@layer base {
990+
*, :before, :after, ::backdrop {
991+
--tw-border-style: solid;
992+
}
993+
}
994+
}
995+
932996
@property --tw-border-style {
933997
syntax: "<custom-ident>";
934998
inherits: false;
@@ -1074,6 +1138,14 @@ exports[`border-y-* 1`] = `
10741138
border-bottom-color: #0000;
10751139
}
10761140
1141+
@supports (-moz-orient: inline) {
1142+
@layer base {
1143+
*, :before, :after, ::backdrop {
1144+
--tw-border-style: solid;
1145+
}
1146+
}
1147+
}
1148+
10771149
@property --tw-border-style {
10781150
syntax: "<custom-ident>";
10791151
inherits: false;

‎packages/tailwindcss/src/ast.ts‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ export function walk(
9090
export function toCss(ast: AstNode[]) {
9191
let atRoots: string = ''
9292
let seenAtProperties = new Set<string>()
93+
let propertyFallbacksRoot: Declaration[] = []
94+
let propertyFallbacksUniversal: Declaration[] = []
9395

9496
function stringify(node: AstNode, depth = 0): string {
9597
let css = ''
@@ -129,6 +131,28 @@ export function toCss(ast: AstNode[]) {
129131
return ''
130132
}
131133

134+
// Collect fallbacks for `@property` rules for Firefox support
135+
// We turn these into rules on `:root` or `*` and some pseudo-elements
136+
// based on the value of `inherits``
137+
let property = node.selector.replace(/@property\s*/g, '')
138+
let initialValue = null
139+
let inherits = false
140+
141+
for (let prop of node.nodes) {
142+
if (prop.kind !== 'declaration') continue
143+
if (prop.property === 'initial-value') {
144+
initialValue = prop.value
145+
} else if (prop.property === 'inherits') {
146+
inherits = prop.value === 'true'
147+
}
148+
}
149+
150+
if (inherits) {
151+
propertyFallbacksRoot.push(decl(property, initialValue ?? ' '))
152+
} else {
153+
propertyFallbacksUniversal.push(decl(property, initialValue ?? ' '))
154+
}
155+
132156
seenAtProperties.add(node.selector)
133157
}
134158

@@ -153,12 +177,31 @@ export function toCss(ast: AstNode[]) {
153177
}
154178

155179
let css = ''
180+
156181
for (let node of ast) {
157182
let result = stringify(node)
158183
if (result !== '') {
159184
css += result
160185
}
161186
}
162187

163-
return `${css}${atRoots}`
188+
let fallbackAst = []
189+
190+
if (propertyFallbacksRoot.length) {
191+
fallbackAst.push(rule(':root', propertyFallbacksRoot))
192+
}
193+
194+
if (propertyFallbacksUniversal.length) {
195+
fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
196+
}
197+
198+
let fallback = ''
199+
200+
if (fallbackAst.length) {
201+
fallback = stringify(
202+
rule('@supports (-moz-orient: inline)', [rule('@layer base', fallbackAst)]),
203+
)
204+
}
205+
206+
return `${css}${fallback}${atRoots}`
164207
}

‎packages/tailwindcss/src/index.test.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,16 @@ describe('@apply', () => {
211211
}
212212
}
213213
214+
@supports (-moz-orient: inline) {
215+
@layer base {
216+
*, :before, :after, ::backdrop {
217+
--tw-translate-x: 0;
218+
--tw-translate-y: 0;
219+
--tw-translate-z: 0;
220+
}
221+
}
222+
}
223+
214224
@keyframes spin {
215225
to {
216226
transform: rotate(360deg);
@@ -257,6 +267,14 @@ describe('@apply', () => {
257267
content: var(--tw-content);
258268
}
259269
270+
@supports (-moz-orient: inline) {
271+
@layer base {
272+
*, :before, :after, ::backdrop {
273+
--tw-content: "";
274+
}
275+
}
276+
}
277+
260278
@property --tw-content {
261279
syntax: "*";
262280
inherits: false;
@@ -372,6 +390,14 @@ describe('variant stacking', () => {
372390
display: flex;
373391
}
374392
393+
@supports (-moz-orient: inline) {
394+
@layer base {
395+
*, :before, :after, ::backdrop {
396+
--tw-content: "";
397+
}
398+
}
399+
}
400+
375401
@property --tw-content {
376402
syntax: "*";
377403
inherits: false;
@@ -538,6 +564,14 @@ describe('sorting', () => {
538564
margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
539565
}
540566
567+
@supports (-moz-orient: inline) {
568+
@layer base {
569+
*, :before, :after, ::backdrop {
570+
--tw-space-x-reverse: 0;
571+
}
572+
}
573+
}
574+
541575
@property --tw-space-x-reverse {
542576
syntax: "<number>";
543577
inherits: false;

0 commit comments

Comments
 (0)