diff --git a/CHANGELOG.md b/CHANGELOG.md index 865e232c1cf1..07dfc8d25f0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Support combining arbitrary shadows without a color with shadow color utilities ([#13876](https://github.com/tailwindlabs/tailwindcss/pull/13876)) +- Ensure `@property` fallbacks work correctly with properties with no `initial-value` ([#13949](https://github.com/tailwindlabs/tailwindcss/pull/13949)) ## [4.0.0-alpha.16] - 2024-06-07 diff --git a/packages/tailwindcss/playwright.config.ts b/packages/tailwindcss/playwright.config.ts index 1022c63fefe5..8b728ca82e19 100644 --- a/packages/tailwindcss/playwright.config.ts +++ b/packages/tailwindcss/playwright.config.ts @@ -36,11 +36,14 @@ export default defineConfig({ name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, - { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, /* Test against mobile viewports. */ // { diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index ab2960330de3..d2a8930eb2b7 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -431,11 +431,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --tw-shadow-colored: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-colored: 0 0 #0000; - --tw-ring-color: ; + --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: ; + --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: ; + --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 22ad6eeed5bc..bfdd63b6981e 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -148,9 +148,9 @@ export function toCss(ast: AstNode[]) { } if (inherits) { - propertyFallbacksRoot.push(decl(property, initialValue ?? ' ')) + propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial')) } else { - propertyFallbacksUniversal.push(decl(property, initialValue ?? ' ')) + propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial')) } seenAtProperties.add(node.selector) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e6d9d5bd6425..3c8324d53245 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -3824,9 +3824,9 @@ test('touch-pan', () => { @supports (-moz-orient: inline) { @layer base { *, :before, :after, ::backdrop { - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; } } } @@ -3868,9 +3868,9 @@ test('touch-pinch-zoom', () => { @supports (-moz-orient: inline) { @layer base { *, :before, :after, ::backdrop { - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; } } } @@ -8239,8 +8239,8 @@ test('from', () => { --tw-gradient-from: #0000; --tw-gradient-to: #0000; --tw-gradient-via: transparent; - --tw-gradient-stops: ; - --tw-gradient-via-stops: ; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; @@ -8476,8 +8476,8 @@ test('via', () => { --tw-gradient-from: #0000; --tw-gradient-to: #0000; --tw-gradient-via: transparent; - --tw-gradient-stops: ; - --tw-gradient-via-stops: ; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; @@ -8701,8 +8701,8 @@ test('to', () => { --tw-gradient-from: #0000; --tw-gradient-to: #0000; --tw-gradient-via: transparent; - --tw-gradient-stops: ; - --tw-gradient-via-stops: ; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; @@ -10477,15 +10477,15 @@ test('filter', () => { @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: ; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; } } } @@ -10787,15 +10787,15 @@ test('backdrop-filter', () => { @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: ; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; } } } @@ -11157,10 +11157,10 @@ test('contain', () => { @supports (-moz-orient: inline) { @layer base { *, :before, :after, ::backdrop { - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; + --tw-contain-size: initial; + --tw-contain-layout: initial; + --tw-contain-paint: initial; + --tw-contain-style: initial; } } } @@ -11378,11 +11378,11 @@ test('font-variant-numeric', () => { @supports (-moz-orient: inline) { @layer base { *, :before, :after, ::backdrop { - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; } } } @@ -12104,11 +12104,11 @@ test('shadow', () => { --tw-shadow-colored: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-colored: 0 0 #0000; - --tw-ring-color: ; + --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: ; + --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: ; + --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; @@ -12356,11 +12356,11 @@ test('inset-shadow', () => { --tw-shadow-colored: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-colored: 0 0 #0000; - --tw-ring-color: ; + --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: ; + --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: ; + --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; @@ -12604,11 +12604,11 @@ test('ring', () => { --tw-shadow-colored: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-colored: 0 0 #0000; - --tw-ring-color: ; + --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: ; + --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: ; + --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; @@ -12853,11 +12853,11 @@ test('inset-ring', () => { --tw-shadow-colored: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-colored: 0 0 #0000; - --tw-ring-color: ; + --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: ; + --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: ; + --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000;