Skip to content

Commit

Permalink
add var(…) ourselves now that the automatic var injection is gone
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobinMalfait @adamwathan
RobinMalfait authored and adamwathan committed Sep 23, 2024
1 parent 7b7c263 commit 858e004
Show file tree
Hide file tree
Showing 4 changed files with 686 additions and 660 deletions.
90 changes: 45 additions & 45 deletions packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ exports[`border-* 1`] = `
border-width: 12px;
}
.border-\\[length\\:--my-width\\], .border-\\[line-width\\:--my-width\\] {
.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
border-style: var(--tw-border-style);
border-width: var(--my-width);
}
Expand Down Expand Up @@ -66,19 +66,19 @@ exports[`border-* 1`] = `
border-color: #0088cc80;
}
.border-\\[--my-color\\] {
.border-\\[color\\:var\\(--my-color\\)\\] {
border-color: var(--my-color);
}
.border-\\[--my-color\\]\\/50 {
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-\\[color\\:--my-color\\] {
.border-\\[var\\(--my-color\\)\\] {
border-color: var(--my-color);
}
.border-\\[color\\:--my-color\\]\\/50 {
.border-\\[var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -159,7 +159,7 @@ exports[`border-b-* 1`] = `
border-bottom-width: 12px;
}
.border-b-\\[length\\:--my-width\\], .border-b-\\[line-width\\:--my-width\\] {
.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: var(--my-width);
}
Expand Down Expand Up @@ -187,19 +187,19 @@ exports[`border-b-* 1`] = `
border-bottom-color: #0088cc80;
}
.border-b-\\[--my-color\\] {
.border-b-\\[color\\:var\\(--my-color\\)\\] {
border-bottom-color: var(--my-color);
}
.border-b-\\[--my-color\\]\\/50 {
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-b-\\[color\\:--my-color\\] {
.border-b-\\[var\\(--my-color\\)\\] {
border-bottom-color: var(--my-color);
}
.border-b-\\[color\\:--my-color\\]\\/50 {
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -280,7 +280,7 @@ exports[`border-e-* 1`] = `
border-inline-end-width: 12px;
}
.border-e-\\[length\\:--my-width\\], .border-e-\\[line-width\\:--my-width\\] {
.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: var(--my-width);
}
Expand Down Expand Up @@ -308,19 +308,19 @@ exports[`border-e-* 1`] = `
border-inline-end-color: #0088cc80;
}
.border-e-\\[--my-color\\] {
.border-e-\\[color\\:var\\(--my-color\\)\\] {
border-inline-end-color: var(--my-color);
}
.border-e-\\[--my-color\\]\\/50 {
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-e-\\[color\\:--my-color\\] {
.border-e-\\[var\\(--my-color\\)\\] {
border-inline-end-color: var(--my-color);
}
.border-e-\\[color\\:--my-color\\]\\/50 {
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -401,7 +401,7 @@ exports[`border-l-* 1`] = `
border-left-width: 12px;
}
.border-l-\\[length\\:--my-width\\], .border-l-\\[line-width\\:--my-width\\] {
.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
border-left-style: var(--tw-border-style);
border-left-width: var(--my-width);
}
Expand Down Expand Up @@ -429,19 +429,19 @@ exports[`border-l-* 1`] = `
border-left-color: #0088cc80;
}
.border-l-\\[--my-color\\] {
.border-l-\\[color\\:var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
}
.border-l-\\[--my-color\\]\\/50 {
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-l-\\[color\\:--my-color\\] {
.border-l-\\[var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
}
.border-l-\\[color\\:--my-color\\]\\/50 {
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -522,7 +522,7 @@ exports[`border-r-* 1`] = `
border-right-width: 12px;
}
.border-r-\\[length\\:--my-width\\], .border-r-\\[line-width\\:--my-width\\] {
.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
border-right-style: var(--tw-border-style);
border-right-width: var(--my-width);
}
Expand Down Expand Up @@ -550,19 +550,19 @@ exports[`border-r-* 1`] = `
border-right-color: #0088cc80;
}
.border-r-\\[--my-color\\] {
.border-r-\\[color\\:var\\(--my-color\\)\\] {
border-right-color: var(--my-color);
}
.border-r-\\[--my-color\\]\\/50 {
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-r-\\[color\\:--my-color\\] {
.border-r-\\[var\\(--my-color\\)\\] {
border-right-color: var(--my-color);
}
.border-r-\\[color\\:--my-color\\]\\/50 {
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -643,7 +643,7 @@ exports[`border-s-* 1`] = `
border-inline-start-width: 12px;
}
.border-s-\\[length\\:--my-width\\], .border-s-\\[line-width\\:--my-width\\] {
.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: var(--my-width);
}
Expand Down Expand Up @@ -671,19 +671,19 @@ exports[`border-s-* 1`] = `
border-inline-start-color: #0088cc80;
}
.border-s-\\[--my-color\\] {
.border-s-\\[color\\:var\\(--my-color\\)\\] {
border-inline-start-color: var(--my-color);
}
.border-s-\\[--my-color\\]\\/50 {
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-s-\\[color\\:--my-color\\] {
.border-s-\\[var\\(--my-color\\)\\] {
border-inline-start-color: var(--my-color);
}
.border-s-\\[color\\:--my-color\\]\\/50 {
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -764,7 +764,7 @@ exports[`border-t-* 1`] = `
border-top-width: 12px;
}
.border-t-\\[length\\:--my-width\\], .border-t-\\[line-width\\:--my-width\\] {
.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
border-top-style: var(--tw-border-style);
border-top-width: var(--my-width);
}
Expand Down Expand Up @@ -792,19 +792,19 @@ exports[`border-t-* 1`] = `
border-top-color: #0088cc80;
}
.border-t-\\[--my-color\\] {
.border-t-\\[color\\:var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
}
.border-t-\\[--my-color\\]\\/50 {
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-t-\\[color\\:--my-color\\] {
.border-t-\\[var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
}
.border-t-\\[color\\:--my-color\\]\\/50 {
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -897,7 +897,7 @@ exports[`border-x-* 1`] = `
border-right-width: 12px;
}
.border-x-\\[length\\:--my-width\\], .border-x-\\[line-width\\:--my-width\\] {
.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
border-left-style: var(--tw-border-style);
border-right-style: var(--tw-border-style);
border-left-width: var(--my-width);
Expand Down Expand Up @@ -935,22 +935,22 @@ exports[`border-x-* 1`] = `
border-right-color: #0088cc80;
}
.border-x-\\[--my-color\\] {
.border-x-\\[color\\:var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
border-right-color: var(--my-color);
}
.border-x-\\[--my-color\\]\\/50 {
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-x-\\[color\\:--my-color\\] {
.border-x-\\[var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
border-right-color: var(--my-color);
}
.border-x-\\[color\\:--my-color\\]\\/50 {
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down Expand Up @@ -1050,7 +1050,7 @@ exports[`border-y-* 1`] = `
border-bottom-width: 12px;
}
.border-y-\\[length\\:--my-width\\], .border-y-\\[line-width\\:--my-width\\] {
.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
border-top-style: var(--tw-border-style);
border-bottom-style: var(--tw-border-style);
border-top-width: var(--my-width);
Expand Down Expand Up @@ -1088,22 +1088,22 @@ exports[`border-y-* 1`] = `
border-bottom-color: #0088cc80;
}
.border-y-\\[--my-color\\] {
.border-y-\\[color\\:var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
border-bottom-color: var(--my-color);
}
.border-y-\\[--my-color\\]\\/50 {
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-y-\\[color\\:--my-color\\] {
.border-y-\\[var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
border-bottom-color: var(--my-color);
}
.border-y-\\[color\\:--my-color\\]\\/50 {
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
Expand Down
Loading

0 comments on commit 858e004

Please sign in to comment.