Skip to content

Commit cb15f4e

Browse files
philipp-spiessphilipp-spiess
committed
Emit @property fallbacks at the beginning of the file
1 parent 4fc6315 commit cb15f4e

File tree

6 files changed

+55
-66
lines changed

6 files changed

+55
-66
lines changed

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
4-
"@layer theme {
4+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
5+
*, :before, :after, ::backdrop {
6+
--tw-font-weight: initial;
7+
}
8+
}
9+
10+
@layer theme {
511
:root, :host {
612
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
713
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -281,14 +287,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
281287
}
282288
}
283289
284-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
285-
@layer base {
286-
*, :before, :after, ::backdrop {
287-
--tw-font-weight: initial;
288-
}
289-
}
290-
}
291-
292290
@property --tw-font-weight {
293291
syntax: "*";
294292
inherits: false

‎packages/tailwindcss/src/ast.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -569,11 +569,14 @@ export function optimizeAst(
569569
}
570570

571571
if (fallbackAst.length > 0) {
572-
newAst.push(
572+
let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment') ?? 0
573+
newAst.splice(
574+
firstNonCommentIndex,
575+
0,
573576
atRule(
574577
'@supports',
575578
'((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
576-
[atRule('@layer', 'base', fallbackAst)],
579+
fallbackAst,
577580
),
578581
)
579582
}

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,12 @@ describe('theme callbacks', () => {
322322

323323
expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
324324
.toMatchInlineSnapshot(`
325-
".prose {
325+
"@supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
326+
*, ::before, ::after, ::backdrop {
327+
--tw-leading: initial;
328+
}
329+
}
330+
.prose {
326331
[class~=lead-base] {
327332
font-size: 100rem;
328333
line-height: 201rem;
@@ -348,13 +353,6 @@ describe('theme callbacks', () => {
348353
--tw-leading: 201rem;
349354
line-height: 201rem;
350355
}
351-
@supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
352-
@layer base {
353-
*, ::before, ::after, ::backdrop {
354-
--tw-leading: initial;
355-
}
356-
}
357-
}
358356
@property --tw-leading {
359357
syntax: "*";
360358
inherits: false;

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,13 @@ test('variables in utilities should not be marked as important', async () => {
101101
['ease-out!', 'z-10!'],
102102
),
103103
).toMatchInlineSnapshot(`
104-
":root, :host {
104+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
105+
*, :before, :after, ::backdrop {
106+
--tw-ease: initial;
107+
}
108+
}
109+
110+
:root, :host {
105111
--ease-out: cubic-bezier(0, 0, .2, 1);
106112
}
107113
@@ -114,14 +120,6 @@ test('variables in utilities should not be marked as important', async () => {
114120
transition-timing-function: var(--ease-out) !important;
115121
}
116122
117-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
118-
@layer base {
119-
*, :before, :after, ::backdrop {
120-
--tw-ease: initial;
121-
}
122-
}
123-
}
124-
125123
@property --tw-ease {
126124
syntax: "*";
127125
inherits: false

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24420,19 +24420,17 @@ test.only('test the thing', async () => {
2442024420
['translate-x-1/2'],
2442124421
),
2442224422
).toMatchInlineSnapshot(`
24423-
".translate-x-1\\/2 {
24424-
--tw-translate-x: calc(1 / 2 * 100%);
24425-
translate: var(--tw-translate-x) var(--tw-translate-y);
24423+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
24424+
*, :before, :after, ::backdrop {
24425+
--tw-translate-x: 0;
24426+
--tw-translate-y: 0;
24427+
--tw-translate-z: 0;
24428+
}
2442624429
}
2442724430

24428-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
24429-
@layer base {
24430-
*, :before, :after, ::backdrop {
24431-
--tw-translate-x: 0;
24432-
--tw-translate-y: 0;
24433-
--tw-translate-z: 0;
24434-
}
24435-
}
24431+
.translate-x-1\\/2 {
24432+
--tw-translate-x: calc(1 / 2 * 100%);
24433+
translate: var(--tw-translate-x) var(--tw-translate-y);
2443624434
}
2443724435

2443824436
@property --tw-translate-x {

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

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -114,17 +114,15 @@ test('details-content', async () => {
114114

115115
test('before', async () => {
116116
expect(await run(['before:flex'])).toMatchInlineSnapshot(`
117-
".before\\:flex:before {
118-
content: var(--tw-content);
119-
display: flex;
117+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
118+
*, :before, :after, ::backdrop {
119+
--tw-content: "";
120+
}
120121
}
121122
122-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
123-
@layer base {
124-
*, :before, :after, ::backdrop {
125-
--tw-content: "";
126-
}
127-
}
123+
.before\\:flex:before {
124+
content: var(--tw-content);
125+
display: flex;
128126
}
129127
130128
@property --tw-content {
@@ -138,17 +136,15 @@ test('before', async () => {
138136

139137
test('after', async () => {
140138
expect(await run(['after:flex'])).toMatchInlineSnapshot(`
141-
".after\\:flex:after {
142-
content: var(--tw-content);
143-
display: flex;
139+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
140+
*, :before, :after, ::backdrop {
141+
--tw-content: "";
142+
}
144143
}
145144
146-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
147-
@layer base {
148-
*, :before, :after, ::backdrop {
149-
--tw-content: "";
150-
}
151-
}
145+
.after\\:flex:after {
146+
content: var(--tw-content);
147+
display: flex;
152148
}
153149
154150
@property --tw-content {
@@ -2248,7 +2244,13 @@ test('variant order', async () => {
22482244
],
22492245
),
22502246
).toMatchInlineSnapshot(`
2251-
"@media (hover: hover) {
2247+
"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2248+
*, :before, :after, ::backdrop {
2249+
--tw-content: "";
2250+
}
2251+
}
2252+
2253+
@media (hover: hover) {
22522254
.group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
22532255
display: flex;
22542256
}
@@ -2411,14 +2413,6 @@ test('variant order', async () => {
24112413
display: flex;
24122414
}
24132415
2414-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2415-
@layer base {
2416-
*, :before, :after, ::backdrop {
2417-
--tw-content: "";
2418-
}
2419-
}
2420-
}
2421-
24222416
@property --tw-content {
24232417
syntax: "*";
24242418
inherits: false;

0 commit comments

Comments
 (0)