Skip to content

Commit 2de644b

Browse files
philipp-spiessphilipp-spiess
authored
Remove @property fallbacks for Firefox (tailwindlabs#15622)
This PR removes the `@property` fallbacks added in tailwindlabs#13655. This is possible because we're targeting a minimum Firefox version of 128 which [includes support for \`@property\` rules](https://developer.mozilla.org/de/docs/Web/CSS/@property). <img width="1284" alt="Screenshot 2025-01-14 at 11 36 44" src="https://github.com/user-attachments/assets/ae070781-35c1-4165-be51-baa63f28db5b" />
1 parent da2da51 commit 2de644b

File tree

11 files changed

+1
-899
lines changed

11 files changed

+1
-899
lines changed

‎CHANGELOG.md‎

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

4444
- Remove `--container-prose` in favor of a deprecated `--max-width-prose` theme variable so that `*-prose` is only available for max-width utilities and only for backward compatibility ([#15439](https://github.com/tailwindlabs/tailwindcss/pull/15439))
4545
- Use Vite post-processor APIs for processing Svelte `<style>` blocks ([#15436](https://github.com/tailwindlabs/tailwindcss/pull/15436))
46+
- Remove `@property` fallback rules for Firefox ([#15622](https://github.com/tailwindlabs/tailwindcss/pull/15622))
4647

4748
## [4.0.0-beta.8] - 2024-12-17
4849

‎integrations/cli/index.test.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -530,13 +530,6 @@ test(
530530
--tw-content: "src/nested/index.html";
531531
content: var(--tw-content);
532532
}
533-
@supports (-moz-orient: inline) {
534-
@layer base {
535-
*, ::before, ::after, ::backdrop {
536-
--tw-content: "";
537-
}
538-
}
539-
}
540533
@property --tw-content {
541534
syntax: "*";
542535
inherits: false;
@@ -775,13 +768,6 @@ test(
775768
--tw-content: 'project-e/nested/index.html';
776769
content: var(--tw-content);
777770
}
778-
@supports (-moz-orient: inline) {
779-
@layer base {
780-
*, ::before, ::after, ::backdrop {
781-
--tw-content: "";
782-
}
783-
}
784-
}
785771
@property --tw-content {
786772
syntax: "*";
787773
inherits: false;
@@ -981,13 +967,6 @@ test(
981967
--tw-content: "pages/nested/foo.html";
982968
content: var(--tw-content);
983969
}
984-
@supports (-moz-orient: inline) {
985-
@layer base {
986-
*, ::before, ::after, ::backdrop {
987-
--tw-content: "";
988-
}
989-
}
990-
}
991970
@property --tw-content {
992971
syntax: "*";
993972
inherits: false;

‎integrations/postcss/index.test.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -761,13 +761,6 @@ test(
761761
--tw-content: "src/nested/index.html";
762762
content: var(--tw-content);
763763
}
764-
@supports (-moz-orient: inline) {
765-
@layer base {
766-
*, ::before, ::after, ::backdrop {
767-
--tw-content: "";
768-
}
769-
}
770-
}
771764
@property --tw-content {
772765
syntax: "*";
773766
inherits: false;
@@ -997,13 +990,6 @@ test(
997990
--tw-content: 'project-d/src/index.html';
998991
content: var(--tw-content);
999992
}
1000-
@supports (-moz-orient: inline) {
1001-
@layer base {
1002-
*, ::before, ::after, ::backdrop {
1003-
--tw-content: "";
1004-
}
1005-
}
1006-
}
1007993
@property --tw-content {
1008994
syntax: "*";
1009995
inherits: false;
@@ -1227,13 +1213,6 @@ test(
12271213
--tw-content: "pages/nested/foo.html";
12281214
content: var(--tw-content);
12291215
}
1230-
@supports (-moz-orient: inline) {
1231-
@layer base {
1232-
*, ::before, ::after, ::backdrop {
1233-
--tw-content: "";
1234-
}
1235-
}
1236-
}
12371216
@property --tw-content {
12381217
syntax: "*";
12391218
inherits: false;

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -630,14 +630,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
630630
}
631631
}
632632
633-
@supports (-moz-orient: inline) {
634-
@layer base {
635-
*, :before, :after, ::backdrop {
636-
--tw-font-weight: initial;
637-
}
638-
}
639-
}
640-
641633
@keyframes spin {
642634
to {
643635
transform: rotate(360deg);

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

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -387,25 +387,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
387387
}
388388
}
389389
390-
@supports (-moz-orient: inline) {
391-
@layer base {
392-
*, :before, :after, ::backdrop {
393-
--tw-shadow: 0 0 #0000;
394-
--tw-shadow-color: initial;
395-
--tw-inset-shadow: 0 0 #0000;
396-
--tw-inset-shadow-color: initial;
397-
--tw-ring-color: initial;
398-
--tw-ring-shadow: 0 0 #0000;
399-
--tw-inset-ring-color: initial;
400-
--tw-inset-ring-shadow: 0 0 #0000;
401-
--tw-ring-inset: initial;
402-
--tw-ring-offset-width: 0px;
403-
--tw-ring-offset-color: #fff;
404-
--tw-ring-offset-shadow: 0 0 #0000;
405-
}
406-
}
407-
}
408-
409390
@keyframes spin {
410391
to {
411392
transform: rotate(360deg);

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

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -118,14 +118,6 @@ exports[`border-* 1`] = `
118118
border-color: #0000;
119119
}
120120
121-
@supports (-moz-orient: inline) {
122-
@layer base {
123-
*, :before, :after, ::backdrop {
124-
--tw-border-style: solid;
125-
}
126-
}
127-
}
128-
129121
@property --tw-border-style {
130122
syntax: "*";
131123
inherits: false;
@@ -251,14 +243,6 @@ exports[`border-b-* 1`] = `
251243
border-bottom-color: #0000;
252244
}
253245
254-
@supports (-moz-orient: inline) {
255-
@layer base {
256-
*, :before, :after, ::backdrop {
257-
--tw-border-style: solid;
258-
}
259-
}
260-
}
261-
262246
@property --tw-border-style {
263247
syntax: "*";
264248
inherits: false;
@@ -384,14 +368,6 @@ exports[`border-e-* 1`] = `
384368
border-inline-end-color: #0000;
385369
}
386370
387-
@supports (-moz-orient: inline) {
388-
@layer base {
389-
*, :before, :after, ::backdrop {
390-
--tw-border-style: solid;
391-
}
392-
}
393-
}
394-
395371
@property --tw-border-style {
396372
syntax: "*";
397373
inherits: false;
@@ -517,14 +493,6 @@ exports[`border-l-* 1`] = `
517493
border-left-color: #0000;
518494
}
519495
520-
@supports (-moz-orient: inline) {
521-
@layer base {
522-
*, :before, :after, ::backdrop {
523-
--tw-border-style: solid;
524-
}
525-
}
526-
}
527-
528496
@property --tw-border-style {
529497
syntax: "*";
530498
inherits: false;
@@ -650,14 +618,6 @@ exports[`border-r-* 1`] = `
650618
border-right-color: #0000;
651619
}
652620
653-
@supports (-moz-orient: inline) {
654-
@layer base {
655-
*, :before, :after, ::backdrop {
656-
--tw-border-style: solid;
657-
}
658-
}
659-
}
660-
661621
@property --tw-border-style {
662622
syntax: "*";
663623
inherits: false;
@@ -783,14 +743,6 @@ exports[`border-s-* 1`] = `
783743
border-inline-start-color: #0000;
784744
}
785745
786-
@supports (-moz-orient: inline) {
787-
@layer base {
788-
*, :before, :after, ::backdrop {
789-
--tw-border-style: solid;
790-
}
791-
}
792-
}
793-
794746
@property --tw-border-style {
795747
syntax: "*";
796748
inherits: false;
@@ -916,14 +868,6 @@ exports[`border-t-* 1`] = `
916868
border-top-color: #0000;
917869
}
918870
919-
@supports (-moz-orient: inline) {
920-
@layer base {
921-
*, :before, :after, ::backdrop {
922-
--tw-border-style: solid;
923-
}
924-
}
925-
}
926-
927871
@property --tw-border-style {
928872
syntax: "*";
929873
inherits: false;
@@ -1049,14 +993,6 @@ exports[`border-x-* 1`] = `
1049993
border-inline-color: #0000;
1050994
}
1051995
1052-
@supports (-moz-orient: inline) {
1053-
@layer base {
1054-
*, :before, :after, ::backdrop {
1055-
--tw-border-style: solid;
1056-
}
1057-
}
1058-
}
1059-
1060996
@property --tw-border-style {
1061997
syntax: "*";
1062998
inherits: false;
@@ -1182,14 +1118,6 @@ exports[`border-y-* 1`] = `
11821118
border-block-color: #0000;
11831119
}
11841120
1185-
@supports (-moz-orient: inline) {
1186-
@layer base {
1187-
*, :before, :after, ::backdrop {
1188-
--tw-border-style: solid;
1189-
}
1190-
}
1191-
}
1192-
11931121
@property --tw-border-style {
11941122
syntax: "*";
11951123
inherits: false;

‎packages/tailwindcss/src/ast.ts‎

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,6 @@ export function walkDepth(
240240
export function optimizeAst(ast: AstNode[]) {
241241
let atRoots: AstNode[] = []
242242
let seenAtProperties = new Set<string>()
243-
let propertyFallbacksRoot: Declaration[] = []
244-
let propertyFallbacksUniversal: Declaration[] = []
245243

246244
function transform(
247245
node: AstNode,
@@ -272,28 +270,6 @@ export function optimizeAst(ast: AstNode[]) {
272270
return
273271
}
274272

275-
// Collect fallbacks for `@property` rules for Firefox support
276-
// We turn these into rules on `:root` or `*` and some pseudo-elements
277-
// based on the value of `inherits``
278-
let property = node.params
279-
let initialValue = null
280-
let inherits = false
281-
282-
for (let prop of node.nodes) {
283-
if (prop.kind !== 'declaration') continue
284-
if (prop.property === 'initial-value') {
285-
initialValue = prop.value
286-
} else if (prop.property === 'inherits') {
287-
inherits = prop.value === 'true'
288-
}
289-
}
290-
291-
if (inherits) {
292-
propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
293-
} else {
294-
propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
295-
}
296-
297273
seenAtProperties.add(node.params)
298274

299275
let copy = { ...node, nodes: [] }
@@ -351,25 +327,6 @@ export function optimizeAst(ast: AstNode[]) {
351327
transform(node, newAst, 0)
352328
}
353329

354-
// Fallbacks
355-
{
356-
let fallbackAst = []
357-
358-
if (propertyFallbacksRoot.length > 0) {
359-
fallbackAst.push(rule(':root', propertyFallbacksRoot))
360-
}
361-
362-
if (propertyFallbacksUniversal.length > 0) {
363-
fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
364-
}
365-
366-
if (fallbackAst.length > 0) {
367-
newAst.push(
368-
atRule('@supports', '(-moz-orient: inline)', [atRule('@layer', 'base', fallbackAst)]),
369-
)
370-
}
371-
}
372-
373330
return newAst.concat(atRoots)
374331
}
375332

‎packages/tailwindcss/src/compat/config.test.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -352,13 +352,6 @@ describe('theme callbacks', () => {
352352
--tw-leading: 201rem;
353353
line-height: 201rem;
354354
}
355-
@supports (-moz-orient: inline) {
356-
@layer base {
357-
*, ::before, ::after, ::backdrop {
358-
--tw-leading: initial;
359-
}
360-
}
361-
}
362355
@property --tw-leading {
363356
syntax: "*";
364357
inherits: false;

0 commit comments

Comments
 (0)