Skip to content

Commit 407de01

Browse files
adamwathanadamwathan
authored
Use initial for @property fallbacks instead of (#13949)
* Use `initial` for `@property` fallbacks instead of ` ` * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1 parent 62de02a commit 407de01

File tree

5 files changed

+61
-57
lines changed

5 files changed

+61
-57
lines changed

‎CHANGELOG.md‎

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

1919
- Support combining arbitrary shadows without a color with shadow color utilities ([#13876](https://github.com/tailwindlabs/tailwindcss/pull/13876))
20+
- Ensure `@property` fallbacks work correctly with properties with no `initial-value` ([#13949](https://github.com/tailwindlabs/tailwindcss/pull/13949))
2021

2122
## [4.0.0-alpha.16] - 2024-06-07
2223

‎packages/tailwindcss/playwright.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,14 @@ export default defineConfig({
3636
name: 'chromium',
3737
use: { ...devices['Desktop Chrome'] },
3838
},
39-
4039
{
4140
name: 'webkit',
4241
use: { ...devices['Desktop Safari'] },
4342
},
43+
{
44+
name: 'firefox',
45+
use: { ...devices['Desktop Firefox'] },
46+
},
4447

4548
/* Test against mobile viewports. */
4649
// {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -431,11 +431,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
431431
--tw-shadow-colored: 0 0 #0000;
432432
--tw-inset-shadow: 0 0 #0000;
433433
--tw-inset-shadow-colored: 0 0 #0000;
434-
--tw-ring-color: ;
434+
--tw-ring-color: initial;
435435
--tw-ring-shadow: 0 0 #0000;
436-
--tw-inset-ring-color: ;
436+
--tw-inset-ring-color: initial;
437437
--tw-inset-ring-shadow: 0 0 #0000;
438-
--tw-ring-inset: ;
438+
--tw-ring-inset: initial;
439439
--tw-ring-offset-width: 0px;
440440
--tw-ring-offset-color: #fff;
441441
--tw-ring-offset-shadow: 0 0 #0000;

‎packages/tailwindcss/src/ast.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,9 @@ export function toCss(ast: AstNode[]) {
148148
}
149149

150150
if (inherits) {
151-
propertyFallbacksRoot.push(decl(property, initialValue ?? ' '))
151+
propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
152152
} else {
153-
propertyFallbacksUniversal.push(decl(property, initialValue ?? ' '))
153+
propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
154154
}
155155

156156
seenAtProperties.add(node.selector)

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

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3824,9 +3824,9 @@ test('touch-pan', () => {
38243824
@supports (-moz-orient: inline) {
38253825
@layer base {
38263826
*, :before, :after, ::backdrop {
3827-
--tw-pan-x: ;
3828-
--tw-pan-y: ;
3829-
--tw-pinch-zoom: ;
3827+
--tw-pan-x: initial;
3828+
--tw-pan-y: initial;
3829+
--tw-pinch-zoom: initial;
38303830
}
38313831
}
38323832
}
@@ -3868,9 +3868,9 @@ test('touch-pinch-zoom', () => {
38683868
@supports (-moz-orient: inline) {
38693869
@layer base {
38703870
*, :before, :after, ::backdrop {
3871-
--tw-pan-x: ;
3872-
--tw-pan-y: ;
3873-
--tw-pinch-zoom: ;
3871+
--tw-pan-x: initial;
3872+
--tw-pan-y: initial;
3873+
--tw-pinch-zoom: initial;
38743874
}
38753875
}
38763876
}
@@ -8239,8 +8239,8 @@ test('from', () => {
82398239
--tw-gradient-from: #0000;
82408240
--tw-gradient-to: #0000;
82418241
--tw-gradient-via: transparent;
8242-
--tw-gradient-stops: ;
8243-
--tw-gradient-via-stops: ;
8242+
--tw-gradient-stops: initial;
8243+
--tw-gradient-via-stops: initial;
82448244
--tw-gradient-from-position: 0%;
82458245
--tw-gradient-via-position: 50%;
82468246
--tw-gradient-to-position: 100%;
@@ -8476,8 +8476,8 @@ test('via', () => {
84768476
--tw-gradient-from: #0000;
84778477
--tw-gradient-to: #0000;
84788478
--tw-gradient-via: transparent;
8479-
--tw-gradient-stops: ;
8480-
--tw-gradient-via-stops: ;
8479+
--tw-gradient-stops: initial;
8480+
--tw-gradient-via-stops: initial;
84818481
--tw-gradient-from-position: 0%;
84828482
--tw-gradient-via-position: 50%;
84838483
--tw-gradient-to-position: 100%;
@@ -8701,8 +8701,8 @@ test('to', () => {
87018701
--tw-gradient-from: #0000;
87028702
--tw-gradient-to: #0000;
87038703
--tw-gradient-via: transparent;
8704-
--tw-gradient-stops: ;
8705-
--tw-gradient-via-stops: ;
8704+
--tw-gradient-stops: initial;
8705+
--tw-gradient-via-stops: initial;
87068706
--tw-gradient-from-position: 0%;
87078707
--tw-gradient-via-position: 50%;
87088708
--tw-gradient-to-position: 100%;
@@ -10477,15 +10477,15 @@ test('filter', () => {
1047710477
@supports (-moz-orient: inline) {
1047810478
@layer base {
1047910479
*, :before, :after, ::backdrop {
10480-
--tw-blur: ;
10481-
--tw-brightness: ;
10482-
--tw-contrast: ;
10483-
--tw-grayscale: ;
10484-
--tw-hue-rotate: ;
10485-
--tw-invert: ;
10486-
--tw-opacity: ;
10487-
--tw-saturate: ;
10488-
--tw-sepia: ;
10480+
--tw-blur: initial;
10481+
--tw-brightness: initial;
10482+
--tw-contrast: initial;
10483+
--tw-grayscale: initial;
10484+
--tw-hue-rotate: initial;
10485+
--tw-invert: initial;
10486+
--tw-opacity: initial;
10487+
--tw-saturate: initial;
10488+
--tw-sepia: initial;
1048910489
}
1049010490
}
1049110491
}
@@ -10787,15 +10787,15 @@ test('backdrop-filter', () => {
1078710787
@supports (-moz-orient: inline) {
1078810788
@layer base {
1078910789
*, :before, :after, ::backdrop {
10790-
--tw-backdrop-blur: ;
10791-
--tw-backdrop-brightness: ;
10792-
--tw-backdrop-contrast: ;
10793-
--tw-backdrop-grayscale: ;
10794-
--tw-backdrop-hue-rotate: ;
10795-
--tw-backdrop-invert: ;
10796-
--tw-backdrop-opacity: ;
10797-
--tw-backdrop-saturate: ;
10798-
--tw-backdrop-sepia: ;
10790+
--tw-backdrop-blur: initial;
10791+
--tw-backdrop-brightness: initial;
10792+
--tw-backdrop-contrast: initial;
10793+
--tw-backdrop-grayscale: initial;
10794+
--tw-backdrop-hue-rotate: initial;
10795+
--tw-backdrop-invert: initial;
10796+
--tw-backdrop-opacity: initial;
10797+
--tw-backdrop-saturate: initial;
10798+
--tw-backdrop-sepia: initial;
1079910799
}
1080010800
}
1080110801
}
@@ -11157,10 +11157,10 @@ test('contain', () => {
1115711157
@supports (-moz-orient: inline) {
1115811158
@layer base {
1115911159
*, :before, :after, ::backdrop {
11160-
--tw-contain-size: ;
11161-
--tw-contain-layout: ;
11162-
--tw-contain-paint: ;
11163-
--tw-contain-style: ;
11160+
--tw-contain-size: initial;
11161+
--tw-contain-layout: initial;
11162+
--tw-contain-paint: initial;
11163+
--tw-contain-style: initial;
1116411164
}
1116511165
}
1116611166
}
@@ -11378,11 +11378,11 @@ test('font-variant-numeric', () => {
1137811378
@supports (-moz-orient: inline) {
1137911379
@layer base {
1138011380
*, :before, :after, ::backdrop {
11381-
--tw-ordinal: ;
11382-
--tw-slashed-zero: ;
11383-
--tw-numeric-figure: ;
11384-
--tw-numeric-spacing: ;
11385-
--tw-numeric-fraction: ;
11381+
--tw-ordinal: initial;
11382+
--tw-slashed-zero: initial;
11383+
--tw-numeric-figure: initial;
11384+
--tw-numeric-spacing: initial;
11385+
--tw-numeric-fraction: initial;
1138611386
}
1138711387
}
1138811388
}
@@ -12104,11 +12104,11 @@ test('shadow', () => {
1210412104
--tw-shadow-colored: 0 0 #0000;
1210512105
--tw-inset-shadow: 0 0 #0000;
1210612106
--tw-inset-shadow-colored: 0 0 #0000;
12107-
--tw-ring-color: ;
12107+
--tw-ring-color: initial;
1210812108
--tw-ring-shadow: 0 0 #0000;
12109-
--tw-inset-ring-color: ;
12109+
--tw-inset-ring-color: initial;
1211012110
--tw-inset-ring-shadow: 0 0 #0000;
12111-
--tw-ring-inset: ;
12111+
--tw-ring-inset: initial;
1211212112
--tw-ring-offset-width: 0px;
1211312113
--tw-ring-offset-color: #fff;
1211412114
--tw-ring-offset-shadow: 0 0 #0000;
@@ -12356,11 +12356,11 @@ test('inset-shadow', () => {
1235612356
--tw-shadow-colored: 0 0 #0000;
1235712357
--tw-inset-shadow: 0 0 #0000;
1235812358
--tw-inset-shadow-colored: 0 0 #0000;
12359-
--tw-ring-color: ;
12359+
--tw-ring-color: initial;
1236012360
--tw-ring-shadow: 0 0 #0000;
12361-
--tw-inset-ring-color: ;
12361+
--tw-inset-ring-color: initial;
1236212362
--tw-inset-ring-shadow: 0 0 #0000;
12363-
--tw-ring-inset: ;
12363+
--tw-ring-inset: initial;
1236412364
--tw-ring-offset-width: 0px;
1236512365
--tw-ring-offset-color: #fff;
1236612366
--tw-ring-offset-shadow: 0 0 #0000;
@@ -12604,11 +12604,11 @@ test('ring', () => {
1260412604
--tw-shadow-colored: 0 0 #0000;
1260512605
--tw-inset-shadow: 0 0 #0000;
1260612606
--tw-inset-shadow-colored: 0 0 #0000;
12607-
--tw-ring-color: ;
12607+
--tw-ring-color: initial;
1260812608
--tw-ring-shadow: 0 0 #0000;
12609-
--tw-inset-ring-color: ;
12609+
--tw-inset-ring-color: initial;
1261012610
--tw-inset-ring-shadow: 0 0 #0000;
12611-
--tw-ring-inset: ;
12611+
--tw-ring-inset: initial;
1261212612
--tw-ring-offset-width: 0px;
1261312613
--tw-ring-offset-color: #fff;
1261412614
--tw-ring-offset-shadow: 0 0 #0000;
@@ -12853,11 +12853,11 @@ test('inset-ring', () => {
1285312853
--tw-shadow-colored: 0 0 #0000;
1285412854
--tw-inset-shadow: 0 0 #0000;
1285512855
--tw-inset-shadow-colored: 0 0 #0000;
12856-
--tw-ring-color: ;
12856+
--tw-ring-color: initial;
1285712857
--tw-ring-shadow: 0 0 #0000;
12858-
--tw-inset-ring-color: ;
12858+
--tw-inset-ring-color: initial;
1285912859
--tw-inset-ring-shadow: 0 0 #0000;
12860-
--tw-ring-inset: ;
12860+
--tw-ring-inset: initial;
1286112861
--tw-ring-offset-width: 0px;
1286212862
--tw-ring-offset-color: #fff;
1286312863
--tw-ring-offset-shadow: 0 0 #0000;

0 commit comments

Comments
 (0)