aphrody-labs/tailwindcss
1
0 Fork 0
mirror of https://github.com/aphrody-labs/tailwindcss.git synced 2026-10-17 12:45:52 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve CSS output in tests to better reflect reality (#10454)

Browse Source 
* drop empty lines when diffing output

* replace expected css with optimized lightningcss output

Lightning CSS generates a more optimal CSS output.

Right now the tests are setup in a way that both the generated css and
expected css are run through `lightningcss` to make sure that the output
is concistent for the `stable` and `oxide` engines. But this also means
that the expected output _could_ be larger (aka not optimized) and still
matches (after it runs through lightningcss).

By replacing this with the more optimal output we achieve a few things:

1. This better reflects reality since we will be using `lightningcss`.
2. This gets rid of unnecessary css.
3. Removed code!
This commit is contained in:
Robin Malfait authored and GitHub committed 2023-01-31 15:37:49 +01:00
1 parent afd159dd8d
commit a4f1ff9052
55 files changed
+1134 -3145
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

jest/customMatchers.js
+2 -2
View File
@@ -74,8 +74,8 @@ function toMatchFormattedCss(received = '', argument = '') {
)
}
: () => {
let actual = formatPrettier(formattedReceived)
let expected = formatPrettier(formattedArgument)
let actual = formatPrettier(formattedReceived).replace(/\n\n/g, '\n')
let expected = formatPrettier(formattedArgument).replace(/\n\n/g, '\n')
let diffString = diff(expected, actual, {
expand: this.expand,
tests/animations.test.js
+16 -16
View File
@@ -22,31 +22,31 @@ crosscheck(() => {
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
transform: scale(2);
}
}
.hover\:animate-ping:hover {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite ping;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
transform: translateY(-25%);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
transform: none;
}
}
.group:hover .group-hover\:animate-bounce {
animation: bounce 1s infinite;
animation: 1s infinite bounce;
}
`)
})
@@ -75,7 +75,7 @@ crosscheck(() => {
}
}
.animate-one {
animation: one 2s;
animation: 2s one;
}
`)
})
@@ -105,7 +105,7 @@ crosscheck(() => {
}
}
.tw-animate-one {
animation: tw-one 2s;
animation: 2s tw-one;
}
`)
})
@@ -128,12 +128,12 @@ crosscheck(() => {
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
transform: translateY(-25%);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
transform: none;
}
}
@keyframes pulse {
@@ -142,7 +142,7 @@ crosscheck(() => {
}
}
.animate-multiple {
animation: bounce 2s linear, pulse 3s ease-in;
animation: 2s linear bounce, 3s ease-in pulse;
}
`)
})
@@ -177,7 +177,7 @@ crosscheck(() => {
}
}
.animate-multiple {
animation: one 2s, two 3s;
animation: 2s one, 3s two;
}
`)
})
@@ -215,7 +215,7 @@ crosscheck(() => {
}
}
.animate-zoom-\.5 {
animation: zoom-\.5 2s;
animation: 2s zoom-\.5;
}
@keyframes zoom-1\.5 {
to {
@@ -223,7 +223,7 @@ crosscheck(() => {
}
}
.animate-zoom-1\.5 {
animation: zoom-1\.5 2s;
animation: 2s zoom-1\.5;
}
`)
})
@@ -262,7 +262,7 @@ crosscheck(() => {
}
}
.tw-animate-zoom-\.5 {
animation: tw-zoom-\.5 2s;
animation: 2s tw-zoom-\.5;
}
@keyframes tw-zoom-1\.5 {
to {
@@ -270,7 +270,7 @@ crosscheck(() => {
}
}
.tw-animate-zoom-1\.5 {
animation: tw-zoom-1\.5 2s;
animation: 2s tw-zoom-1\.5;
}
`)
})
tests/any-type.test.js
+14 -19
View File
@@ -283,15 +283,11 @@ crosscheck(({ stable, oxide }) => {
.flex-\[var\(--any-value\)\] {
flex: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\],
.shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\],
.grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
@@ -432,8 +428,8 @@ crosscheck(({ stable, oxide }) => {
}
.space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse));
margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse));
}
.space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -516,11 +512,11 @@ crosscheck(({ stable, oxide }) => {
}
.from-\[var\(--any-value\)\] {
--tw-gradient-from: var(--any-value);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[var\(--any-value\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
}
.to-\[var\(--any-value\)\] {
@@ -738,8 +734,8 @@ crosscheck(({ stable, oxide }) => {
}
.transition-\[var\(--any-value\)\] {
transition-property: var(--any-value);
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--any-value\)\] {
transition-delay: var(--any-value);
@@ -747,12 +743,15 @@ crosscheck(({ stable, oxide }) => {
.duration-\[var\(--any-value\)\] {
transition-duration: var(--any-value);
}
.ease-\[var\(--any-value\)\] {
transition-timing-function: var(--any-value);
}
.will-change-\[var\(--any-value\)\] {
will-change: var(--any-value);
}
.content-\[var\(--any-value\)\] {
--tw-content: var(--any-value);
content: var(--tw-content);
@@ -856,15 +855,11 @@ crosscheck(({ stable, oxide }) => {
.flex-\[var\(--any-value\)\] {
flex: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\],
.shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\],
.grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
@@ -1089,11 +1084,11 @@ crosscheck(({ stable, oxide }) => {
}
.from-\[var\(--any-value\)\] {
--tw-gradient-from: var(--any-value);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[var\(--any-value\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
}
.to-\[var\(--any-value\)\] {
@@ -1311,8 +1306,8 @@ crosscheck(({ stable, oxide }) => {
}
.transition-\[var\(--any-value\)\] {
transition-property: var(--any-value);
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--any-value\)\] {
transition-delay: var(--any-value);
tests/apply.test.js
+56 -168
View File
@@ -161,24 +161,17 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.basic-example {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
}
.class-order {
padding: 2rem;
padding-left: 0.75rem;
padding-bottom: 1.75rem;
padding-top: 1rem;
padding-right: 0.25rem;
padding: 1rem 0.25rem 1.75rem 0.75rem;
}
.with-additional-properties {
font-weight: 500;
text-align: right;
font-weight: 500;
}
.variants {
font-weight: 600;
@@ -234,9 +227,7 @@ crosscheck(() => {
text-align: left;
}
}
.apply-custom-utility {
custom: stuff;
}
.apply-custom-utility,
.apply-custom-utility:hover {
custom: stuff;
}
@@ -252,13 +243,10 @@ crosscheck(() => {
}
.multiple,
.selectors {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
}
.multiple-variants:hover,
.selectors-variants:hover {
@@ -289,14 +277,14 @@ crosscheck(() => {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.complex-utilities:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -315,23 +303,17 @@ crosscheck(() => {
}
.btn {
border-radius: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
padding: 0.5rem 1rem;
font-weight: 700;
}
.btn-blue {
border-radius: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 700;
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
border-radius: 0.25rem;
padding: 0.5rem 1rem;
font-weight: 700;
}
.btn-blue:hover {
--tw-bg-opacity: 1;
@@ -385,18 +367,13 @@ crosscheck(() => {
font-weight: 300;
}
}
.use-with-other-properties-base {
color: green;
font-weight: 700;
}
.use-with-other-properties-base,
.use-with-other-properties-component {
color: green;
font-weight: 700;
}
.add-sibling-properties {
padding: 2rem;
padding-left: 1rem;
padding-right: 1rem;
padding: 2rem 1rem;
}
.add-sibling-properties:hover {
padding-left: 0.5rem;
@@ -415,23 +392,20 @@ crosscheck(() => {
}
}
.add-sibling-properties {
padding-top: 3px;
color: green;
padding-top: 3px;
font-weight: 700;
}
h1 {
font-size: 1.5rem;
line-height: 2rem;
}
@media (min-width: 640px) {
h1 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 1.5rem;
@@ -454,18 +428,15 @@ crosscheck(() => {
line-height: 2rem;
}
}
.important-modifier {
border-radius: 0.375rem !important;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.375rem !important;
}
.important-modifier-variant {
padding-left: 1rem;
padding-right: 1rem;
}
.important-modifier-variant:hover {
border-radius: 0.375rem !important;
}
@@ -475,7 +446,7 @@ crosscheck(() => {
}
}
.foo {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
@keyframes pulse {
50% {
@@ -483,7 +454,7 @@ crosscheck(() => {
}
}
.bar {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse !important;
}
`)
})
@@ -675,37 +646,29 @@ crosscheck(() => {
await run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
.font-bold,
.foo {
font-weight: 700;
}
.bar {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
font-weight: 700;
}
.bar:hover {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.baz {
text-decoration-line: underline;
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
font-weight: 700;
text-decoration-line: underline;
}
.baz:hover {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.keep-me-even-though-I-am-not-used-in-content {
color: green;
}
@@ -743,10 +706,8 @@ crosscheck(() => {
await run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.baz {
text-decoration-line: underline;
text-decoration-line: none;
}
.container {
width: 100%;
}
@@ -775,19 +736,13 @@ crosscheck(() => {
max-width: 1536px;
}
}
.keep-me-even-though-I-am-not-used-in-content {
color: green;
}
.font-bold {
font-weight: 700;
}
.font-bold,
.foo {
font-weight: 700;
}
.bar {
text-decoration-line: none;
}
@@ -811,14 +766,14 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.foo {
position: absolute;
top: 50%;
left: 50%;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
position: absolute;
top: 50%;
left: 50%;
}
`)
})
@@ -854,8 +809,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.foo {
position: relative;
--tw-aspect-w: 1;
position: relative;
}
`)
})
@@ -934,11 +889,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-gray-500,
.focus\:bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1151,10 +1102,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.foo {
color: red;
}
.foo,
.bar {
color: red;
}
@@ -1223,25 +1171,21 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.foo {
font-weight: bold;
color: green;
font-weight: bold;
}
@supports (a: b) {
.foo {
color: blue;
color: #00f;
}
}
.bar {
color: green;
}
@supports (a: b) {
.bar {
color: blue;
color: #00f;
}
.something-unrelated {
color: red;
}
@@ -1274,12 +1218,12 @@ crosscheck(() => {
color: red;
}
.bar {
background-color: blue;
background-color: #00f;
}
.foo {
position: absolute;
color: red;
background-color: blue;
background-color: #00f;
position: absolute;
}
`)
})
@@ -1338,10 +1282,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
span,
.b {
text-decoration-line: underline;
}
.b,
.c {
text-decoration-line: underline;
}
@@ -1372,10 +1313,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
#a,
.b {
text-decoration-line: underline;
}
.b,
.c {
text-decoration-line: underline;
}
@@ -1407,11 +1345,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.a {
text-transform: uppercase;
color: red;
}
.a,
.b {
text-transform: uppercase;
color: red;
@@ -1440,11 +1374,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.a {
text-transform: uppercase;
color: red;
}
.a,
.b {
text-transform: uppercase;
color: red;
@@ -1477,11 +1407,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.a {
text-transform: uppercase;
color: red;
}
.a,
.b {
text-transform: uppercase;
color: red;
@@ -1520,10 +1446,9 @@ crosscheck(() => {
color: red;
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
color: #00f;
text-decoration: underline;
color: blue;
}
.b {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -1554,14 +1479,12 @@ crosscheck(() => {
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 1024px) {
h2 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (min-width: 640px) {
h2 {
font-size: 1.5rem;
@@ -1724,7 +1647,6 @@ crosscheck(() => {
color: rgb(22 163 74 / var(--tw-text-opacity));
font-size: 1rem;
}
@media print {
html,
body {
@@ -1761,10 +1683,9 @@ crosscheck(() => {
.a {
color: red;
}
.b {
color: red;
color: blue;
color: #00f;
}
`)
})
@@ -1799,10 +1720,7 @@ crosscheck(() => {
let result = await run(inputBefore, config)
expect(result.css).toMatchFormattedCss(css`
.foo {
color: green;
}
.foo,
.bar {
color: green;
}
@@ -1811,10 +1729,7 @@ crosscheck(() => {
result = await run(inputAfter, config)
expect(result.css).toMatchFormattedCss(css`
.foo {
color: red;
}
.foo,
.bar {
color: red;
}
@@ -1843,7 +1758,6 @@ crosscheck(() => {
#myselector .custom-utility {
font-weight: 400;
}
#myselector .group:hover .custom-utility {
text-decoration-line: underline;
}
@@ -1869,7 +1783,6 @@ crosscheck(() => {
.custom-utility {
font-weight: 400;
}
.group:hover .custom-utility {
text-decoration-line: underline;
}
@@ -1895,7 +1808,6 @@ crosscheck(() => {
#myselector .custom-utility {
font-weight: 400;
}
.group:hover #myselector .custom-utility {
text-decoration-line: underline;
}
@@ -1929,9 +1841,7 @@ crosscheck(() => {
.foo-1 {
margin: 10px;
}
.-foo-1 {
margin: -15px;
}
.-foo-1,
.new-class {
margin: -15px;
}
@@ -1974,28 +1884,15 @@ crosscheck(() => {
.bar.foo {
color: green;
}
header:nth-of-type(odd).bar {
header:nth-of-type(2n + 1).bar {
color: red;
}
header.bar:nth-of-type(odd) {
color: green;
}
header.bar::after {
color: red;
color: green;
}
main.bar {
color: red;
}
main.foo {
color: red;
}
main.bar {
color: green;
}
main.foo {
header.bar:nth-of-type(2n + 1) {
color: green;
}
header.bar:after,
main.bar,
main.foo,
footer.foo {
color: red;
color: green;
@@ -2034,22 +1931,18 @@ crosscheck(() => {
expect(result.css).toMatchFormattedCss(css`
.foo + .foo {
color: blue;
color: #00f;
}
.bar + .bar {
color: fuchsia;
}
header + .foo {
color: blue;
color: #f0f;
}
header + .foo,
main + .foo {
color: blue;
}
main + .bar {
color: fuchsia;
color: #00f;
}
main + .bar,
footer + .bar {
color: fuchsia;
color: #f0f;
}
`)
})
@@ -2083,12 +1976,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.foo:hover.bar .baz {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
color: red;
}
.foo:hover.bar .baz,
.foo:hover.bar > .baz {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
tests/arbitrary-properties.test.js
+2 -16
View File
@@ -20,7 +20,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[paint-order\:markers\] {
paint-order: markers;
}
@@ -47,11 +46,9 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[bar\:baz\] {
bar: baz;
}
.\[foo\:bar\] {
foo: bar;
}
@@ -78,7 +75,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
@media (min-width: 1024px) {
.dark\:lg\:hover\:\[paint-order\:markers\]:hover {
@@ -111,7 +107,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.content-none {
--tw-content: none;
content: var(--tw-content);
@@ -145,7 +140,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[--my-var\:auto\] {
--my-var: auto;
}
@@ -172,7 +166,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[--my-var\:2px_4px\] {
--my-var: 2px 4px;
}
@@ -199,7 +192,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\!\[--my-var\:2px_4px\] {
--my-var: 2px 4px !important;
}
@@ -226,7 +218,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[content\:\'foo\:bar\'\] {
content: 'foo:bar';
}
@@ -253,9 +244,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[background-image\:url\(http\:\/\/example\.com\/picture\.jpg\)\] {
background-image: url(http://example.com/picture.jpg);
background-image: url('http://example.com/picture.jpg');
}
`)
})
@@ -351,7 +341,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[border\:_calc\(5vw_-_theme\(spacing\[2\.5\]\)\)_double_theme\(\'colors\.fuchsia\.700\'\)\] {
border: calc(5vw - 0.625rem) double #a21caf;
}
@@ -380,9 +369,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[box-shadow\:_0_calc\(theme\(spacing\[0\.5\]\)_\*_-1\)_theme\(colors\.red\.400\)_inset\] {
box-shadow: 0 calc(0.125rem * -1) #f87171 inset;
box-shadow: inset 0 -0.125rem #f87171;
}
.\[height\:_calc\(100vh_-_theme\(spacing\[2\.5\]\)\)\] {
height: calc(100vh - 0.625rem);
@@ -406,7 +394,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[--a\:theme\(colors\.blue\.500\)\] {
--a: #3b82f6;
}
@@ -432,7 +419,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[--a\:theme\(\'colors\.blue\.500\'\)\] {
--a: #3b82f6;
}
tests/arbitrary-values.oxide.test.css
+76 -98
View File
@@ -1,8 +1,5 @@
.inset-\[11px\] {
top: 11px;
right: 11px;
bottom: 11px;
left: 11px;
inset: 11px;
}
.inset-\[var\(--value\)\] {
top: var(--value);
@@ -103,11 +100,11 @@
.mt-\[7px\] {
margin-top: 7px;
}
.mt-\[clamp\(30px\2c 100px\)\] {
.mt-\[clamp\(30px\,100px\)\] {
margin-top: clamp(30px, 100px);
}
.aspect-\[16\/9\] {
aspect-ratio: 16/9;
aspect-ratio: 16 / 9;
}
.aspect-\[var\(--aspect\)\] {
aspect-ratio: var(--aspect);
@@ -170,22 +167,22 @@
width: calc(100% + 1rem);
}
.w-\[calc\(100\%\/3-1rem\*2\)\] {
width: calc(100% / 3 - 1rem * 2);
width: calc(33.3333% - 2rem);
}
.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
.w-\[calc\(var\(--10-10px\,calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
}
.w-\[var\(--width\)\] {
width: var(--width);
}
.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
.w-\[var\(--width\,calc\(100\%\+1rem\)\)\] {
width: var(--width, calc(100% + 1rem));
}
.w-\[\{\{\}\}\] {
width: {{} };
width: {{} }
}
.w-\[\{\}\] {
width: {};
width: {}
}
.min-w-\[3\.23rem\] {
min-width: 3.23rem;
@@ -217,15 +214,11 @@
.flex-\[var\(--flex\)\] {
flex: var(--flex);
}
.flex-shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.flex-shrink-\[var\(--shrink\)\],
.shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.flex-grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
.flex-grow-\[var\(--grow\)\],
.grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
@@ -266,7 +259,7 @@
scaleY(var(--tw-scale-y));
}
.rotate-\[2\.3rad\] {
--tw-rotate: 2.3rad;
--tw-rotate: 131.78deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
@@ -345,8 +338,8 @@
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
}
.animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] {
animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite;
.animate-\[pong_1s_cubic-bezier\(0\,0\,0\.2\,1\)_infinite\] {
animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite pong;
}
.animate-\[var\(--value\)\] {
animation: var(--value);
@@ -354,11 +347,11 @@
.cursor-\[pointer\] {
cursor: pointer;
}
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] {
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
cursor: url('./path_to_hand.cur') 2 2, pointer;
}
.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
cursor: url(hand.cur) 2 2, pointer;
.cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
cursor: url('hand.cur') 2 2, pointer;
}
.cursor-\[var\(--value\)\] {
cursor: var(--value);
@@ -416,7 +409,7 @@
scroll-padding-top: var(--scroll-padding);
}
.list-\[\'\\1f44d\'\] {
list-style-type: '\1f44d';
list-style-type: '👍';
}
.list-\[var\(--value\)\] {
list-style-type: var(--value);
@@ -427,19 +420,19 @@
.columns-\[var\(--columns\)\] {
columns: var(--columns);
}
.auto-cols-\[minmax\(10px\2c auto\)\] {
.auto-cols-\[minmax\(10px\,auto\)\] {
grid-auto-columns: minmax(10px, auto);
}
.auto-rows-\[minmax\(10px\2c auto\)\] {
.auto-rows-\[minmax\(10px\,auto\)\] {
grid-auto-rows: minmax(10px, auto);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.grid-cols-\[\[linename\]\2c 1fr\2c auto\] {
.grid-cols-\[\[linename\]\,1fr\,auto\] {
grid-template-columns: [linename] 1fr auto;
}
.grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.grid-rows-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.gap-\[20px\] {
@@ -462,13 +455,13 @@
}
.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(20cm * var(--tw-space-x-reverse));
margin-inline-start: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(20cm * var(--tw-space-x-reverse));
}
.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
margin-inline-start: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
}
.space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -582,7 +575,7 @@
border-color: var(--value);
}
.border-\[red_black\] {
border-color: red black;
border-color: red #000;
}
.border-b-\[\#f00\] {
--tw-border-opacity: 1;
@@ -619,7 +612,7 @@
--tw-border-opacity: var(--value);
}
.bg-\[\#0000ffcc\] {
background-color: #0000ffcc;
background-color: #00fc;
}
.bg-\[\#0f0\] {
--tw-bg-opacity: 1;
@@ -635,35 +628,30 @@
.bg-\[color\:var\(--value1\)_var\(--value2\)\] {
background-color: var(--value1) var(--value2);
}
.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
.bg-\[hsl\(0\,100\%\,50\%\)\],
.bg-\[hsl\(0rad\,100\%\,50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
}
.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
.bg-\[hsla\(0\,100\%\,50\%\,0\.3\)\],
.bg-\[hsla\(0turn\,100\%\,50\%\,0\.3\)\] {
background-color: #ff00004d;
}
.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
background-color: hsla(0, 100%, 50%, 0.3);
}
.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] {
background-color: hsla(0turn, 100%, 50%, 0.3);
}
.bg-\[rgb\(123\2c 123\2c 123\)\] {
.bg-\[rgb\(123\,123\,123\)\] {
--tw-bg-opacity: 1;
background-color: rgb(123 123 123 / var(--tw-bg-opacity));
}
.bg-\[rgb\(123\2c _456\2c _123\)_black\] {
background-color: rgb(123, 456, 123) black;
.bg-\[rgb\(123\,_456\,_123\)_black\] {
background-color: #7bff7b black;
}
.bg-\[rgb\(123_456_789\)\] {
--tw-bg-opacity: 1;
background-color: rgb(123 456 789 / var(--tw-bg-opacity));
background-color: rgb(123 255 255 / var(--tw-bg-opacity));
}
.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
background-color: rgba(123, 123, 123, 0.5);
.bg-\[rgba\(123\,123\,123\,0\.5\)\] {
background-color: #7b7b7b80;
}
.bg-\[var\(--value\)\2c var\(--value\)\] {
.bg-\[var\(--value\)\,var\(--value\)\] {
background-color: var(--value), var(--value);
}
.bg-\[var\(--value1\)_var\(--value2\)\] {
@@ -675,19 +663,19 @@
.bg-opacity-\[var\(--value\)\] {
--tw-bg-opacity: var(--value);
}
.bg-\[image\(\)\2c var\(--value\)\] {
.bg-\[image\(\)\,var\(--value\)\] {
background-image: image(), var(--value);
}
.bg-\[image\:var\(--value\)\2c var\(--value\)\] {
.bg-\[image\:var\(--value\)\,var\(--value\)\] {
background-image: var(--value), var(--value);
}
.bg-\[linear-gradient\(\#eee\,\#fff\)\,conic-gradient\(red\,orange\,yellow\,green\,blue\)\] {
background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue);
background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, #ff0, green, #00f);
}
.bg-\[linear-gradient\(\#eee\2c \#fff\)\] {
.bg-\[linear-gradient\(\#eee\,\#fff\)\] {
background-image: linear-gradient(#eee, #fff);
}
.bg-\[linear-gradient\(to_left\2c rgb\(var\(--green\)\)\2c blue\)\] {
.bg-\[linear-gradient\(to_left\,rgb\(var\(--green\)\)\,blue\)\] {
background-image: linear-gradient(to left, rgb(var(--green)), blue);
}
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
@@ -698,20 +686,20 @@
}
.from-\[\#da5b66\] {
--tw-gradient-from: #da5b66;
--tw-gradient-to: rgb(218 91 102 / 0);
--tw-gradient-to: #da5b6600;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--color\)\] {
--tw-gradient-from: var(--color);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#da5b66\] {
--tw-gradient-to: rgb(218 91 102 / 0);
--tw-gradient-to: #da5b6600;
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
}
.via-\[var\(--color\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to);
}
.to-\[\#da5b66\] {
@@ -727,7 +715,7 @@
background-size: var(--value);
}
.bg-\[center_top_1rem\] {
background-position: center top 1rem;
background-position: 50% 1rem;
}
.bg-\[position\:200px_100px\] {
background-position: 200px 100px;
@@ -739,7 +727,7 @@
fill: #da5b66;
}
.fill-\[url\(\#icon-gradient\)\] {
fill: url(#icon-gradient);
fill: url('#icon-gradient');
}
.fill-\[var\(--value\)\] {
fill: var(--value);
@@ -751,7 +739,7 @@
stroke: var(--value);
}
.stroke-\[url\(\#icon-gradient\)\] {
stroke: url(#icon-gradient);
stroke: url('#icon-gradient');
}
.stroke-\[20px\] {
stroke-width: 20px;
@@ -759,10 +747,10 @@
.stroke-\[length\:var\(--value\)\] {
stroke-width: var(--value);
}
.object-\[50\%\2c 50\%\] {
.object-\[50\%\,50\%\] {
object-position: 50% 50%;
}
.object-\[top\2c right\] {
.object-\[top\,right\] {
object-position: top right;
}
.object-\[var\(--position\)\] {
@@ -791,7 +779,7 @@
.pt-\[7px\] {
padding-top: 7px;
}
.pt-\[clamp\(30px\2c 100px\)\] {
.pt-\[clamp\(30px\,100px\)\] {
padding-top: clamp(30px, 100px);
}
.indent-\[50\%\] {
@@ -804,27 +792,27 @@
vertical-align: 10em;
}
.font-\[\'Gill_Sans\'\] {
font-family: 'Gill Sans';
font-family: Gill Sans;
}
.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] {
font-family: 'Some Font', 'Some Other Font';
.font-\[\'Some_Font\'\,\'Some_Other_Font\'\] {
font-family: Some Font, Some Other Font;
}
.font-\[\'Some_Font\'\2c sans-serif\] {
font-family: 'Some Font', sans-serif;
.font-\[\'Some_Font\'\,sans-serif\] {
font-family: Some Font, sans-serif;
}
.font-\[\'Some_Font\'\2c var\(--other-font\)\] {
.font-\[\'Some_Font\'\,var\(--other-font\)\] {
font-family: 'Some Font', var(--other-font);
}
.font-\[Georgia\2c serif\] {
.font-\[Georgia\,serif\] {
font-family: Georgia, serif;
}
.font-\[family-name\:var\(--value\)\] {
font-family: var(--value);
}
.font-\[sans-serif\2c serif\] {
.font-\[sans-serif\,serif\] {
font-family: sans-serif, serif;
}
.font-\[serif\2c var\(--value\)\] {
.font-\[serif\,var\(--value\)\] {
font-family: serif, var(--value);
}
.text-\[0\] {
@@ -839,7 +827,7 @@
.text-\[length\:var\(--font-size\)\] {
font-size: var(--font-size);
}
.text-\[min\(10vh\2c 100px\)\] {
.text-\[min\(10vh\,100px\)\] {
font-size: min(10vh, 100px);
}
.font-\[300\] {
@@ -864,14 +852,8 @@
.text-\[color\:var\(--color\)\] {
color: var(--color);
}
.text-\[rgb\(123\2c 123\2c 123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.text-\[rgb\(123\2c _123\2c _123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.text-\[rgb\(123\,123\,123\)\],
.text-\[rgb\(123\,_123\,_123\)\],
.text-\[rgb\(123_123_123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
@@ -883,19 +865,15 @@
--tw-text-opacity: var(--value);
}
.decoration-\[black\] {
text-decoration-color: black;
text-decoration-color: #000;
}
.decoration-\[color\:var\(--color\)\] {
text-decoration-color: var(--color);
}
.decoration-\[rgb\(123\2c 123\2c 123\)\] {
text-decoration-color: rgb(123, 123, 123);
}
.decoration-\[rgb\(123\2c _123\2c _123\)\] {
text-decoration-color: rgb(123, 123, 123);
}
.decoration-\[rgb\(123\,123\,123\)\],
.decoration-\[rgb\(123\,_123\,_123\)\],
.decoration-\[rgb\(123_123_123\)\] {
text-decoration-color: rgb(123 123 123);
text-decoration-color: #7b7b7b;
}
.decoration-\[length\:10px\] {
text-decoration-thickness: 10px;
@@ -910,7 +888,7 @@
--tw-placeholder-opacity: var(--placeholder-opacity);
}
.caret-\[black\] {
caret-color: black;
caret-color: #000;
}
.caret-\[var\(--value\)\] {
caret-color: var(--value);
@@ -949,7 +927,7 @@
outline-offset: 10px;
}
.outline-\[black\] {
outline-color: black;
outline-color: #000;
}
.outline-\[color\:var\(--outline\)\] {
outline-color: var(--outline);
@@ -1063,7 +1041,7 @@
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-hue-rotate-\[1\.57rad\] {
--tw-backdrop-hue-rotate: hue-rotate(1.57rad);
--tw-backdrop-hue-rotate: hue-rotate(89.9544deg);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1092,10 +1070,10 @@
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-\[opacity\2c width\] {
.transition-\[opacity\,width\] {
transition-property: opacity, width;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--delay\)\] {
transition-delay: var(--delay);
@@ -1106,7 +1084,7 @@
.duration-\[var\(--app-duration\)\] {
transition-duration: var(--app-duration);
}
.will-change-\[top\2c left\] {
.will-change-\[top\,left\] {
will-change: top, left;
}
.will-change-\[var\(--will-change\)\] {
@@ -1125,7 +1103,7 @@
content: var(--tw-content);
}
@media (min-width: 1024px) {
.lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.lg\:grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
}
tests/arbitrary-values.test.css
+74 -96
View File
@@ -1,8 +1,5 @@
.inset-\[11px\] {
top: 11px;
right: 11px;
bottom: 11px;
left: 11px;
inset: 11px;
}
.inset-\[var\(--value\)\] {
top: var(--value);
@@ -103,11 +100,11 @@
.mt-\[7px\] {
margin-top: 7px;
}
.mt-\[clamp\(30px\2c 100px\)\] {
.mt-\[clamp\(30px\,100px\)\] {
margin-top: clamp(30px, 100px);
}
.aspect-\[16\/9\] {
aspect-ratio: 16/9;
aspect-ratio: 16 / 9;
}
.aspect-\[var\(--aspect\)\] {
aspect-ratio: var(--aspect);
@@ -170,22 +167,22 @@
width: calc(100% + 1rem);
}
.w-\[calc\(100\%\/3-1rem\*2\)\] {
width: calc(100% / 3 - 1rem * 2);
width: calc(33.3333% - 2rem);
}
.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
.w-\[calc\(var\(--10-10px\,calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
}
.w-\[var\(--width\)\] {
width: var(--width);
}
.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
.w-\[var\(--width\,calc\(100\%\+1rem\)\)\] {
width: var(--width, calc(100% + 1rem));
}
.w-\[\{\{\}\}\] {
width: {{} };
width: {{} }
}
.w-\[\{\}\] {
width: {};
width: {}
}
.min-w-\[3\.23rem\] {
min-width: 3.23rem;
@@ -217,15 +214,11 @@
.flex-\[var\(--flex\)\] {
flex: var(--flex);
}
.flex-shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.flex-shrink-\[var\(--shrink\)\],
.shrink-\[var\(--shrink\)\] {
flex-shrink: var(--shrink);
}
.flex-grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
.flex-grow-\[var\(--grow\)\],
.grow-\[var\(--grow\)\] {
flex-grow: var(--grow);
}
@@ -266,7 +259,7 @@
scaleY(var(--tw-scale-y));
}
.rotate-\[2\.3rad\] {
--tw-rotate: 2.3rad;
--tw-rotate: 131.78deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
@@ -345,8 +338,8 @@
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
}
.animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] {
animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite;
.animate-\[pong_1s_cubic-bezier\(0\,0\,0\.2\,1\)_infinite\] {
animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite pong;
}
.animate-\[var\(--value\)\] {
animation: var(--value);
@@ -354,11 +347,11 @@
.cursor-\[pointer\] {
cursor: pointer;
}
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] {
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
cursor: url('./path_to_hand.cur') 2 2, pointer;
}
.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
cursor: url(hand.cur) 2 2, pointer;
.cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
cursor: url('hand.cur') 2 2, pointer;
}
.cursor-\[var\(--value\)\] {
cursor: var(--value);
@@ -416,7 +409,7 @@
scroll-padding-top: var(--scroll-padding);
}
.list-\[\'\\1f44d\'\] {
list-style-type: '\1f44d';
list-style-type: '👍';
}
.list-\[var\(--value\)\] {
list-style-type: var(--value);
@@ -427,19 +420,19 @@
.columns-\[var\(--columns\)\] {
columns: var(--columns);
}
.auto-cols-\[minmax\(10px\2c auto\)\] {
.auto-cols-\[minmax\(10px\,auto\)\] {
grid-auto-columns: minmax(10px, auto);
}
.auto-rows-\[minmax\(10px\2c auto\)\] {
.auto-rows-\[minmax\(10px\,auto\)\] {
grid-auto-rows: minmax(10px, auto);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.grid-cols-\[\[linename\]\2c 1fr\2c auto\] {
.grid-cols-\[\[linename\]\,1fr\,auto\] {
grid-template-columns: [linename] 1fr auto;
}
.grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.grid-rows-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.gap-\[20px\] {
@@ -582,7 +575,7 @@
border-color: var(--value);
}
.border-\[red_black\] {
border-color: red black;
border-color: red #000;
}
.border-b-\[\#f00\] {
--tw-border-opacity: 1;
@@ -619,7 +612,7 @@
--tw-border-opacity: var(--value);
}
.bg-\[\#0000ffcc\] {
background-color: #0000ffcc;
background-color: #00fc;
}
.bg-\[\#0f0\] {
--tw-bg-opacity: 1;
@@ -635,35 +628,30 @@
.bg-\[color\:var\(--value1\)_var\(--value2\)\] {
background-color: var(--value1) var(--value2);
}
.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
.bg-\[hsl\(0\,100\%\,50\%\)\],
.bg-\[hsl\(0rad\,100\%\,50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
}
.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
.bg-\[hsla\(0\,100\%\,50\%\,0\.3\)\],
.bg-\[hsla\(0turn\,100\%\,50\%\,0\.3\)\] {
background-color: #ff00004d;
}
.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
background-color: hsla(0, 100%, 50%, 0.3);
}
.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] {
background-color: hsla(0turn, 100%, 50%, 0.3);
}
.bg-\[rgb\(123\2c 123\2c 123\)\] {
.bg-\[rgb\(123\,123\,123\)\] {
--tw-bg-opacity: 1;
background-color: rgb(123 123 123 / var(--tw-bg-opacity));
}
.bg-\[rgb\(123\2c _456\2c _123\)_black\] {
background-color: rgb(123, 456, 123) black;
.bg-\[rgb\(123\,_456\,_123\)_black\] {
background-color: #7bff7b black;
}
.bg-\[rgb\(123_456_789\)\] {
--tw-bg-opacity: 1;
background-color: rgb(123 456 789 / var(--tw-bg-opacity));
background-color: rgb(123 255 255 / var(--tw-bg-opacity));
}
.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
background-color: rgba(123, 123, 123, 0.5);
.bg-\[rgba\(123\,123\,123\,0\.5\)\] {
background-color: #7b7b7b80;
}
.bg-\[var\(--value\)\2c var\(--value\)\] {
.bg-\[var\(--value\)\,var\(--value\)\] {
background-color: var(--value), var(--value);
}
.bg-\[var\(--value1\)_var\(--value2\)\] {
@@ -675,19 +663,19 @@
.bg-opacity-\[var\(--value\)\] {
--tw-bg-opacity: var(--value);
}
.bg-\[image\(\)\2c var\(--value\)\] {
.bg-\[image\(\)\,var\(--value\)\] {
background-image: image(), var(--value);
}
.bg-\[image\:var\(--value\)\2c var\(--value\)\] {
.bg-\[image\:var\(--value\)\,var\(--value\)\] {
background-image: var(--value), var(--value);
}
.bg-\[linear-gradient\(\#eee\,\#fff\)\,conic-gradient\(red\,orange\,yellow\,green\,blue\)\] {
background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue);
background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, #ff0, green, #00f);
}
.bg-\[linear-gradient\(\#eee\2c \#fff\)\] {
.bg-\[linear-gradient\(\#eee\,\#fff\)\] {
background-image: linear-gradient(#eee, #fff);
}
.bg-\[linear-gradient\(to_left\2c rgb\(var\(--green\)\)\2c blue\)\] {
.bg-\[linear-gradient\(to_left\,rgb\(var\(--green\)\)\,blue\)\] {
background-image: linear-gradient(to left, rgb(var(--green)), blue);
}
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
@@ -698,20 +686,20 @@
}
.from-\[\#da5b66\] {
--tw-gradient-from: #da5b66;
--tw-gradient-to: rgb(218 91 102 / 0);
--tw-gradient-to: #da5b6600;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--color\)\] {
--tw-gradient-from: var(--color);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#da5b66\] {
--tw-gradient-to: rgb(218 91 102 / 0);
--tw-gradient-to: #da5b6600;
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
}
.via-\[var\(--color\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to);
}
.to-\[\#da5b66\] {
@@ -727,7 +715,7 @@
background-size: var(--value);
}
.bg-\[center_top_1rem\] {
background-position: center top 1rem;
background-position: 50% 1rem;
}
.bg-\[position\:200px_100px\] {
background-position: 200px 100px;
@@ -739,7 +727,7 @@
fill: #da5b66;
}
.fill-\[url\(\#icon-gradient\)\] {
fill: url(#icon-gradient);
fill: url('#icon-gradient');
}
.fill-\[var\(--value\)\] {
fill: var(--value);
@@ -751,7 +739,7 @@
stroke: var(--value);
}
.stroke-\[url\(\#icon-gradient\)\] {
stroke: url(#icon-gradient);
stroke: url('#icon-gradient');
}
.stroke-\[20px\] {
stroke-width: 20px;
@@ -759,10 +747,10 @@
.stroke-\[length\:var\(--value\)\] {
stroke-width: var(--value);
}
.object-\[50\%\2c 50\%\] {
.object-\[50\%\,50\%\] {
object-position: 50% 50%;
}
.object-\[top\2c right\] {
.object-\[top\,right\] {
object-position: top right;
}
.object-\[var\(--position\)\] {
@@ -791,7 +779,7 @@
.pt-\[7px\] {
padding-top: 7px;
}
.pt-\[clamp\(30px\2c 100px\)\] {
.pt-\[clamp\(30px\,100px\)\] {
padding-top: clamp(30px, 100px);
}
.indent-\[50\%\] {
@@ -804,27 +792,27 @@
vertical-align: 10em;
}
.font-\[\'Gill_Sans\'\] {
font-family: 'Gill Sans';
font-family: Gill Sans;
}
.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] {
font-family: 'Some Font', 'Some Other Font';
.font-\[\'Some_Font\'\,\'Some_Other_Font\'\] {
font-family: Some Font, Some Other Font;
}
.font-\[\'Some_Font\'\2c sans-serif\] {
font-family: 'Some Font', sans-serif;
.font-\[\'Some_Font\'\,sans-serif\] {
font-family: Some Font, sans-serif;
}
.font-\[\'Some_Font\'\2c var\(--other-font\)\] {
.font-\[\'Some_Font\'\,var\(--other-font\)\] {
font-family: 'Some Font', var(--other-font);
}
.font-\[Georgia\2c serif\] {
.font-\[Georgia\,serif\] {
font-family: Georgia, serif;
}
.font-\[family-name\:var\(--value\)\] {
font-family: var(--value);
}
.font-\[sans-serif\2c serif\] {
.font-\[sans-serif\,serif\] {
font-family: sans-serif, serif;
}
.font-\[serif\2c var\(--value\)\] {
.font-\[serif\,var\(--value\)\] {
font-family: serif, var(--value);
}
.text-\[0\] {
@@ -839,7 +827,7 @@
.text-\[length\:var\(--font-size\)\] {
font-size: var(--font-size);
}
.text-\[min\(10vh\2c 100px\)\] {
.text-\[min\(10vh\,100px\)\] {
font-size: min(10vh, 100px);
}
.font-\[300\] {
@@ -864,14 +852,8 @@
.text-\[color\:var\(--color\)\] {
color: var(--color);
}
.text-\[rgb\(123\2c 123\2c 123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.text-\[rgb\(123\2c _123\2c _123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.text-\[rgb\(123\,123\,123\)\],
.text-\[rgb\(123\,_123\,_123\)\],
.text-\[rgb\(123_123_123\)\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
@@ -883,19 +865,15 @@
--tw-text-opacity: var(--value);
}
.decoration-\[black\] {
text-decoration-color: black;
text-decoration-color: #000;
}
.decoration-\[color\:var\(--color\)\] {
text-decoration-color: var(--color);
}
.decoration-\[rgb\(123\2c 123\2c 123\)\] {
text-decoration-color: rgb(123, 123, 123);
}
.decoration-\[rgb\(123\2c _123\2c _123\)\] {
text-decoration-color: rgb(123, 123, 123);
}
.decoration-\[rgb\(123\,123\,123\)\],
.decoration-\[rgb\(123\,_123\,_123\)\],
.decoration-\[rgb\(123_123_123\)\] {
text-decoration-color: rgb(123 123 123);
text-decoration-color: #7b7b7b;
}
.decoration-\[length\:10px\] {
text-decoration-thickness: 10px;
@@ -910,7 +888,7 @@
--tw-placeholder-opacity: var(--placeholder-opacity);
}
.caret-\[black\] {
caret-color: black;
caret-color: #000;
}
.caret-\[var\(--value\)\] {
caret-color: var(--value);
@@ -949,7 +927,7 @@
outline-offset: 10px;
}
.outline-\[black\] {
outline-color: black;
outline-color: #000;
}
.outline-\[color\:var\(--outline\)\] {
outline-color: var(--outline);
@@ -1063,7 +1041,7 @@
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-hue-rotate-\[1\.57rad\] {
--tw-backdrop-hue-rotate: hue-rotate(1.57rad);
--tw-backdrop-hue-rotate: hue-rotate(89.9544deg);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1092,10 +1070,10 @@
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-\[opacity\2c width\] {
.transition-\[opacity\,width\] {
transition-property: opacity, width;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--delay\)\] {
transition-delay: var(--delay);
@@ -1106,7 +1084,7 @@
.duration-\[var\(--app-duration\)\] {
transition-duration: var(--app-duration);
}
.will-change-\[top\2c left\] {
.will-change-\[top\,left\] {
will-change: top, left;
}
.will-change-\[var\(--will-change\)\] {
@@ -1125,7 +1103,7 @@
content: var(--tw-content);
}
@media (min-width: 1024px) {
.lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.lg\:grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
}
tests/arbitrary-values.test.js
+17 -32
View File
@@ -56,7 +56,6 @@ crosscheck(({ stable, oxide }) => {
.decoration-\[\#ccc\] {
text-decoration-color: #ccc;
}
.decoration-\[3px\] {
text-decoration-thickness: 3px;
}
@@ -200,63 +199,50 @@ crosscheck(({ stable, oxide }) => {
.col-\\[span_3_\\/_span_8\\] {
grid-column: span 3 / span 8;
}
.row-\\[span_3_\\/_span_8\\] {
grid-row: span 3 / span 8;
}
.m-\\[8px_4px\\] {
margin: 8px 4px;
}
.flex-\\[1_1_100\\%\\] {
flex: 1 1 100%;
flex: 100%;
}
.auto-cols-\\[minmax\\(0\\2c _1fr\\)\\] {
.auto-cols-\\[minmax\\(0\\,_1fr\\)\\] {
grid-auto-columns: minmax(0, 1fr);
}
.grid-cols-\\[200px_repeat\\(auto-fill\\2c minmax\\(15\\%\\2c 100px\\)\\)_300px\\] {
.grid-cols-\\[200px_repeat\\(auto-fill\\,minmax\\(15\\%\\,100px\\)\\)_300px\\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.grid-rows-\\[200px_repeat\\(auto-fill\\2c minmax\\(15\\%\\2c 100px\\)\\)_300px\\] {
.grid-rows-\\[200px_repeat\\(auto-fill\\,minmax\\(15\\%\\,100px\\)\\)_300px\\] {
grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.rounded-\\[0px_4px_4px_0px\\] {
border-radius: 0px 4px 4px 0px;
border-radius: 0 4px 4px 0;
}
.p-\\[8px_4px\\] {
padding: 8px 4px;
}
.shadow-\\[0px_0px_4px_black\\] {
--tw-shadow: 0px 0px 4px black;
--tw-shadow-colored: 0px 0px 4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.drop-shadow-\\[0px_1px_3px_black\\] {
--tw-drop-shadow: drop-shadow(0px 1px 3px black);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia)
var(--tw-drop-shadow);
}
.content-\\[\\'__hello__world__\\'\\] {
--tw-content: ' hello world ';
content: var(--tw-content);
}
.content-\\[___abc____\\] {
--tw-content: abc;
content: var(--tw-content);
}
.content-\\[_hello_world_\\] {
--tw-content: hello world;
content: var(--tw-content);
@@ -302,7 +288,6 @@ crosscheck(({ stable, oxide }) => {
.bg-\[var\(--unknown\)\] {
background-color: var(--unknown);
}
.bg-\[200px_100px\] {
background-position: 200px 100px;
}
@@ -367,7 +352,7 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(`
.bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] {
.bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\,_url\\(\\'red_tomato\\.png\\'\\)\\] {
background-image: url('brown_potato.jpg'), url('red_tomato.png');
}
`)
@@ -388,10 +373,10 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.w-\[theme\(spacing\.1\)\] {
width: calc(1 * 0.25rem);
width: 0.25rem;
}
.w-\[theme\(spacing\[0\.5\]\)\] {
width: calc(0.5 * 0.25rem);
width: 0.125rem;
}
`)
})
@@ -413,10 +398,10 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.w-\[theme\(\'spacing\.1\'\)\] {
width: calc(1 * 0.25rem);
width: 0.25rem;
}
.w-\[theme\(\'spacing\[0\.5\]\'\)\] {
width: calc(0.5 * 0.25rem);
width: 0.125rem;
}
`)
})
@@ -442,10 +427,10 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.w-\[calc\(100\%-theme\(\'spacing\.1\'\)\)\] {
width: calc(100% - calc(1 * 0.25rem));
width: calc(100% - 0.25rem);
}
.w-\[calc\(100\%-theme\(\'spacing\[0\.5\]\'\)\)\] {
width: calc(100% - calc(0.5 * 0.25rem));
width: calc(100% - 0.125rem);
}
`)
})
@@ -481,7 +466,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-\[top_right_50\%\] {
background-position: top right 50%;
background-position: right 50% top;
}
`)
})
@@ -500,8 +485,8 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-\[auto_auto\2c cover\2c _contain\2c 10px\2c 10px_10\%\] {
background-size: auto auto, cover, contain, 10px, 10px 10%;
.bg-\[auto_auto\,cover\,_contain\,10px\,10px_10\%\] {
background-size: auto, cover, contain, 10px, 10px 10%;
}
`)
})
@@ -583,7 +568,7 @@ crosscheck(({ stable, oxide }) => {
.w-\[--width-var\] {
width: var(--width-var);
}
.bg-\[--color-var\2c \#000\] {
.bg-\[--color-var\,\#000\] {
background-color: var(--color-var, #000);
}
.bg-\[--color-var\] {
@@ -592,7 +577,7 @@ crosscheck(({ stable, oxide }) => {
.bg-\[length\:--size-var\] {
background-size: var(--size-var);
}
.text-\[length\:--size-var\2c 12px\] {
.text-\[length\:--size-var\,12px\] {
font-size: var(--size-var, 12px);
}
`)
tests/arbitrary-variants.test.js
+65 -162
View File
@@ -16,7 +16,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\>\*\]\:underline > * {
text-decoration-line: underline;
}
@@ -43,7 +42,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.a.b .\[\.a\.b_\&\]\:underline {
text-decoration-line: underline;
}
@@ -66,10 +64,9 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
@media (min-width: 1024px) {
.dark\:lg\:hover\:\[\&\>\*\]\:underline > *:hover {
.dark\:lg\:hover\:\[\&\>\*\]\:underline > :hover {
text-decoration-line: underline;
}
}
@@ -121,17 +118,14 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.underline {
text-decoration-line: underline;
}
@media (min-width: 1024px) {
.lg\:underline {
text-decoration-line: underline;
}
}
.\[\&\>\*\]\:underline > * {
text-decoration-line: underline;
}
@@ -154,7 +148,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\>\*\]\:\!underline > * {
text-decoration-line: underline !important;
}
@@ -177,7 +170,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@supports (what: ever) {
.\[\@supports\(what\:ever\)\]\:underline {
text-decoration-line: underline;
@@ -206,7 +198,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media screen {
@media (hover: hover) {
.\[\@media_screen\{\@media\(hover\:hover\)\}\]\:underline {
@@ -233,7 +224,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (hover: hover) {
.\[\@media\(hover\:hover\)\{\&\:hover\}\]\:underline:hover {
text-decoration-line: underline;
@@ -262,7 +252,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media screen {
@media (hover: hover) {
.\[\@media_screen\{\@media\(hover\:hover\)\{\&\:hover\}\}\]\:underline:hover {
@@ -289,7 +278,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\[data-open\]\]\:underline[data-open] {
text-decoration-line: underline;
}
@@ -314,7 +302,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\[data-foo\]\[data-bar\]\:not\(\[data-baz\]\)\]\:underline[data-foo][data-bar]:not([data-baz]) {
text-decoration-line: underline;
}
@@ -341,7 +328,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\[data-foo\]\[data-bar\]\:not\(\[data-baz\]\)\]__underline[data-foo][data-bar]:not([data-baz]) {
text-decoration-line: underline;
}
@@ -368,7 +354,6 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\[data-foo\]\[data-bar\]\:not\(\[data-baz\]\)\]_\@underline[data-foo][data-bar]:not([data-baz]) {
text-decoration-line: underline;
}
@@ -387,19 +372,18 @@ crosscheck(({ stable, oxide }) => {
}
let input = `
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
.foo {
@apply [@media_screen{@media(hover:hover){&:hover}}]:underline;
}
`
.foo {
@apply [@media_screen{@media(hover:hover){&:hover}}]:underline;
}
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media screen {
@media (hover: hover) {
.foo:hover {
@@ -421,16 +405,15 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&_\.foo\\_\\_bar\]\:underline .foo__bar {
text-decoration-line: underline;
}
@@ -448,16 +431,15 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&_\.foo\\_\\_bar\]\:\[\&_\.bar\\_\\_baz\]\:underline .bar__baz .foo__bar {
text-decoration-line: underline;
}
@@ -478,20 +460,16 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&_\.foo\\_\\_bar\]\:hover\:underline:hover .foo__bar {
text-decoration-line: underline;
}
.\[\&_\.foo\\_\\_bar\]\:hover\:underline:hover .foo__bar,
.hover\:\[\&_\.foo\\_\\_bar\]\:underline .foo__bar:hover {
text-decoration-line: underline;
}
@@ -512,20 +490,16 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.\[\&\[data-test\=\"2\"\]\]\:underline[data-test='2'] {
text-decoration-line: underline;
}
.\[\&\[data-test\=\"2\"\]\]\:underline[data-test='2'],
.\[\&\[data-test\=\'2\'\]\]\:underline[data-test='2'] {
text-decoration-line: underline;
}
@@ -561,24 +535,15 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind utilities;
`
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.\[\&_\.foo\]\:tw-text-red-400 .foo {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.\[\&_\.foo\]\:hover\:tw-text-red-400:hover .foo {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.hover\:\[\&_\.foo\]\:tw-text-red-400 .foo:hover {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.\[\&_\.foo\]\:tw-text-red-400 .foo,
.\[\&_\.foo\]\:hover\:tw-text-red-400:hover .foo,
.hover\:\[\&_\.foo\]\:tw-text-red-400 .foo:hover,
.foo .\[\.foo_\&\]\:tw-text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -607,9 +572,9 @@ crosscheck(({ stable, oxide }) => {
corePlugins: { preflight: false },
}
let input = `
@tailwind utilities;
`
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@@ -617,17 +582,14 @@ crosscheck(({ stable, oxide }) => {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.\[\&_\.foo\]\:tw-text-red-400 .foo {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.foo .\[\.foo_\&\]\:tw-bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.foo .\[\.foo_\&\]\:tw-text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -823,42 +785,35 @@ crosscheck(({ stable, oxide }) => {
.supports-grid\:underline {
text-decoration-line: underline;
}
.supports-\[display\:grid\]\:grid {
display: grid;
}
}
@supports (foo: bar) and (bar: baz) {
.supports-\[\(foo\:bar\)and\(bar\:baz\)\]\:underline {
text-decoration-line: underline;
}
}
@supports (foo: bar) or (bar: baz) {
.supports-\[\(foo\:bar\)or\(bar\:baz\)\]\:underline {
text-decoration-line: underline;
}
}
@supports (container-type: var(--tw)) {
.supports-\[container-type\]\:underline {
text-decoration-line: underline;
}
}
@supports not (foo: bar) {
.supports-\[not\(foo\:bar\)\]\:underline {
text-decoration-line: underline;
}
}
@supports selector(A > B) {
.supports-\[selector\(A_\>_B\)\]\:underline {
text-decoration-line: underline;
}
}
@supports (transform-origin: 5% 5%) {
.supports-\[transform-origin\:5\%_5\%\]\:underline {
text-decoration-line: underline;
@@ -923,45 +878,19 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.group\/foo:hover .group-hover\/foo\:underline {
text-decoration-line: underline;
}
.group:hover .group-hover\:underline {
text-decoration-line: underline;
}
.group\/foo:focus .group-\[\&\:focus\]\/foo\:underline {
text-decoration-line: underline;
}
.group:focus .group-\[\&\:focus\]\:underline {
text-decoration-line: underline;
}
.group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline {
text-decoration-line: underline;
}
.group[data-open] .group-\[\&\[data-open\]\]\:underline {
text-decoration-line: underline;
}
.group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline {
text-decoration-line: underline;
}
.group.in-foo .group-\[\.in-foo\]\:underline {
text-decoration-line: underline;
}
.in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline {
text-decoration-line: underline;
}
.in-foo .group .group-\[\.in-foo_\&\]\:underline {
text-decoration-line: underline;
}
.group\/foo:hover .group-\[\:hover\]\/foo\:underline {
text-decoration-line: underline;
}
.group:hover .group-\[\:hover\]\:underline {
text-decoration-line: underline;
}
.group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline {
text-decoration-line: underline;
}
.group\/foo:hover .group-hover\/foo\:underline,
.group:hover .group-hover\:underline,
.group\/foo:focus .group-\[\&\:focus\]\/foo\:underline,
.group:focus .group-\[\&\:focus\]\:underline,
.group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline,
.group[data-open] .group-\[\&\[data-open\]\]\:underline,
.group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline,
.group.in-foo .group-\[\.in-foo\]\:underline,
.in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline,
.in-foo .group .group-\[\.in-foo_\&\]\:underline,
.group\/foo:hover .group-\[\:hover\]\/foo\:underline,
.group:hover .group-\[\:hover\]\:underline,
.group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline,
.group[data-open] .group-\[\[data-open\]\]\:underline {
text-decoration-line: underline;
}
@@ -1024,45 +953,19 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.peer\/foo:hover ~ .peer-hover\/foo\:underline {
text-decoration-line: underline;
}
.peer:hover ~ .peer-hover\:underline {
text-decoration-line: underline;
}
.peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline {
text-decoration-line: underline;
}
.peer:focus ~ .peer-\[\&\:focus\]\:underline {
text-decoration-line: underline;
}
.peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline {
text-decoration-line: underline;
}
.peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline {
text-decoration-line: underline;
}
.peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline {
text-decoration-line: underline;
}
.peer.in-foo ~ .peer-\[\.in-foo\]\:underline {
text-decoration-line: underline;
}
.in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline {
text-decoration-line: underline;
}
.in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline {
text-decoration-line: underline;
}
.peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline {
text-decoration-line: underline;
}
.peer:hover ~ .peer-\[\:hover\]\:underline {
text-decoration-line: underline;
}
.peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline {
text-decoration-line: underline;
}
.peer\/foo:hover ~ .peer-hover\/foo\:underline,
.peer:hover ~ .peer-hover\:underline,
.peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline,
.peer:focus ~ .peer-\[\&\:focus\]\:underline,
.peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline,
.peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline,
.peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline,
.peer.in-foo ~ .peer-\[\.in-foo\]\:underline,
.in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline,
.in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline,
.peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline,
.peer:hover ~ .peer-\[\:hover\]\:underline,
.peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline,
.peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
text-decoration-line: underline;
}
tests/basic-usage.oxide.test.css
+36 -81
View File
@@ -1,51 +1,6 @@
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
:before,
:after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -68,7 +23,7 @@
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@@ -121,15 +76,15 @@
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.pointer-events-none {
pointer-events: none;
@@ -144,10 +99,7 @@
position: absolute;
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset: 0;
}
.inset-x-2 {
left: 0.5rem;
@@ -229,7 +181,7 @@
margin-right: 0.25rem;
}
.mt-0 {
margin-top: 0px;
margin-top: 0;
}
.box-border {
box-sizing: border-box;
@@ -253,7 +205,7 @@
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.w-12 {
width: 3rem;
@@ -265,7 +217,7 @@
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
@@ -317,7 +269,7 @@
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.origin-top-right {
transform-origin: top right;
transform-origin: 100% 0;
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
@@ -396,7 +348,7 @@
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.cursor-pointer {
cursor: pointer;
@@ -518,8 +470,8 @@
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -578,9 +530,9 @@
overscroll-behavior: contain;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-ellipsis {
text-overflow: ellipsis;
@@ -665,26 +617,30 @@
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-to: rgb(252 165 165 / 0);
--tw-gradient-to: #fca5a500;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-200 {
--tw-gradient-to: rgb(233 213 255 / 0);
--tw-gradient-to: #e9d5ff00;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
}
.decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.box-decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.box-decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bg-cover {
@@ -718,7 +674,7 @@
stroke: currentColor;
}
.stroke-2 {
stroke-width: 2;
stroke-width: 2px;
}
.object-cover {
object-fit: cover;
@@ -762,9 +718,9 @@
vertical-align: middle;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
@@ -864,20 +820,20 @@
mix-blend-mode: saturation;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -887,16 +843,16 @@
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-100\/10 {
--tw-shadow-color: rgb(219 234 254 / 0.1);
--tw-shadow-color: #dbeafe1a;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/25 {
--tw-shadow-color: rgb(239 68 68 / 0.25);
--tw-shadow-color: #ef444440;
--tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
outline: 2px solid #0000;
}
.outline {
outline-style: solid;
@@ -959,8 +915,7 @@
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
--tw-drop-shadow: drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -1061,19 +1016,19 @@
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-300 {
transition-delay: 300ms;
transition-delay: 0.3s;
}
.duration-200 {
transition-duration: 200ms;
transition-duration: 0.2s;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
tests/basic-usage.test.css
+35 -80
View File
@@ -1,51 +1,6 @@
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
:before,
:after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -68,7 +23,7 @@
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@@ -121,15 +76,15 @@
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.pointer-events-none {
pointer-events: none;
@@ -144,10 +99,7 @@
position: absolute;
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset: 0;
}
.inset-x-2 {
left: 0.5rem;
@@ -229,7 +181,7 @@
margin-right: 0.25rem;
}
.mt-0 {
margin-top: 0px;
margin-top: 0;
}
.box-border {
box-sizing: border-box;
@@ -253,7 +205,7 @@
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.w-12 {
width: 3rem;
@@ -265,7 +217,7 @@
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
@@ -317,7 +269,7 @@
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.origin-top-right {
transform-origin: top right;
transform-origin: 100% 0;
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
@@ -396,7 +348,7 @@
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.cursor-pointer {
cursor: pointer;
@@ -578,9 +530,9 @@
overscroll-behavior: contain;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-ellipsis {
text-overflow: ellipsis;
@@ -665,26 +617,30 @@
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-to: rgb(252 165 165 / 0);
--tw-gradient-to: #fca5a500;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-200 {
--tw-gradient-to: rgb(233 213 255 / 0);
--tw-gradient-to: #e9d5ff00;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
}
.decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.box-decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.box-decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bg-cover {
@@ -718,7 +674,7 @@
stroke: currentColor;
}
.stroke-2 {
stroke-width: 2;
stroke-width: 2px;
}
.object-cover {
object-fit: cover;
@@ -762,9 +718,9 @@
vertical-align: middle;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
@@ -864,20 +820,20 @@
mix-blend-mode: saturation;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -887,16 +843,16 @@
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-100\/10 {
--tw-shadow-color: rgb(219 234 254 / 0.1);
--tw-shadow-color: #dbeafe1a;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/25 {
--tw-shadow-color: rgb(239 68 68 / 0.25);
--tw-shadow-color: #ef444440;
--tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
outline: 2px solid #0000;
}
.outline {
outline-style: solid;
@@ -959,8 +915,7 @@
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
--tw-drop-shadow: drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -1061,19 +1016,19 @@
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-300 {
transition-delay: 300ms;
transition-delay: 0.3s;
}
.duration-200 {
transition-duration: 200ms;
transition-duration: 0.2s;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
tests/basic-usage.test.js
+10 -31
View File
@@ -248,10 +248,6 @@ crosscheck(({ stable, oxide }) => {
--tw-bg-opacity: 1;
background-color: rgb(0 128 0 / var(--tw-bg-opacity));
}
.bg-green {
/* Empty on purpose */
}
`)
})
})
@@ -379,10 +375,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
`)
})
@@ -407,12 +400,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.shadow-one {
--tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
--tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-one,
.shadow-two {
--tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
--tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
@@ -474,24 +462,19 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
* {
color: blue;
color: #00f;
}
.combined,
* {
color: red;
}
${defaults}
.underline {
text-decoration-line: underline;
}
* {
color: red;
}
.combined,
* {
text-align: center;
@@ -518,7 +501,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.shadow-lg {
--tw-shadow: var(--a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0);
--tw-shadow: var(--a, 0 35px 60px -15px #000), 0 0 1px #000;
--tw-shadow-colored: 0 35px 60px -15px var(--tw-shadow-color),
0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -591,7 +574,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.5)' })}
${defaults({ defaultRingColor: '#3b82f680' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@@ -622,7 +605,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.75)' })}
${defaults({ defaultRingColor: '#3b82f6bf' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@@ -653,7 +636,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
${defaults({ defaultRingColor: '#ff7f7f80' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@@ -684,7 +667,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
${defaults({ defaultRingColor: '#ff7f7f80' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@@ -968,9 +951,7 @@ crosscheck(({ stable, oxide }) => {
`)
stable.expect(result.css).toMatchFormattedCss(css`
.hidden {
display: none;
}
.hidden,
.group[href^='/'] .group-\[\[href\^\=\'\/\'\]\]\:hidden {
display: none;
}
@@ -999,9 +980,7 @@ crosscheck(({ stable, oxide }) => {
`)
stable.expect(result.css).toMatchFormattedCss(css`
.hidden {
display: none;
}
.hidden,
.group[href^=' bar'] .group-\[\[href\^\=\'_bar\'\]\]\:hidden {
display: none;
}
tests/collapse-adjacent-rules.test.js
+9 -9
View File
@@ -73,22 +73,22 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@font-face {
font-family: 'Poppins';
font-family: Poppins;
src: url('/fonts/Poppins.woff2') format('woff2'),
url('/fonts/Poppins.woff') format('woff');
}
@font-face {
font-family: 'Proxima Nova';
font-family: Proxima Nova;
src: url('/fonts/ProximaNova.woff2') format('woff2'),
url('/fonts/ProximaNova.woff') format('woff');
}
${defaults}
@font-face {
font-family: 'Inter';
font-family: Inter;
src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
}
@font-face {
font-family: 'Gilroy';
font-family: Gilroy;
src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
}
@page {
@@ -99,29 +99,29 @@ crosscheck(() => {
}
.foo,
.bar {
color: black;
color: #000;
font-weight: 700;
}
@supports (foo: bar) {
.some-apply-thing {
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
font-weight: 700;
}
}
@media (min-width: 768px) {
.some-apply-thing {
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
font-weight: 700;
}
}
@supports (foo: bar) {
@media (min-width: 768px) {
.some-apply-thing {
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
font-weight: 700;
}
}
}
@@ -166,7 +166,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@import url('https://example.com');
@import 'https://example.com';
`)
})
})
tests/collapse-duplicate-declarations.test.js
+1 -1
View File
@@ -138,7 +138,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.example {
color: blue;
color: #00f;
height: var(--value);
}
`)
tests/color-opacity-modifiers.test.js
+14 -14
View File
@@ -9,7 +9,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-red-500\/50 {
background-color: rgb(239 68 68 / 0.5);
background-color: #ef444480;
}
`)
})
@@ -71,7 +71,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-\[wheat\]\/50 {
background-color: rgb(245 222 179 / 0.5);
background-color: #f5deb380;
}
`)
})
@@ -87,7 +87,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-\[\#bada55\]\/\[0\.2\] {
background-color: rgb(186 218 85 / 0.2);
background-color: #bada5533;
}
`)
})
@@ -167,15 +167,15 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.from-red-500\/50 {
--tw-gradient-from: rgb(239 68 68 / 0.5);
--tw-gradient-to: rgb(239 68 68 / 0);
--tw-gradient-from: #ef444480;
--tw-gradient-to: #ef444400;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.fill-red-500\/25 {
fill: rgb(239 68 68 / 0.25);
fill: #ef444440;
}
.placeholder-red-500\/75::placeholder {
color: rgb(239 68 68 / 0.75);
color: #ef4444bf;
}
`)
})
@@ -206,28 +206,28 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
.bg-\[hsl\(123\,50\%\,var\(--foo\)\)\] {
--tw-bg-opacity: 1;
background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
}
.bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
.bg-\[hsl\(123\,50\%\,var\(--foo\)\)\]\/50 {
background-color: hsl(123 50% var(--foo) / 0.5);
}
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
.bg-\[hsl\(123\,var\(--foo\)\,50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
}
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
.bg-\[hsl\(123\,var\(--foo\)\,50\%\)\]\/50 {
background-color: hsl(123 var(--foo) 50% / 0.5);
}
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
.bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\] {
--tw-bg-opacity: 1;
background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
}
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
.bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\]\/50 {
background-color: hsl(var(--foo) 50% 50% / 0.5);
}
.bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
.bg-\[hsl\(var\(--foo\)\,var\(--bar\)\,var\(--baz\)\)\]\/50 {
background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
}
`)
tests/combined-selectors.test.js
+2 -9
View File
@@ -29,14 +29,10 @@ crosscheck(() => {
:root {
font-weight: bold;
}
/* --- */
:root,
.a {
color: black;
color: #000;
}
${defaults}
`)
})
@@ -70,12 +66,9 @@ crosscheck(() => {
:root {
font-weight: bold;
}
/* --- */
:root,
.a {
color: black;
color: #000;
}
`)
})
tests/containerPlugin.test.js
+8 -8
View File
@@ -143,8 +143,8 @@ crosscheck(({}) => {
expect(result.css).toMatchFormattedCss(css`
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.container {
@@ -189,8 +189,8 @@ crosscheck(({}) => {
expect(result.css).toMatchFormattedCss(css`
.container {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 640px) {
.container {
@@ -246,14 +246,14 @@ crosscheck(({}) => {
expect(result.css).toMatchFormattedCss(css`
.container {
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 576px) {
.container {
max-width: 576px;
padding-right: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 768px) {
@@ -264,15 +264,15 @@ crosscheck(({}) => {
@media (min-width: 992px) {
.container {
max-width: 992px;
padding-right: 4rem;
padding-left: 4rem;
padding-right: 4rem;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
padding-right: 5rem;
padding-left: 5rem;
padding-right: 5rem;
}
}
`)
@@ -295,10 +295,10 @@ crosscheck(({}) => {
expect(result.css).toMatchFormattedCss(css`
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 400px) {
.container {
tests/context-reuse.test.js
+1 -1
View File
@@ -125,7 +125,7 @@ crosscheck(({ stable, oxide }) => {
expect(result.css).toMatchFormattedCss(css`
.only\:custom-utility:only-child {
color: blue;
color: #00f;
}
`)
})
tests/custom-plugins.test.js
+27 -33
View File
@@ -212,13 +212,13 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
color: #fff;
background-color: #00f;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
}
.btn-blue:hover {
background-color: darkblue;
background-color: #00008b;
}
`)
})
@@ -254,7 +254,6 @@ crosscheck(() => {
button {
font-family: inherit;
}
${defaults}
`)
})
@@ -343,13 +342,13 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
color: #fff;
background-color: #00f;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
}
.btn-blue:hover {
background-color: darkblue;
background-color: #00008b;
}
`)
})
@@ -396,13 +395,13 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
color: #fff;
background-color: #00f;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
}
.btn-blue:hover {
background-color: darkblue;
background-color: #00008b;
}
`)
})
@@ -559,13 +558,13 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
color: #fff;
background-color: #00f;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
}
.btn-blue:hover {
background-color: darkblue;
background-color: #00008b;
}
@media (min-width: 500px) {
.btn-blue:hover {
@@ -793,8 +792,8 @@ crosscheck(() => {
return run('@tailwind components; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.card {
padding: 1rem;
border-radius: 0.25rem;
padding: 1rem;
}
.btn {
padding: 1rem 0.5rem;
@@ -927,7 +926,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.tw-btn-blue {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -989,7 +988,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -1013,7 +1012,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.btn-blue {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -1040,7 +1039,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.tw-btn-blue {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -1121,7 +1120,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -1373,7 +1372,6 @@ crosscheck(() => {
.banana {
position: absolute;
}
@media (min-width: 400px) {
.sm\:banana {
position: absolute;
@@ -1385,7 +1383,6 @@ crosscheck(() => {
.apple {
position: absolute;
}
@media (min-width: 400px) {
.sm\:apple {
position: absolute;
@@ -1547,23 +1544,20 @@ crosscheck(() => {
expect(result.css).toMatchFormattedCss(css`
@keyframes abc {
25.001% {
color: black;
color: #000;
}
}
.foo-\[abc\] {
animation: abc 1s infinite;
animation: 1s infinite abc;
}
@media (min-width: 768px) {
@keyframes def {
25.001% {
color: black;
color: #000;
}
}
.md\:foo-\[def\] {
animation: def 1s infinite;
animation: 1s infinite def;
}
}
`)
@@ -1622,7 +1616,7 @@ crosscheck(() => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.foo {
outline: 2px dotted black;
outline: 2px dotted #000;
}
`)
})
tests/customConfig.test.js
+10 -10
View File
@@ -202,7 +202,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.min-h-primary {
min-height: 48px;
@@ -232,7 +232,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.min-h-primary {
min-height: 48px;
@@ -314,16 +314,16 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-black {
background-color: black;
background-color: #000;
}
.bg-red {
background-color: #ee0000;
background-color: #e00;
}
.bg-transparent {
background-color: transparent;
background-color: #0000;
}
.bg-white {
background-color: white;
background-color: #fff;
}
`)
})
@@ -371,16 +371,16 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.bg-black {
background-color: black;
background-color: #000;
}
.bg-red {
background-color: #ee0000;
background-color: #e00;
}
.bg-transparent {
background-color: transparent;
background-color: #0000;
}
.bg-white {
background-color: white;
background-color: #fff;
}
`)
})
tests/dark-mode.test.js
-2
View File
@@ -87,7 +87,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
.dark\:font-bold {
font-weight: 700;
@@ -113,7 +112,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
.dark\:font-bold {
font-weight: 700;
tests/evaluateTailwindFunctions.test.js
+26 -14
View File
@@ -575,7 +575,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.element {
outline: 2px dotted black;
outline: 2px dotted #000;
}
`
@@ -665,8 +665,8 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.heading {
font-family: Inter;
font-feature-settings: 'cv11';
font-family: Inter;
}
`
@@ -691,7 +691,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.element {
box-shadow: 0 0 2px black, 1px 2px 3px white;
box-shadow: 0 0 2px #000, 1px 2px 3px #fff;
}
`
@@ -761,6 +761,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen(sm) {
.foo {
color: red;
}
}
`
@@ -768,6 +769,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
@@ -784,6 +786,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen(sm) {
.foo {
color: red;
}
}
`
@@ -791,6 +794,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media (max-width: 600px) {
.foo {
color: red;
}
}
`
@@ -807,6 +811,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen(sm) {
.foo {
color: red;
}
}
`
@@ -814,6 +819,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
@@ -830,6 +836,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen(sm) {
.foo {
color: red;
}
}
`
@@ -837,6 +844,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media (min-width: 600px) and (max-width: 700px) {
.foo {
color: red;
}
}
`
@@ -853,6 +861,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen(mono) {
.foo {
color: red;
}
}
`
@@ -860,6 +869,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media monochrome {
.foo {
color: red;
}
}
`
@@ -876,6 +886,7 @@ crosscheck(({ stable, oxide }) => {
let input = css`
@media screen('sm') {
.foo {
color: red;
}
}
`
@@ -883,6 +894,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
@@ -904,7 +916,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: rgb(59 130 246 / 50%);
color: #3b82f680;
}
`
@@ -927,7 +939,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: rgb(59 130 246 / 0.5);
color: #3b82f680;
}
`
@@ -973,7 +985,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: hsl(217 91% 60% / 50%);
color: #3c83f680;
}
`
@@ -998,7 +1010,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: hsl(217 91% 60% / 0.5);
color: #3c83f680;
}
`
@@ -1107,8 +1119,8 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
background: rgb(0 0 255 / 1);
color: rgb(var(--foo) / 1);
background: #00f;
}
`
@@ -1139,10 +1151,10 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo1 {
color: #000000;
color: #000;
}
.foo2 {
color: rgb(0 0 0 / 50%);
color: #00000080;
}
`
@@ -1167,7 +1179,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: rgb(247 204 80 / 50%);
color: #f7cc5080;
}
`
@@ -1192,7 +1204,7 @@ crosscheck(({ stable, oxide }) => {
let output = css`
.foo {
color: rgb(247 204 80 / 50%);
color: #f7cc5080;
}
`
@@ -1247,10 +1259,10 @@ crosscheck(({ stable, oxide }) => {
color: #051025;
}
.foo03 {
color: rgb(5 0 0 / 10);
color: #050000;
}
.foo04 {
color: rgb(5 16 0 / 25);
color: #051000;
}
`)
})
tests/experimental.test.js
+4 -15
View File
@@ -21,13 +21,11 @@ crosscheck(() => {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.resize {
resize: both;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -57,13 +55,11 @@ crosscheck(() => {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.resize {
resize: both;
}
.hover\:shadow:hover {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -93,13 +89,11 @@ crosscheck(() => {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.resize {
resize: both;
}
.group:hover .group-hover\:shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -126,7 +120,6 @@ crosscheck(() => {
.resize {
resize: both;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -153,7 +146,6 @@ crosscheck(() => {
.resize {
resize: both;
}
.hover\:divide-y:hover > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -184,19 +176,16 @@ crosscheck(() => {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
#app .resize {
resize: both;
}
#app .divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
#app .shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
tests/important-boolean.test.js
+1 -1
View File
@@ -127,7 +127,7 @@ crosscheck(() => {
}
}
.animate-spin {
animation: spin 1s linear infinite !important;
animation: 1s linear infinite spin !important;
}
.font-bold {
font-weight: 700 !important;
tests/important-selector.test.js
+1 -1
View File
@@ -123,7 +123,7 @@ crosscheck(() => {
}
}
#app .animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
#app .font-bold {
font-weight: 700;
tests/kitchen-sink.test.js
+36 -148
View File
@@ -1,4 +1,4 @@
import { crosscheck, run, html, css } from './util/run'
import { crosscheck, run, html, css, defaults } from './util/run'
crosscheck(() => {
test('it works', () => {
@@ -236,30 +236,26 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.theme-test {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
color: #3b82f6;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji;
}
@media (min-width: 1024px) {
.screen-test {
color: purple;
}
}
.apply-1 {
margin-top: 1.5rem;
}
.apply-1,
.apply-2 {
margin-top: 1.5rem;
}
.apply-test {
margin-top: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
margin-top: 1.5rem;
}
.apply-test:hover {
font-weight: 700;
}
.apply-test:hover,
.apply-test:hover:focus {
font-weight: 700;
}
@@ -268,7 +264,7 @@ crosscheck(() => {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.apply-test:nth-child(even):focus {
.apply-test:nth-child(2n):focus {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
@@ -305,12 +301,8 @@ crosscheck(() => {
margin-left: auto;
margin-right: auto;
}
.drop-empty-rules:hover {
font-weight: 700;
}
.group:hover .apply-group {
font-weight: 700;
}
.drop-empty-rules:hover,
.group:hover .apply-group,
.dark .apply-dark-mode {
font-weight: 700;
}
@@ -336,21 +328,15 @@ crosscheck(() => {
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.nested {
.example {
font-weight: 700;
}
.example:hover {
font-weight: 400;
}
.nested .example {
font-weight: 700;
}
.apply-order-a {
margin: 1.25rem;
margin-top: 1.5rem;
.nested .example:hover {
font-weight: 400;
}
.apply-order-a,
.apply-order-b {
margin: 1.25rem;
margin-top: 1.5rem;
margin: 1.5rem 1.25rem 1.25rem;
}
.dark .group:hover .apply-dark-group-example-a {
--tw-bg-opacity: 1;
@@ -368,105 +354,12 @@ crosscheck(() => {
font-weight: 700;
}
h1:first-child {
margin-top: 0px;
margin-top: 0;
}
div {
background: #654321;
}
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
${defaults}
.container {
width: 100%;
}
@@ -505,8 +398,8 @@ crosscheck(() => {
background: #123456;
}
*,
::before,
::after,
:before,
:after,
::backdrop {
padding: 5px;
}
@@ -514,10 +407,7 @@ crosscheck(() => {
appearance: none;
}
.inset-6 {
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
inset: 1.5rem;
}
.inset-x-1 {
left: 0.25rem;
@@ -554,7 +444,7 @@ crosscheck(() => {
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.rounded-e {
@@ -578,7 +468,7 @@ crosscheck(() => {
border-inline-end-width: 4px;
}
.border-s-0 {
border-inline-start-width: 0px;
border-inline-start-width: 0;
}
.border-black {
--tw-border-opacity: 1;
@@ -611,7 +501,7 @@ crosscheck(() => {
}
.from-foo {
--tw-gradient-from: #bada55;
--tw-gradient-to: rgb(186 218 85 / 0);
--tw-gradient-to: #bada5500;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.px-1 {
@@ -634,14 +524,14 @@ crosscheck(() => {
font-weight: 500;
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow: 0 1px 2px 0 #0000000d;
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -656,13 +546,13 @@ crosscheck(() => {
background: #abcdef;
}
*,
::before,
::after,
:before,
:after,
::backdrop {
margin: 10px;
}
.first\:pt-0:first-child {
padding-top: 0px;
padding-top: 0;
}
.hover\:container:hover {
width: 100%;
@@ -703,7 +593,7 @@ crosscheck(() => {
font-weight: 700;
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -742,9 +632,7 @@ crosscheck(() => {
.group:active .group-active\:opacity-10 {
opacity: 0.1;
}
.foo\:custom-util {
background: #abcdef !important;
}
.foo\:custom-util,
.foo\:hover\:custom-util:hover {
background: #abcdef !important;
}
@@ -753,8 +641,8 @@ crosscheck(() => {
transition-property: color, background-color, border-color, outline-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.motion-safe\:custom-util {
background: #abcdef;
@@ -765,8 +653,8 @@ crosscheck(() => {
transition-property: color, background-color, border-color, outline-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
}
.dark .dark\:custom-util {
@@ -854,13 +742,13 @@ crosscheck(() => {
opacity: 0.5;
}
.md\:shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow: 0 1px 2px 0 #0000000d;
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.md\:hover\:border-r-blue-500\/30:hover {
border-right-color: rgb(59 130 246 / 0.3);
border-right-color: #3b82f64d;
}
.md\:hover\:opacity-20:hover {
opacity: 0.2;
@@ -870,8 +758,8 @@ crosscheck(() => {
transition-property: color, background-color, border-color, outline-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
background: #abcdef !important;
tests/layer-at-rules.test.js
+5 -34
View File
@@ -36,13 +36,10 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.uppercase {
text-transform: uppercase;
}
.align-banana {
text-align: banana;
}
.align-banana,
.hover\:align-banana:hover {
text-align: banana;
}
@@ -94,19 +91,11 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
/* Important base */
div {
background-color: #bada55;
}
${defaults}
/* Important component */
.important-component {
text-align: banana;
}
/* Important utility */
.important-component,
.important-utility {
text-align: banana;
}
@@ -156,19 +145,13 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
/* Important base */
div {
background-color: #bada55;
}
${defaults}
/* Important component */
.important-component {
.important-component {
text-align: banana;
}
/* Important utility */
.important-utility {
text-align: banana !important;
}
@@ -263,45 +246,34 @@ crosscheck(() => {
font-weight: medium;
}
}
body {
margin: 0;
}
h1 {
font-weight: bold;
}
p {
font-weight: normal;
}
${defaults}
.input {
background: white;
background: #fff;
}
.btn {
background: blue;
background: #00f;
}
.card {
border-radius: 12px;
}
.float-squirrel {
float: squirrel;
}
.align-banana {
text-align: banana;
}
.align-sandwich {
text-align: sandwich;
}
@layer chocolate {
a {
text-decoration: underline;
@@ -338,7 +310,6 @@ crosscheck(() => {
.test {
--tw-test: 1;
}
@supports (backdrop-filter: blur(1px)) {
.test {
--tw-test: 0.9;
tests/layer-without-tailwind.test.js
+1 -1
View File
@@ -72,7 +72,7 @@ crosscheck(() => {
expect(result.css).toMatchFormattedCss(css`
@layer custom {
.foo {
color: black;
color: #000;
}
}
`)
tests/match-components.test.js
+4 -13
View File
@@ -44,46 +44,37 @@ crosscheck(() => {
(result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.card-\[\#0088cc\] {
color: #0088cc;
color: #08c;
}
.card-\[\#0088cc\] .card-header {
border-top-width: 3px;
border-top-color: #0088cc;
border-top-color: #08c;
}
.card-\[\#0088cc\] .card-footer {
border-bottom-width: 3px;
border-bottom-color: #0088cc;
border-bottom-color: #08c;
}
.text-center {
text-align: center;
}
.font-bold {
font-weight: 700;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.hover\:card-\[\#f0f\]:hover {
color: #f0f;
}
.hover\:card-\[\#f0f\]:hover .card-header {
border-top-width: 3px;
border-top-color: #f0f;
}
.hover\:card-\[\#f0f\]:hover .card-footer {
border-bottom-width: 3px;
border-bottom-color: #f0f;
tests/match-variants.test.js
+7 -33
View File
@@ -28,7 +28,6 @@ crosscheck(() => {
.potato-baked .potato-\[baked\]\:w-3 {
width: 0.75rem;
}
.potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
@@ -138,7 +137,6 @@ crosscheck(() => {
.tooltip-bottom\:mt-2[data-location='bottom'] {
margin-top: 0.5rem;
}
.tooltip-top\:mb-2[data-location='top'] {
margin-bottom: 0.5rem;
}
@@ -176,18 +174,9 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.alphabet-a\:underline[data-value='a'] {
text-decoration-line: underline;
}
.alphabet-b\:underline[data-value='b'] {
text-decoration-line: underline;
}
.alphabet-c\:underline[data-value='c'] {
text-decoration-line: underline;
}
.alphabet-a\:underline[data-value='a'],
.alphabet-b\:underline[data-value='b'],
.alphabet-c\:underline[data-value='c'],
.alphabet-d\:underline[data-value='d'] {
text-decoration-line: underline;
}
@@ -218,15 +207,9 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.test-\[a\2c b\2c c\]\:underline.a > * {
text-decoration-line: underline;
}
.test-\[a\2c b\2c c\]\:underline.b > * {
text-decoration-line: underline;
}
.test-\[a\2c b\2c c\]\:underline.c > * {
.test-\[a\,b\,c\]\:underline.a > *,
.test-\[a\,b\,c\]\:underline.b > *,
.test-\[a\,b\,c\]\:underline.c > * {
text-decoration-line: underline;
}
`)
@@ -267,7 +250,6 @@ crosscheck(() => {
text-decoration-line: underline;
}
}
@media (min-width: 700px) {
.testmin-\[700px\]\:italic {
font-style: italic;
@@ -316,13 +298,11 @@ crosscheck(() => {
font-style: italic;
}
}
@media (min-width: 600px) {
.testmin-example\:italic {
font-style: italic;
}
}
@media (min-width: 700px) {
.testmin-\[700px\]\:italic {
font-style: italic;
@@ -391,7 +371,6 @@ crosscheck(() => {
}
}
}
@media (min-width: 150px) {
@media (max-width: 400px) {
.testmin-\[150px\]\:testmax-\[400px\]\:underline {
@@ -441,9 +420,7 @@ crosscheck(() => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 100px) {
@media (max-width: 200px) {
.testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover {
text-decoration-line: underline;
}
.testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover,
.testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus {
text-decoration-line: underline;
}
@@ -496,21 +473,18 @@ crosscheck(() => {
text-decoration-line: underline;
}
}
@media (max-width: 300px) {
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}
}
}
@media (min-width: 200px) {
@media (max-width: 400px) {
.testmin-\[200px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (max-width: 300px) {
.testmin-\[200px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
tests/negative-prefix.test.js
+6 -8
View File
@@ -138,10 +138,10 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.-mt-5 {
margin-top: calc(calc(52px * -3) * -1);
margin-top: 156px;
}
.mt-5 {
margin-top: calc(52px * -3);
margin-top: -156px;
}
`)
})
@@ -164,13 +164,13 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.-mt-clamp {
margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
margin-top: calc(-1 * clamp(1rem, 100vh, 3rem));
}
.-mt-max {
margin-top: calc(max(100vmax, 3rem) * -1);
margin-top: calc(-1 * max(100vmax, 3rem));
}
.-mt-min {
margin-top: calc(min(100vmin, 3rem) * -1);
margin-top: calc(-1 * min(100vmin, 3rem));
}
.mt-clamp {
margin-top: clamp(1rem, 100vh, 3rem);
@@ -216,9 +216,7 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.-mt-0 {
margin-top: 0;
}
.-mt-0,
.mt-0 {
margin-top: 0;
}
tests/normalize-config.test.js
-2
View File
@@ -95,12 +95,10 @@ crosscheck(({ stable, oxide }) => {
.text-center {
text-align: center;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.font-bold {
font-weight: 700;
}
tests/opacity.test.js
+27 -35
View File
@@ -26,18 +26,14 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.divide-black > :not([hidden]) ~ :not([hidden]) {
border-color: #000;
}
.divide-black > :not([hidden]) ~ :not([hidden]),
.border-black {
border-color: #000;
}
.bg-black {
background-color: #000;
}
.text-black {
color: #000;
}
.text-black,
.placeholder-black::placeholder {
color: #000;
}
@@ -78,18 +74,14 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.divide-primary > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(var(--color-primary));
}
.divide-primary > :not([hidden]) ~ :not([hidden]),
.border-primary {
border-color: rgb(var(--color-primary));
}
.bg-primary {
background-color: rgb(var(--color-primary));
}
.text-primary {
color: rgb(var(--color-primary));
}
.text-primary,
.placeholder-primary::placeholder {
color: rgb(var(--color-primary));
}
@@ -408,7 +400,7 @@ crosscheck(() => {
let output = css`
.text-foo {
color: rgb(59 130 246 / 50%);
color: #3b82f680;
}
`
@@ -436,7 +428,7 @@ crosscheck(() => {
let output = css`
.text-foo {
color: rgb(59 130 246 / 0.5);
color: #3b82f680;
}
`
@@ -492,7 +484,7 @@ crosscheck(() => {
let output = css`
.text-foo {
color: hsl(217 91% 60% / 50%);
color: #3c83f680;
}
`
@@ -520,7 +512,7 @@ crosscheck(() => {
let output = css`
.text-foo {
color: hsl(217 91% 60% / 0.5);
color: #3c83f680;
}
`
@@ -757,7 +749,7 @@ crosscheck(() => {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-foo2 {
background-color: rgb(0 0 0 / 50%);
background-color: #00000080;
}
`)
})
@@ -801,30 +793,30 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.bg-foo10 {
background-color: rgb(255 100 0 / 100%);
background-color: #ff6400;
}
.bg-foo11 {
background-color: rgb(255 100 0 / 50%);
background-color: #ff640080;
}
.bg-foo20 {
--tw-bg-opacity: 1;
background-color: rgb(255 100 0 / var(--tw-bg-opacity));
}
.bg-foo21 {
background-color: rgb(255 100 0 / 50%);
background-color: #ff640080;
}
.bg-foo30 {
background-color: rgb(255 100 0 / 100%);
background-color: #ff6400;
}
.bg-foo31 {
background-color: rgb(255 100 0 / 50%);
background-color: #ff640080;
}
.bg-foo40 {
--tw-bg-opacity: 1;
background-color: rgb(255 100 0 / var(--tw-bg-opacity));
}
.bg-foo41 {
background-color: rgb(255 100 0 / 50%);
background-color: #ff640080;
}
`)
})
@@ -861,7 +853,7 @@ crosscheck(() => {
border-color: #93c5fd;
}
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(147 197 253 / 0.5);
border-color: #93c5fd80;
}
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(147 197 253 / var(--my-opacity));
@@ -870,7 +862,7 @@ crosscheck(() => {
border-color: #93c5fd;
}
.border-blue-300\/50 {
border-color: rgb(147 197 253 / 0.5);
border-color: #93c5fd80;
}
.border-blue-300\/\[var\(--my-opacity\)\] {
border-color: rgb(147 197 253 / var(--my-opacity));
@@ -879,7 +871,7 @@ crosscheck(() => {
background-color: #93c5fd;
}
.bg-blue-300\/50 {
background-color: rgb(147 197 253 / 0.5);
background-color: #93c5fd80;
}
.bg-blue-300\/\[var\(--my-opacity\)\] {
background-color: rgb(147 197 253 / var(--my-opacity));
@@ -888,7 +880,7 @@ crosscheck(() => {
color: #93c5fd;
}
.text-blue-300\/50 {
color: rgb(147 197 253 / 0.5);
color: #93c5fd80;
}
.text-blue-300\/\[var\(--my-opacity\)\] {
color: rgb(147 197 253 / var(--my-opacity));
@@ -897,7 +889,7 @@ crosscheck(() => {
color: #93c5fd;
}
.placeholder-blue-300\/50::placeholder {
color: rgb(147 197 253 / 0.5);
color: #93c5fd80;
}
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
color: rgb(147 197 253 / var(--my-opacity));
@@ -906,7 +898,7 @@ crosscheck(() => {
--tw-ring-color: #93c5fd;
}
.ring-blue-300\/50 {
--tw-ring-color: rgb(147 197 253 / 0.5);
--tw-ring-color: #93c5fd80;
}
.ring-blue-300\/\[var\(--my-opacity\)\] {
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
@@ -955,7 +947,7 @@ crosscheck(() => {
border-color: rgb(147 197 253 / var(--tw-divide-opacity));
}
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(147 197 253 / 0.5);
border-color: #93c5fd80;
}
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(147 197 253 / var(--my-opacity));
@@ -968,7 +960,7 @@ crosscheck(() => {
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.border-blue-300\/50 {
border-color: rgb(147 197 253 / 0.5);
border-color: #93c5fd80;
}
.border-blue-300\/\[var\(--my-opacity\)\] {
border-color: rgb(147 197 253 / var(--my-opacity));
@@ -981,7 +973,7 @@ crosscheck(() => {
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}
.bg-blue-300\/50 {
background-color: rgb(147 197 253 / 0.5);
background-color: #93c5fd80;
}
.bg-blue-300\/\[var\(--my-opacity\)\] {
background-color: rgb(147 197 253 / var(--my-opacity));
@@ -994,7 +986,7 @@ crosscheck(() => {
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.text-blue-300\/50 {
color: rgb(147 197 253 / 0.5);
color: #93c5fd80;
}
.text-blue-300\/\[var\(--my-opacity\)\] {
color: rgb(147 197 253 / var(--my-opacity));
@@ -1007,7 +999,7 @@ crosscheck(() => {
color: rgb(147 197 253 / var(--tw-placeholder-opacity));
}
.placeholder-blue-300\/50::placeholder {
color: rgb(147 197 253 / 0.5);
color: #93c5fd80;
}
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
color: rgb(147 197 253 / var(--my-opacity));
@@ -1020,7 +1012,7 @@ crosscheck(() => {
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}
.ring-blue-300\/50 {
--tw-ring-color: rgb(147 197 253 / 0.5);
--tw-ring-color: #93c5fd80;
}
.ring-blue-300\/\[var\(--my-opacity\)\] {
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
tests/oxide.test.js
+1 -2
View File
@@ -11,11 +11,10 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
${defaults}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
`)
})
tests/parallel-variants.test.js
+15 -15
View File
@@ -22,13 +22,13 @@ crosscheck(() => {
.font-normal {
font-weight: 400;
}
.test\:font-bold *::test {
.test\:font-bold ::test {
font-weight: 700;
}
.test\:font-medium *::test {
.test\:font-medium ::test {
font-weight: 500;
}
.hover\:test\:font-black *:hover::test {
.hover\:test\:font-black :hover::test {
font-weight: 900;
}
.test\:font-bold::test {
@@ -65,10 +65,10 @@ crosscheck(() => {
.font-normal {
font-weight: 400;
}
.test\:font-bold *::test {
.test\:font-bold ::test {
font-weight: 700;
}
.test\:font-medium *::test {
.test\:font-medium ::test {
font-weight: 500;
}
.test\:font-bold::test {
@@ -77,7 +77,7 @@ crosscheck(() => {
.test\:font-medium::test {
font-weight: 500;
}
.hover\:test\:font-black *:hover::test {
.hover\:test\:font-black :hover::test {
font-weight: 900;
}
.hover\:test\:font-black:hover::test {
@@ -114,23 +114,23 @@ crosscheck(() => {
.font-normal {
font-weight: 400;
}
.test\:font-bold *::test {
font-weight: calc(0 + 700);
.test\:font-bold ::test {
font-weight: 700;
}
.test\:font-medium *::test {
font-weight: calc(0 + 500);
.test\:font-medium ::test {
font-weight: 500;
}
.test\:font-bold::test {
font-weight: calc(0 + 700);
font-weight: 700;
}
.test\:font-medium::test {
font-weight: calc(0 + 500);
font-weight: 500;
}
.hover\:test\:font-black *:hover::test {
font-weight: calc(0 + 900);
.hover\:test\:font-black :hover::test {
font-weight: 900;
}
.hover\:test\:font-black:hover::test {
font-weight: calc(0 + 900);
font-weight: 900;
}
`)
})
tests/parseObjectStyles.test.js
+11 -11
View File
@@ -18,8 +18,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foobar {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
`)
@@ -40,8 +40,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
.bar {
@@ -68,15 +68,15 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
.foo:hover {
background-color: orange;
}
.foo:focus {
background-color: blue;
background-color: #00f;
}
`)
})
@@ -113,8 +113,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
@media (min-width: 200px) {
@@ -139,8 +139,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
@screen sm {
@@ -167,8 +167,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
@media (min-width: 200px) {
@@ -193,8 +193,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
.foo .bar {
@@ -217,8 +217,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
.foo.bar {
@@ -243,8 +243,8 @@ crosscheck(() => {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
color: white;
padding: 1rem;
}
@media (min-width: 200px) {
@@ -298,7 +298,7 @@ crosscheck(() => {
background-color: red;
}
.foo {
background-color: blue;
background-color: #00f;
}
`)
})
tests/plugins/divide.test.js
-6
View File
@@ -29,7 +29,6 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
stable.expect(result.css).toMatchCss(css`
${defaults}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -39,7 +38,6 @@ crosscheck(({ stable, oxide }) => {
oxide.expect(result.css).toMatchCss(css`
${defaults}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-inline-end-width: calc(1px * var(--tw-divide-x-reverse));
@@ -58,7 +56,6 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
${defaults}
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 1;
}
@@ -75,7 +72,6 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
${defaults}
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 1;
}
@@ -92,13 +88,11 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
${defaults}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.border-r {
border-right-width: 1px;
}
tests/plugins/fontFamily.test.js
+2 -2
View File
@@ -71,8 +71,8 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
font-feature-settings: 'cv11', 'ss01';
font-family: Helvetica, Arial, sans-serif;
}
`)
})
@@ -91,8 +91,8 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
font-feature-settings: 'cv11', 'ss01';
font-family: Helvetica, Arial, sans-serif;
}
`)
})
tests/plugins/fontSize.test.js
+6 -6
View File
@@ -45,12 +45,12 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.text-lg {
font-size: 20px;
letter-spacing: -0.02em;
font-size: 20px;
}
.text-md {
font-size: 16px;
letter-spacing: -0.01em;
font-size: 16px;
}
.text-sm {
font-size: 12px;
@@ -74,14 +74,14 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.text-lg {
letter-spacing: -0.02em;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.02em;
}
.text-md {
letter-spacing: -0.01em;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.01em;
}
.text-sm {
font-size: 12px;
@@ -106,13 +106,13 @@ crosscheck(() => {
expect(result.css).toMatchCss(css`
.text-lg {
font-size: 20px;
line-height: 28px;
font-weight: bold;
line-height: 28px;
}
.text-md {
font-size: 16px;
line-height: 24px;
font-weight: 500;
line-height: 24px;
}
.text-sm {
font-size: 12px;
tests/plugins/gradientColorStops.test.js
+10 -10
View File
@@ -34,28 +34,28 @@ crosscheck(() => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.from-primary {
--tw-gradient-from: rgb(31, 31, 31);
--tw-gradient-to: rgba(31, 31, 31, 0);
--tw-gradient-from: #1f1f1f;
--tw-gradient-to: #1f1f1f00;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary {
--tw-gradient-from: hsl(10, 50%, 50%);
--tw-gradient-to: hsl(10 50% 50% / 0);
--tw-gradient-from: #bf5540;
--tw-gradient-to: #bf554000;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-primary {
--tw-gradient-to: rgba(31, 31, 31, 0);
--tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to);
--tw-gradient-to: #1f1f1f00;
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f, var(--tw-gradient-to);
}
.via-secondary {
--tw-gradient-to: hsl(10 50% 50% / 0);
--tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to);
--tw-gradient-to: #bf554000;
--tw-gradient-stops: var(--tw-gradient-from), #bf5540, var(--tw-gradient-to);
}
.to-primary {
--tw-gradient-to: rgb(31, 31, 31);
--tw-gradient-to: #1f1f1f;
}
.to-secondary {
--tw-gradient-to: hsl(10, 50%, 50%);
--tw-gradient-to: #bf5540;
}
.text-primary {
--tw-text-opacity: 1;
tests/postcss-plugins/nesting/index.test.js
+1 -2
View File
@@ -188,14 +188,13 @@ test('nesting does not break downstream plugin visitors', async () => {
expect(result).toMatchCss(css`
.foo {
color: black;
color: #000;
}
@suppoerts (color: blue) {
.foo {
color: blue;
}
}
/* Comment */
`)
expect(spyPlugin.spies.Once).toHaveBeenCalled()
tests/prefers-contrast.test.js
-5
View File
@@ -20,19 +20,16 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
@media (prefers-contrast: more) {
.contrast-more\:bg-pink-500 {
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
}
}
@media (prefers-contrast: less) {
.contrast-less\:bg-black {
--tw-bg-opacity: 1;
@@ -58,14 +55,12 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-contrast: more) {
.contrast-more\:bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-white {
--tw-bg-opacity: 1;
tests/prefix.test.js
+16 -39
View File
@@ -121,9 +121,7 @@ crosscheck(({ stable, oxide }) => {
max-width: 1536px;
}
}
.tw-btn-prefix {
button: yes;
}
.tw-btn-prefix,
.btn-no-prefix {
button: yes;
}
@@ -137,7 +135,7 @@ crosscheck(({ stable, oxide }) => {
margin-left: -1rem;
}
.tw-animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite ping;
}
@keyframes tw-spin {
to {
@@ -145,14 +143,12 @@ crosscheck(({ stable, oxide }) => {
}
}
.tw-animate-spin {
animation: tw-spin 1s linear infinite;
animation: 1s linear infinite tw-spin;
}
.tw-font-bold {
font-weight: 700;
}
.tw-custom-util-prefix {
button: no;
}
.tw-custom-util-prefix,
.custom-util-no-prefix {
button: no;
}
@@ -167,7 +163,7 @@ crosscheck(({ stable, oxide }) => {
text-align: center;
}
}
.tw-dark .dark\:tw-bg-\[rgb\(255\2c 0\2c 0\)\] {
.tw-dark .dark\:tw-bg-\[rgb\(255\,0\,0\)\] {
--tw-bg-opacity: 1;
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
}
@@ -341,9 +337,7 @@ crosscheck(({ stable, oxide }) => {
.hover\:tw--top-1:hover {
top: -0.25rem;
}
.hover\:tw--top-\[1px\]:hover {
top: -1px;
}
.hover\:tw--top-\[1px\]:hover,
.hover\:tw-top-\[-1px\]:hover {
top: -1px;
}
@@ -383,18 +377,12 @@ crosscheck(({ stable, oxide }) => {
const result = await run(input, config)
expect(result.css).toMatchFormattedCss(css`
.a:hover {
top: -0.25rem;
}
.a:hover,
.b:hover {
top: -0.25rem;
}
.c:hover {
top: -1px;
}
.d:hover {
top: -1px;
}
.c:hover,
.d:hover,
.e:hover {
top: -1px;
}
@@ -424,9 +412,7 @@ crosscheck(({ stable, oxide }) => {
const result = await run(input, config)
expect(result.css).toMatchFormattedCss(css`
.-tw-top-1 {
top: -0.25rem;
}
.-tw-top-1,
.tw--top-1 {
top: -0.25rem;
}
@@ -459,23 +445,14 @@ crosscheck(({ stable, oxide }) => {
const result = await run(input, config)
expect(result.css).toMatchFormattedCss(css`
.-tw-top-1 {
top: -0.25rem;
}
.tw--top-1 {
top: -0.25rem;
}
.hover\:-tw-top-1:hover {
top: -0.25rem;
}
.-tw-top-1,
.tw--top-1,
.hover\:-tw-top-1:hover,
.hover\:tw--top-1:hover {
top: -0.25rem;
}
@media (min-width: 640px) {
.sm\:hover\:-tw-top-1:hover {
top: -0.25rem;
}
.sm\:hover\:-tw-top-1:hover,
.sm\:hover\:tw--top-1:hover {
top: -0.25rem;
}
@@ -521,8 +498,8 @@ crosscheck(({ stable, oxide }) => {
expect(result.css).toMatchFormattedCss(css`
.foo {
color: rgb(var(--button-background, var(--primary-button-background)));
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
border-radius: min(4px, var(--input-border-radius));
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
`)
})
@@ -580,7 +557,7 @@ crosscheck(({ stable, oxide }) => {
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: red;
}
.hover\:before\:\@content-\[\'Hovering\'\]:hover::before {
.hover\:before\:\@content-\[\'Hovering\'\]:hover:before {
--tw-content: 'Hovering';
content: var(--tw-content);
}
tests/raw-content.oxide.test.css
+28 -30
View File
@@ -27,15 +27,15 @@
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.pointer-events-none {
pointer-events: none;
@@ -50,10 +50,7 @@
position: absolute;
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset: 0;
}
.inset-x-2 {
left: 0.5rem;
@@ -135,7 +132,7 @@
margin-right: 0.25rem;
}
.mt-0 {
margin-top: 0px;
margin-top: 0;
}
.box-border {
box-sizing: border-box;
@@ -153,7 +150,7 @@
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.w-12 {
width: 3rem;
@@ -165,7 +162,7 @@
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
@@ -186,7 +183,7 @@
border-collapse: collapse;
}
.origin-top-right {
transform-origin: top right;
transform-origin: 100% 0;
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
@@ -256,7 +253,7 @@
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.cursor-pointer {
cursor: pointer;
@@ -326,8 +323,8 @@
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(1rem * var(--tw-space-x-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
@@ -389,9 +386,9 @@
scroll-behavior: smooth;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-ellipsis {
text-overflow: ellipsis;
@@ -433,20 +430,22 @@
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-to: rgb(252 165 165 / 0);
--tw-gradient-to: #fca5a500;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-200 {
--tw-gradient-to: rgb(233 213 255 / 0);
--tw-gradient-to: #e9d5ff00;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
}
.decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bg-cover {
@@ -480,7 +479,7 @@
stroke: currentColor;
}
.stroke-2 {
stroke-width: 2;
stroke-width: 2px;
}
.object-cover {
object-fit: cover;
@@ -518,9 +517,9 @@
vertical-align: middle;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
@@ -596,20 +595,20 @@
mix-blend-mode: saturation;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -657,8 +656,7 @@
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
--tw-drop-shadow: drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -759,19 +757,19 @@
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-300 {
transition-delay: 300ms;
transition-delay: 0.3s;
}
.duration-200 {
transition-duration: 200ms;
transition-duration: 0.2s;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
tests/raw-content.test.css
+27 -29
View File
@@ -27,15 +27,15 @@
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.pointer-events-none {
pointer-events: none;
@@ -50,10 +50,7 @@
position: absolute;
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset: 0;
}
.inset-x-2 {
left: 0.5rem;
@@ -135,7 +132,7 @@
margin-right: 0.25rem;
}
.mt-0 {
margin-top: 0px;
margin-top: 0;
}
.box-border {
box-sizing: border-box;
@@ -153,7 +150,7 @@
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
min-height: 0;
}
.w-12 {
width: 3rem;
@@ -165,7 +162,7 @@
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
@@ -186,7 +183,7 @@
border-collapse: collapse;
}
.origin-top-right {
transform-origin: top right;
transform-origin: 100% 0;
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
@@ -256,7 +253,7 @@
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.cursor-pointer {
cursor: pointer;
@@ -389,9 +386,9 @@
scroll-behavior: smooth;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-ellipsis {
text-overflow: ellipsis;
@@ -433,20 +430,22 @@
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-to: rgb(252 165 165 / 0);
--tw-gradient-to: #fca5a500;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-200 {
--tw-gradient-to: rgb(233 213 255 / 0);
--tw-gradient-to: #e9d5ff00;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
}
.decoration-slice {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
.decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bg-cover {
@@ -480,7 +479,7 @@
stroke: currentColor;
}
.stroke-2 {
stroke-width: 2;
stroke-width: 2px;
}
.object-cover {
object-fit: cover;
@@ -518,9 +517,9 @@
vertical-align: middle;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
@@ -596,20 +595,20 @@
mix-blend-mode: saturation;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -657,8 +656,7 @@
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
--tw-drop-shadow: drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -759,19 +757,19 @@
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-300 {
transition-delay: 300ms;
transition-delay: 0.3s;
}
.duration-200 {
transition-duration: 200ms;
transition-duration: 0.2s;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
tests/resolve-defaults-at-rules.test.js
+34 -137
View File
@@ -16,16 +16,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -35,8 +27,6 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.rotate-3 {
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -76,16 +66,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -95,8 +77,6 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.hover\:scale-x-110:hover {
--tw-scale-x: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -134,16 +114,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -153,16 +125,14 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.before\:scale-x-110::before {
.before\:scale-x-110:before {
content: var(--tw-content);
--tw-scale-x: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:rotate-3::after {
.after\:rotate-3:after {
content: var(--tw-content);
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -188,16 +158,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -207,8 +169,6 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.group:hover .group-hover\:scale-x-110 {
--tw-scale-x: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -242,16 +202,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -261,16 +213,14 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.group:hover .group-hover\:before\:scale-x-110::before {
.group:hover .group-hover\:before\:scale-x-110:before {
content: var(--tw-content);
--tw-scale-x: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:focus ~ .peer-focus\:after\:rotate-3::after {
.peer:focus ~ .peer-focus\:after\:rotate-3:after {
content: var(--tw-content);
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -302,16 +252,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -321,16 +263,14 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.group:hover .group-hover\:hover\:before\:scale-x-110:hover::before {
.group:hover .group-hover\:hover\:before\:scale-x-110:hover:before {
content: var(--tw-content);
--tw-scale-x: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus::after {
.peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus:after {
content: var(--tw-content);
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -398,16 +338,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -417,15 +349,13 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.foo {
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.bar::before {
.bar:before {
content: var(--tw-content);
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
@@ -433,7 +363,7 @@ crosscheck(() => {
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.baz::before {
.baz:before {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
@@ -468,8 +398,8 @@ crosscheck(() => {
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.a::before,
.b::after {
.a:before,
.b:after {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
@@ -528,7 +458,6 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
.a:before {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -571,7 +500,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
/* --- */
.border {
border-width: 1px;
}
@@ -603,31 +531,20 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
:before,
:after,
::backdrop {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
/* --- */
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -642,11 +559,11 @@ crosscheck(() => {
var(--tw-shadow, 0 0 #0000);
}
.ring-black\/25 {
--tw-ring-color: rgb(0 0 0 / 0.25);
--tw-ring-color: #00000040;
}
@media (min-width: 768px) {
.md\:shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -672,16 +589,8 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
:before,
:after,
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@@ -691,8 +600,6 @@ crosscheck(() => {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
/* --- */
`)
})
})
@@ -711,7 +618,6 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
/* --- */
.rotate-3 {
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -780,37 +686,28 @@ crosscheck(() => {
[id='other'],
[data-bar='baz'],
article,
[id='another']::before {
[id='another']:before {
--color: black;
}
/* --- */
.foo {
background-color: var(--color);
}
#app {
border-color: var(--color);
}
span#page {
color: var(--color);
}
div[data-foo='bar']#other {
fill: var(--color);
}
div[data-bar='baz'] {
stroke: var(--color);
}
article {
--article: var(--color);
}
div[data-foo='bar']#another::before {
div[data-foo='bar']#another:before {
fill: var(--color);
}
`)
tests/responsive-and-variants-atrules.test.js
+6 -6
View File
@@ -96,7 +96,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.responsive-in-components {
color: blue;
color: #00f;
}
.variants-in-components {
color: red;
@@ -105,7 +105,7 @@ crosscheck(() => {
color: green;
}
.responsive-in-utilities {
color: blue;
color: #00f;
}
.variants-in-utilities {
color: red;
@@ -114,7 +114,7 @@ crosscheck(() => {
color: green;
}
.responsive-at-root {
color: white;
color: #fff;
}
.variants-at-root {
color: orange;
@@ -124,7 +124,7 @@ crosscheck(() => {
}
@media (min-width: 768px) {
.md\:focus\:responsive-in-components:focus {
color: blue;
color: #00f;
}
.md\:focus\:variants-in-components:focus {
color: red;
@@ -133,7 +133,7 @@ crosscheck(() => {
color: green;
}
.md\:focus\:responsive-in-utilities:focus {
color: blue;
color: #00f;
}
.md\:focus\:variants-in-utilities:focus {
color: red;
@@ -142,7 +142,7 @@ crosscheck(() => {
color: green;
}
.md\:focus\:responsive-at-root:focus {
color: white;
color: #fff;
}
.md\:focus\:variants-at-root:focus {
color: orange;
tests/safelist.test.js
+14 -57
View File
@@ -26,20 +26,16 @@ crosscheck(() => {
.mt-\[20px\] {
margin-top: 20px;
}
.font-bold {
font-weight: 700;
}
.uppercase {
text-transform: uppercase;
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
@@ -64,21 +60,17 @@ crosscheck(() => {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.uppercase {
text-transform: uppercase;
}
.hover\:bg-red-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.hover\:bg-red-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -113,21 +105,17 @@ crosscheck(() => {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.uppercase {
text-transform: uppercase;
}
.hover\:bg-red-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.hover\:bg-red-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -153,12 +141,10 @@ crosscheck(() => {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.tw-bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.tw-uppercase {
text-transform: uppercase;
}
@@ -217,7 +203,6 @@ crosscheck(() => {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.uppercase {
text-transform: uppercase;
}
@@ -241,11 +226,9 @@ crosscheck(() => {
.-top-1 {
top: -0.25rem;
}
.uppercase {
text-transform: uppercase;
}
.hover\:-top-1:hover {
top: -0.25rem;
}
@@ -275,61 +258,61 @@ crosscheck(() => {
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-400\/40 {
background-color: rgb(248 113 113 / 0.4);
background-color: #f8717166;
}
.bg-red-400\/50 {
background-color: rgb(248 113 113 / 0.5);
background-color: #f8717180;
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-red-500\/40 {
background-color: rgb(239 68 68 / 0.4);
background-color: #ef444466;
}
.bg-red-500\/50 {
background-color: rgb(239 68 68 / 0.5);
background-color: #ef444480;
}
.fill-red-200\/50 {
fill: rgb(254 202 202 / 0.5);
fill: #fecaca80;
}
.uppercase {
text-transform: uppercase;
}
.text-red-200\/50 {
color: rgb(254 202 202 / 0.5);
color: #fecaca80;
}
.ring-red-200\/50 {
--tw-ring-color: rgb(254 202 202 / 0.5);
--tw-ring-color: #fecaca80;
}
.hover\:bg-red-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.hover\:bg-red-400\/40:hover {
background-color: rgb(248 113 113 / 0.4);
background-color: #f8717166;
}
.hover\:bg-red-400\/50:hover {
background-color: rgb(248 113 113 / 0.5);
background-color: #f8717180;
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.hover\:bg-red-500\/40:hover {
background-color: rgb(239 68 68 / 0.4);
background-color: #ef444466;
}
.hover\:bg-red-500\/50:hover {
background-color: rgb(239 68 68 / 0.5);
background-color: #ef444480;
}
.hover\:fill-red-200\/50:hover {
fill: rgb(254 202 202 / 0.5);
fill: #fecaca80;
}
.hover\:text-red-200\/50:hover {
color: rgb(254 202 202 / 0.5);
color: #fecaca80;
}
.hover\:ring-red-200\/50:hover {
--tw-ring-color: rgb(254 202 202 / 0.5);
--tw-ring-color: #fecaca80;
}
`)
})
@@ -346,15 +329,12 @@ crosscheck(() => {
.\!grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.\!grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.\!grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.uppercase {
text-transform: uppercase;
}
@@ -374,15 +354,12 @@ crosscheck(() => {
.\!tw-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.\!tw-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.\!tw-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.tw-uppercase {
text-transform: uppercase;
}
@@ -407,41 +384,33 @@ crosscheck(() => {
--tw-bg-opacity: 1 !important;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
}
.\!bg-gray-600 {
--tw-bg-opacity: 1 !important;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
}
.\!bg-gray-700 {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}
.\!bg-gray-800 {
--tw-bg-opacity: 1 !important;
background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
}
.uppercase {
text-transform: uppercase;
}
.hover\:\!bg-gray-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
}
.hover\:\!bg-gray-600:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
}
.hover\:\!bg-gray-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}
.hover\:\!bg-gray-800:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
@@ -471,61 +440,49 @@ crosscheck(() => {
--tw-bg-opacity: 1 !important;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}
.\!bg-gray-300 {
--tw-bg-opacity: 1 !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
}
.\!bg-gray-400 {
--tw-bg-opacity: 1 !important;
background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
}
.uppercase {
text-transform: uppercase;
}
.\!text-gray-700 {
--tw-text-opacity: 1 !important;
color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}
.\!text-gray-800 {
--tw-text-opacity: 1 !important;
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}
.\!text-gray-900 {
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
}
.hover\:\!bg-gray-200:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}
.hover\:\!bg-gray-300:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
}
.hover\:\!bg-gray-400:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
}
.hover\:\!text-gray-700:hover {
--tw-text-opacity: 1 !important;
color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}
.hover\:\!text-gray-800:hover {
--tw-text-opacity: 1 !important;
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}
.hover\:\!text-gray-900:hover {
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
tests/screenAtRule.test.js
+32 -22
View File
@@ -1,7 +1,7 @@
import postcss from 'postcss'
import plugin from '../src/lib/substituteScreenAtRules'
import config from '../stubs/defaultConfig.stub.js'
import { crosscheck } from './util/run'
import { crosscheck, css } from './util/run'
function run(input, opts = config) {
return postcss([plugin({ tailwindConfig: opts })]).process(input, { from: undefined })
@@ -9,29 +9,23 @@ function run(input, opts = config) {
crosscheck(() => {
test('it can generate media queries from configured screen sizes', () => {
const input = `
@screen sm {
.banana { color: yellow; }
}
@screen md {
.banana { color: red; }
}
@screen lg {
.banana { color: green; }
}
`
const output = `
@media (min-width: 500px) {
.banana { color: yellow; }
let input = css`
@screen sm {
.banana {
color: yellow;
}
}
@media (min-width: 750px) {
.banana { color: red; }
@screen md {
.banana {
color: red;
}
}
@media (min-width: 1000px) {
.banana { color: green; }
@screen lg {
.banana {
color: green;
}
}
`
`
return run(input, {
theme: {
@@ -43,7 +37,23 @@ crosscheck(() => {
},
separator: ':',
}).then((result) => {
expect(result.css).toMatchCss(output)
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 500px) {
.banana {
color: #ff0;
}
}
@media (min-width: 750px) {
.banana {
color: red;
}
}
@media (min-width: 1000px) {
.banana {
color: green;
}
}
`)
expect(result.warnings().length).toBe(0)
})
})
tests/tailwind-screens.test.js
+4 -8
View File
@@ -16,9 +16,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
.font-bold,
.hover\:font-bold:hover {
font-weight: 700;
}
@@ -28,7 +26,7 @@ crosscheck(() => {
}
}
.foo {
color: black;
color: #000;
}
`)
})
@@ -49,9 +47,7 @@ crosscheck(() => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
.font-bold,
.hover\:font-bold:hover {
font-weight: 700;
}
@@ -61,7 +57,7 @@ crosscheck(() => {
}
}
.foo {
color: black;
color: #000;
}
`)
})
tests/util/defaults.js
+3 -48
View File
@@ -5,56 +5,11 @@ import { css } from './strings'
* @param {string} [param0.defaultRingColor]
* @returns {string}
*/
export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) {
export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
return css`
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: ${defaultRingColor};
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
:before,
:after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
tests/variant-grouping.test.skip.js
-6
View File
@@ -17,7 +17,6 @@ it('should not generate nested selectors if the feature flag is not enabled', ()
.italic {
font-style: italic;
}
.underline {
text-decoration-line: underline;
}
@@ -129,7 +128,6 @@ it('should be possible to group nested grouped variants', () => {
font-style: italic;
text-decoration-line: underline;
}
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\):hover {
font-weight: 700;
text-transform: uppercase;
@@ -162,7 +160,6 @@ it('should be possible to use nested multiple grouped variants', () => {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
--tw-text-opacity: 1;
@@ -262,20 +259,17 @@ it('should group with variants defined in external plugins', () => {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
[data-ui-state~='active'] .ui-active\:\(bg-black\2c text-white\) {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ui-selected\:\(bg-indigo-500\2c underline\)[data-ui-state~='selected'] {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
text-decoration-line: underline;
}
[data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\2c underline\) {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
tests/variants.oxide.test.css
+136 -671
View File
@@ -1,51 +1,6 @@
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
:before,
:after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -68,7 +23,7 @@
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@@ -92,40 +47,40 @@
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.first-letter\:text-2xl::first-letter {
.first-letter\:text-2xl:first-letter {
font-size: 1.5rem;
line-height: 2rem;
}
.first-letter\:text-red-500::first-letter {
.first-letter\:text-red-500:first-letter {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.first-line\:bg-yellow-300::first-line {
.first-line\:bg-yellow-300:first-line {
--tw-bg-opacity: 1;
background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
.first-line\:underline::first-line {
.first-line\:underline:first-line {
text-decoration-line: underline;
}
.marker\:text-lg *::marker {
.marker\:text-lg ::marker {
font-size: 1.125rem;
line-height: 1.75rem;
}
.marker\:text-red-500 *::marker {
color: rgb(239 68 68);
.marker\:text-red-500 ::marker {
color: #ef4444;
}
.marker\:text-lg::marker {
font-size: 1.125rem;
line-height: 1.75rem;
}
.marker\:text-red-500::marker {
color: rgb(239 68 68);
color: #ef4444;
}
.selection\:bg-blue-500 *::selection {
.selection\:bg-blue-500 ::selection {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.selection\:text-white *::selection {
.selection\:text-white ::selection {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@@ -153,84 +108,39 @@
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.backdrop\:shadow-md::backdrop {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.before\:block::before {
.before\:block:before {
content: var(--tw-content);
display: block;
}
.before\:bg-red-500::before {
.before\:bg-red-500:before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.after\:flex::after {
.after\:flex:after {
content: var(--tw-content);
display: flex;
}
.after\:uppercase::after {
.after\:uppercase:after {
content: var(--tw-content);
text-transform: uppercase;
}
.first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.last\:shadow-md:last-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.only\:shadow-md:only-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.odd\:shadow-md:nth-child(odd) {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.even\:shadow-md:nth-child(even) {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.first-of-type\:shadow-md:first-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.last-of-type\:shadow-md:last-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.only-of-type\:shadow-md:only-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.visited\:shadow-md:visited {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.first\:shadow-md:first-child,
.last\:shadow-md:last-child,
.only\:shadow-md:only-child,
.odd\:shadow-md:nth-child(2n + 1),
.even\:shadow-md:nth-child(2n),
.first-of-type\:shadow-md:first-of-type,
.last-of-type\:shadow-md:last-of-type,
.only-of-type\:shadow-md:only-of-type,
.visited\:shadow-md:visited,
.target\:shadow-md:target {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -239,86 +149,21 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.default\:shadow-md:default {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.checked\:shadow-md:checked {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.indeterminate\:shadow-md:indeterminate {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.placeholder-shown\:shadow-md:placeholder-shown {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.autofill\:shadow-md:autofill {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.optional\:shadow-md:optional {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.required\:shadow-md:required {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.valid\:shadow-md:valid {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.invalid\:shadow-md:invalid {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.in-range\:shadow-md:in-range {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.out-of-range\:shadow-md:out-of-range {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.read-only\:shadow-md:read-only {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.empty\:shadow-md:empty {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.default\:shadow-md:default,
.checked\:shadow-md:checked,
.indeterminate\:shadow-md:indeterminate,
.placeholder-shown\:shadow-md:placeholder-shown,
.autofill\:shadow-md:autofill,
.optional\:shadow-md:optional,
.required\:shadow-md:required,
.valid\:shadow-md:valid,
.invalid\:shadow-md:invalid,
.in-range\:shadow-md:in-range,
.out-of-range\:shadow-md:out-of-range,
.read-only\:shadow-md:read-only,
.empty\:shadow-md:empty,
.focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -329,10 +174,10 @@
}
}
.hover\:animate-spin:hover {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -345,98 +190,23 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.focus\:shadow-md:focus {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus\:hover\:shadow-md:hover:focus {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus-visible\:shadow-md:focus-visible {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.active\:shadow-md:active {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.enabled\:shadow-md:enabled {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.disabled\:shadow-md:disabled {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:first-child .group-first\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:last-child .group-last\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:only-child .group-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:nth-child(odd) .group-odd\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:nth-child(even) .group-even\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:first-of-type .group-first-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:last-of-type .group-last-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:only-of-type .group-only-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:visited .group-visited\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus\:shadow-md:focus,
.focus\:hover\:shadow-md:hover:focus,
.focus-visible\:shadow-md:focus-visible,
.active\:shadow-md:active,
.enabled\:shadow-md:enabled,
.disabled\:shadow-md:disabled,
.group:first-child .group-first\:shadow-md,
.group:last-child .group-last\:shadow-md,
.group:only-child .group-only\:shadow-md,
.group:nth-child(2n + 1) .group-odd\:shadow-md,
.group:nth-child(2n) .group-even\:shadow-md,
.group:first-of-type .group-first-of-type\:shadow-md,
.group:last-of-type .group-last-of-type\:shadow-md,
.group:only-of-type .group-only-of-type\:shadow-md,
.group:visited .group-visited\:shadow-md,
.group:target .group-target\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -445,103 +215,33 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.group:default .group-default\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:checked .group-checked\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:indeterminate .group-indeterminate\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:placeholder-shown .group-placeholder-shown\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:autofill .group-autofill\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:optional .group-optional\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:required .group-required\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:valid .group-valid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:invalid .group-invalid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:in-range .group-in-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:out-of-range .group-out-of-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:read-only .group-read-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:empty .group-empty\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus-within .group-focus-within\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:default .group-default\:shadow-md,
.group:checked .group-checked\:shadow-md,
.group:indeterminate .group-indeterminate\:shadow-md,
.group:placeholder-shown .group-placeholder-shown\:shadow-md,
.group:autofill .group-autofill\:shadow-md,
.group:optional .group-optional\:shadow-md,
.group:required .group-required\:shadow-md,
.group:valid .group-valid\:shadow-md,
.group:invalid .group-invalid\:shadow-md,
.group:in-range .group-in-range\:shadow-md,
.group:out-of-range .group-out-of-range\:shadow-md,
.group:read-only .group-read-only\:shadow-md,
.group:empty .group-empty\:shadow-md,
.group:focus-within .group-focus-within\:shadow-md,
.group:hover .group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group[open]:hover .group-open\:group-hover\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse));
margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse));
}
.group:focus .group-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -550,105 +250,24 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.group:focus:hover .group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus-visible .group-focus-visible\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:active .group-active\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:enabled .group-enabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled .group-disabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled:focus:hover
.group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:first-child ~ .peer-first\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:last-child ~ .peer-last\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:only-child ~ .peer-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:nth-child(odd) ~ .peer-odd\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:nth-child(even) ~ .peer-even\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:first-of-type ~ .peer-first-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:last-of-type ~ .peer-last-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:only-of-type ~ .peer-only-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:visited ~ .peer-visited\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus:hover .group-focus\:group-hover\:shadow-md,
.group:focus-visible .group-focus-visible\:shadow-md,
.group:active .group-active\:shadow-md,
.group:enabled .group-enabled\:shadow-md,
.group:disabled .group-disabled\:shadow-md,
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md,
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child,
.peer:first-child ~ .peer-first\:shadow-md,
.peer:last-child ~ .peer-last\:shadow-md,
.peer:only-child ~ .peer-only\:shadow-md,
.peer:nth-child(2n + 1) ~ .peer-odd\:shadow-md,
.peer:nth-child(2n) ~ .peer-even\:shadow-md,
.peer:first-of-type ~ .peer-first-of-type\:shadow-md,
.peer:last-of-type ~ .peer-last-of-type\:shadow-md,
.peer:only-of-type ~ .peer-only-of-type\:shadow-md,
.peer:visited ~ .peer-visited\:shadow-md,
.peer:target ~ .peer-target\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -657,159 +276,39 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.peer:default ~ .peer-default\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:checked ~ .peer-checked\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:indeterminate ~ .peer-indeterminate\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:autofill ~ .peer-autofill\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:optional ~ .peer-optional\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:required ~ .peer-required\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:valid ~ .peer-valid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:invalid ~ .peer-invalid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:in-range ~ .peer-in-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:out-of-range ~ .peer-out-of-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:read-only ~ .peer-read-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:empty ~ .peer-empty\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus-within ~ .peer-focus-within\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:hover ~ .peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus ~ .peer-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus-visible ~ .peer-focus-visible\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:active ~ .peer-active\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:enabled ~ .peer-enabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled ~ .peer-disabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
[dir='ltr'] .ltr\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:default ~ .peer-default\:shadow-md,
.peer:checked ~ .peer-checked\:shadow-md,
.peer:indeterminate ~ .peer-indeterminate\:shadow-md,
.peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md,
.peer:autofill ~ .peer-autofill\:shadow-md,
.peer:optional ~ .peer-optional\:shadow-md,
.peer:required ~ .peer-required\:shadow-md,
.peer:valid ~ .peer-valid\:shadow-md,
.peer:invalid ~ .peer-invalid\:shadow-md,
.peer:in-range ~ .peer-in-range\:shadow-md,
.peer:out-of-range ~ .peer-out-of-range\:shadow-md,
.peer:read-only ~ .peer-read-only\:shadow-md,
.peer:empty ~ .peer-empty\:shadow-md,
.peer:focus-within ~ .peer-focus-within\:shadow-md,
.peer:hover ~ .peer-hover\:shadow-md,
.peer:focus ~ .peer-focus\:shadow-md,
.peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md,
.peer:focus-visible ~ .peer-focus-visible\:shadow-md,
.peer:active ~ .peer-active\:shadow-md,
.peer:enabled ~ .peer-enabled\:shadow-md,
.peer:disabled ~ .peer-disabled\:shadow-md,
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md,
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child,
[dir='ltr'] .ltr\:shadow-md,
[dir='rtl'] .rtl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -818,7 +317,7 @@
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -837,20 +336,10 @@
background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
}
.dark .dark\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.dark .dark\:shadow-md,
.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md,
.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -862,15 +351,9 @@
}
}
@media (min-width: 640px) {
.sm\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.sm\:shadow-md,
.sm\:active\:shadow-md:active {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -878,15 +361,9 @@
}
}
@media (min-width: 768px) {
.md\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.md\:shadow-md,
.group:focus .md\:group-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -900,17 +377,11 @@
}
}
.lg\:animate-spin {
animation: spin 1s linear infinite;
}
.lg\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
animation: 1s linear infinite spin;
}
.lg\:shadow-md,
.dark .lg\:dark\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -918,13 +389,7 @@
}
}
@media (min-width: 1280px) {
.xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.xl\:shadow-md,
.dark .xl\:dark\:disabled\:shadow-md:disabled {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
@@ -934,16 +399,16 @@
}
}
@media (min-width: 1536px) {
.\32xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.\32 xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@media (prefers-reduced-motion: no-preference) {
.dark .\32xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.dark .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
tests/variants.test.css
+135 -670
View File
@@ -1,51 +1,6 @@
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--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: ;
}
:before,
:after,
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -68,7 +23,7 @@
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@@ -92,40 +47,40 @@
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.first-letter\:text-2xl::first-letter {
.first-letter\:text-2xl:first-letter {
font-size: 1.5rem;
line-height: 2rem;
}
.first-letter\:text-red-500::first-letter {
.first-letter\:text-red-500:first-letter {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.first-line\:bg-yellow-300::first-line {
.first-line\:bg-yellow-300:first-line {
--tw-bg-opacity: 1;
background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
.first-line\:underline::first-line {
.first-line\:underline:first-line {
text-decoration-line: underline;
}
.marker\:text-lg *::marker {
.marker\:text-lg ::marker {
font-size: 1.125rem;
line-height: 1.75rem;
}
.marker\:text-red-500 *::marker {
color: rgb(239 68 68);
.marker\:text-red-500 ::marker {
color: #ef4444;
}
.marker\:text-lg::marker {
font-size: 1.125rem;
line-height: 1.75rem;
}
.marker\:text-red-500::marker {
color: rgb(239 68 68);
color: #ef4444;
}
.selection\:bg-blue-500 *::selection {
.selection\:bg-blue-500 ::selection {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.selection\:text-white *::selection {
.selection\:text-white ::selection {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@@ -153,84 +108,39 @@
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.backdrop\:shadow-md::backdrop {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.before\:block::before {
.before\:block:before {
content: var(--tw-content);
display: block;
}
.before\:bg-red-500::before {
.before\:bg-red-500:before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.after\:flex::after {
.after\:flex:after {
content: var(--tw-content);
display: flex;
}
.after\:uppercase::after {
.after\:uppercase:after {
content: var(--tw-content);
text-transform: uppercase;
}
.first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.last\:shadow-md:last-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.only\:shadow-md:only-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.odd\:shadow-md:nth-child(odd) {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.even\:shadow-md:nth-child(even) {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.first-of-type\:shadow-md:first-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.last-of-type\:shadow-md:last-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.only-of-type\:shadow-md:only-of-type {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.visited\:shadow-md:visited {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.first\:shadow-md:first-child,
.last\:shadow-md:last-child,
.only\:shadow-md:only-child,
.odd\:shadow-md:nth-child(2n + 1),
.even\:shadow-md:nth-child(2n),
.first-of-type\:shadow-md:first-of-type,
.last-of-type\:shadow-md:last-of-type,
.only-of-type\:shadow-md:only-of-type,
.visited\:shadow-md:visited,
.target\:shadow-md:target {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -239,86 +149,21 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.default\:shadow-md:default {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.checked\:shadow-md:checked {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.indeterminate\:shadow-md:indeterminate {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.placeholder-shown\:shadow-md:placeholder-shown {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.autofill\:shadow-md:autofill {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.optional\:shadow-md:optional {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.required\:shadow-md:required {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.valid\:shadow-md:valid {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.invalid\:shadow-md:invalid {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.in-range\:shadow-md:in-range {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.out-of-range\:shadow-md:out-of-range {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.read-only\:shadow-md:read-only {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.empty\:shadow-md:empty {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.default\:shadow-md:default,
.checked\:shadow-md:checked,
.indeterminate\:shadow-md:indeterminate,
.placeholder-shown\:shadow-md:placeholder-shown,
.autofill\:shadow-md:autofill,
.optional\:shadow-md:optional,
.required\:shadow-md:required,
.valid\:shadow-md:valid,
.invalid\:shadow-md:invalid,
.in-range\:shadow-md:in-range,
.out-of-range\:shadow-md:out-of-range,
.read-only\:shadow-md:read-only,
.empty\:shadow-md:empty,
.focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -329,10 +174,10 @@
}
}
.hover\:animate-spin:hover {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -345,98 +190,23 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.focus\:shadow-md:focus {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus\:hover\:shadow-md:hover:focus {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus-visible\:shadow-md:focus-visible {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.active\:shadow-md:active {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.enabled\:shadow-md:enabled {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.disabled\:shadow-md:disabled {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:first-child .group-first\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:last-child .group-last\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:only-child .group-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:nth-child(odd) .group-odd\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:nth-child(even) .group-even\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:first-of-type .group-first-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:last-of-type .group-last-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:only-of-type .group-only-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:visited .group-visited\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus\:shadow-md:focus,
.focus\:hover\:shadow-md:hover:focus,
.focus-visible\:shadow-md:focus-visible,
.active\:shadow-md:active,
.enabled\:shadow-md:enabled,
.disabled\:shadow-md:disabled,
.group:first-child .group-first\:shadow-md,
.group:last-child .group-last\:shadow-md,
.group:only-child .group-only\:shadow-md,
.group:nth-child(2n + 1) .group-odd\:shadow-md,
.group:nth-child(2n) .group-even\:shadow-md,
.group:first-of-type .group-first-of-type\:shadow-md,
.group:last-of-type .group-last-of-type\:shadow-md,
.group:only-of-type .group-only-of-type\:shadow-md,
.group:visited .group-visited\:shadow-md,
.group:target .group-target\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -445,92 +215,22 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.group:default .group-default\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:checked .group-checked\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:indeterminate .group-indeterminate\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:placeholder-shown .group-placeholder-shown\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:autofill .group-autofill\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:optional .group-optional\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:required .group-required\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:valid .group-valid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:invalid .group-invalid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:in-range .group-in-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:out-of-range .group-out-of-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:read-only .group-read-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:empty .group-empty\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus-within .group-focus-within\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:default .group-default\:shadow-md,
.group:checked .group-checked\:shadow-md,
.group:indeterminate .group-indeterminate\:shadow-md,
.group:placeholder-shown .group-placeholder-shown\:shadow-md,
.group:autofill .group-autofill\:shadow-md,
.group:optional .group-optional\:shadow-md,
.group:required .group-required\:shadow-md,
.group:valid .group-valid\:shadow-md,
.group:invalid .group-invalid\:shadow-md,
.group:in-range .group-in-range\:shadow-md,
.group:out-of-range .group-out-of-range\:shadow-md,
.group:read-only .group-read-only\:shadow-md,
.group:empty .group-empty\:shadow-md,
.group:focus-within .group-focus-within\:shadow-md,
.group:hover .group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -541,7 +241,7 @@
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.group:focus .group-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -550,105 +250,24 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.group:focus:hover .group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus-visible .group-focus-visible\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:active .group-active\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:enabled .group-enabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled .group-disabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled:focus:hover
.group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:first-child ~ .peer-first\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:last-child ~ .peer-last\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:only-child ~ .peer-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:nth-child(odd) ~ .peer-odd\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:nth-child(even) ~ .peer-even\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:first-of-type ~ .peer-first-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:last-of-type ~ .peer-last-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:only-of-type ~ .peer-only-of-type\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:visited ~ .peer-visited\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:focus:hover .group-focus\:group-hover\:shadow-md,
.group:focus-visible .group-focus-visible\:shadow-md,
.group:active .group-active\:shadow-md,
.group:enabled .group-enabled\:shadow-md,
.group:disabled .group-disabled\:shadow-md,
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md,
.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child,
.peer:first-child ~ .peer-first\:shadow-md,
.peer:last-child ~ .peer-last\:shadow-md,
.peer:only-child ~ .peer-only\:shadow-md,
.peer:nth-child(2n + 1) ~ .peer-odd\:shadow-md,
.peer:nth-child(2n) ~ .peer-even\:shadow-md,
.peer:first-of-type ~ .peer-first-of-type\:shadow-md,
.peer:last-of-type ~ .peer-last-of-type\:shadow-md,
.peer:only-of-type ~ .peer-only-of-type\:shadow-md,
.peer:visited ~ .peer-visited\:shadow-md,
.peer:target ~ .peer-target\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -657,159 +276,39 @@
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.peer:default ~ .peer-default\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:checked ~ .peer-checked\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:indeterminate ~ .peer-indeterminate\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:autofill ~ .peer-autofill\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:optional ~ .peer-optional\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:required ~ .peer-required\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:valid ~ .peer-valid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:invalid ~ .peer-invalid\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:in-range ~ .peer-in-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:out-of-range ~ .peer-out-of-range\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:read-only ~ .peer-read-only\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:empty ~ .peer-empty\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus-within ~ .peer-focus-within\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:hover ~ .peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus ~ .peer-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:focus-visible ~ .peer-focus-visible\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:active ~ .peer-active\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:enabled ~ .peer-enabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled ~ .peer-disabled\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
[dir='ltr'] .ltr\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:default ~ .peer-default\:shadow-md,
.peer:checked ~ .peer-checked\:shadow-md,
.peer:indeterminate ~ .peer-indeterminate\:shadow-md,
.peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md,
.peer:autofill ~ .peer-autofill\:shadow-md,
.peer:optional ~ .peer-optional\:shadow-md,
.peer:required ~ .peer-required\:shadow-md,
.peer:valid ~ .peer-valid\:shadow-md,
.peer:invalid ~ .peer-invalid\:shadow-md,
.peer:in-range ~ .peer-in-range\:shadow-md,
.peer:out-of-range ~ .peer-out-of-range\:shadow-md,
.peer:read-only ~ .peer-read-only\:shadow-md,
.peer:empty ~ .peer-empty\:shadow-md,
.peer:focus-within ~ .peer-focus-within\:shadow-md,
.peer:hover ~ .peer-hover\:shadow-md,
.peer:focus ~ .peer-focus\:shadow-md,
.peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md,
.peer:focus-visible ~ .peer-focus-visible\:shadow-md,
.peer:active ~ .peer-active\:shadow-md,
.peer:enabled ~ .peer-enabled\:shadow-md,
.peer:disabled ~ .peer-disabled\:shadow-md,
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md,
.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child,
[dir='ltr'] .ltr\:shadow-md,
[dir='rtl'] .rtl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -818,7 +317,7 @@
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -837,20 +336,10 @@
background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
}
.dark .dark\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.dark .dark\:shadow-md,
.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md,
.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
@@ -862,15 +351,9 @@
}
}
@media (min-width: 640px) {
.sm\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.sm\:shadow-md,
.sm\:active\:shadow-md:active {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -878,15 +361,9 @@
}
}
@media (min-width: 768px) {
.md\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.md\:shadow-md,
.group:focus .md\:group-focus\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -900,17 +377,11 @@
}
}
.lg\:animate-spin {
animation: spin 1s linear infinite;
}
.lg\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
animation: 1s linear infinite spin;
}
.lg\:shadow-md,
.dark .lg\:dark\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -918,13 +389,7 @@
}
}
@media (min-width: 1280px) {
.xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.xl\:shadow-md,
.dark .xl\:dark\:disabled\:shadow-md:disabled {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
@@ -934,16 +399,16 @@
}
}
@media (min-width: 1536px) {
.\32xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.\32 xl\:shadow-md {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@media (prefers-reduced-motion: no-preference) {
.dark .\32xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.dark .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
tests/variants.test.js
+60 -170
View File
@@ -100,10 +100,7 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
:where(.hover\:prose-headings\:text-center) :is(h1, h2, h3, h4):hover {
text-align: center;
}
:where(.hover\:prose-headings\:text-center) :is(h1, h2, h3, h4):hover,
:where(.prose-headings\:hover\:text-center:hover) :is(h1, h2, h3, h4) {
text-align: center;
}
@@ -130,10 +127,7 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.group:hover :where(.group-hover\:prose-headings\:text-center) :is(h1, h2, h3, h4) {
text-align: center;
}
.group:hover :where(.group-hover\:prose-headings\:text-center) :is(h1, h2, h3, h4),
:where(.group:hover .prose-headings\:group-hover\:text-center) :is(h1, h2, h3, h4) {
text-align: center;
}
@@ -163,9 +157,7 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media screen {
.screen\:parent .child {
foo: bar;
}
.screen\:parent .child,
.parent .screen\:child {
foo: bar;
}
@@ -204,7 +196,6 @@ crosscheck(({ stable, oxide }) => {
.test:where(.one, .two, .three) {
font-style: italic;
}
.my-variant\:underline:where(.one, .two, .three) {
text-decoration-line: underline;
}
@@ -296,51 +287,30 @@ crosscheck(({ stable, oxide }) => {
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
transform: translateY(-25%);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
transform: none;
}
}
.hover\:animate-bounce:hover {
animation: bounce 1s infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
animation: 1s infinite bounce;
}
.hover\:animate-spin:hover {
animation: spin 1s linear infinite;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
animation: 1s linear infinite spin;
}
.focus\:animate-bounce:focus {
animation: bounce 1s infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
animation: 1s infinite bounce;
}
.focus\:animate-spin:focus {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
`)
})
@@ -412,12 +382,8 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.before\:hover\:text-center:hover::before {
content: var(--tw-content);
text-align: center;
}
.hover\:before\:text-center:hover::before {
.before\:hover\:text-center:hover:before,
.hover\:before\:text-center:hover:before {
content: var(--tw-content);
text-align: center;
}
@@ -444,12 +410,8 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
:where(.before\:prose-headings\:text-center) :is(h1, h2, h3, h4)::before {
content: var(--tw-content);
text-align: center;
}
:where(.prose-headings\:before\:text-center) :is(h1, h2, h3, h4)::before {
:where(.before\:prose-headings\:text-center) :is(h1, h2, h3, h4):before,
:where(.prose-headings\:before\:text-center) :is(h1, h2, h3, h4):before {
content: var(--tw-content);
text-align: center;
}
@@ -497,9 +459,7 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.peer[aria-expanded='true'] ~ .peer-aria-expanded\:text-center {
text-align: center;
}
.peer[aria-expanded='true'] ~ .peer-aria-expanded\:text-center,
.peer[aria-expanded='false'] ~ .peer-aria-expanded-2\:text-center {
text-align: center;
}
@@ -642,13 +602,13 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.visited\:border-red-500:visited {
border-color: rgb(239 68 68);
border-color: #ef4444;
}
.visited\:bg-red-500:visited {
background-color: rgb(239 68 68);
background-color: #ef4444;
}
.visited\:text-red-500:visited {
color: rgb(239 68 68);
color: #ef4444;
}
`)
})
@@ -671,8 +631,6 @@ crosscheck(({ stable, oxide }) => {
return run(result, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
a {
}
${defaults}
.underline {
text-decoration-line: underline;
@@ -682,8 +640,6 @@ crosscheck(({ stable, oxide }) => {
text-decoration-line: underline;
}
}
b {
}
`)
})
})
@@ -713,10 +669,7 @@ crosscheck(({ stable, oxide }) => {
return expect(result.css).toMatchFormattedCss(css`
@media (min-width: 640px) {
.sm\:base1 .foo,
.sm\:base1 .bar {
color: red;
}
.sm\:base1 .bar,
.sm\:base2 .bar .base2-foo {
color: red;
}
@@ -838,14 +791,9 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (hover: hover) and (pointer: fine) {
.hover\:underline:hover {
text-decoration-line: underline;
}
.group:hover .group-hover\:underline {
text-decoration-line: underline;
}
.hover\:underline:hover,
.group:hover .group-hover\:underline,
.peer:hover ~ .peer-hover\:underline {
text-decoration-line: underline;
}
@@ -891,81 +839,32 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.after\:foo.bar.baz::after {
.after\:foo.bar.baz:after,
.after\:bar.foo.baz:after,
.after\:baz.foo.bar:after,
.after\:foo1 .bar1 .baz1:after,
.foo1 .after\:bar1 .baz1:after,
.foo1 .bar1 .after\:baz1:after {
content: var(--tw-content);
color: red;
}
.after\:bar.foo.baz::after {
content: var(--tw-content);
color: red;
}
.after\:baz.foo.bar::after {
content: var(--tw-content);
color: red;
}
.after\:foo1 .bar1 .baz1::after {
content: var(--tw-content);
color: red;
}
.foo1 .after\:bar1 .baz1::after {
content: var(--tw-content);
color: red;
}
.foo1 .bar1 .after\:baz1::after {
content: var(--tw-content);
color: red;
}
.hover\:foo:hover.bar.baz {
color: red;
}
.hover\:bar:hover.foo.baz {
color: red;
}
.hover\:baz:hover.foo.bar {
color: red;
}
.hover\:foo1:hover .bar1 .baz1 {
color: red;
}
.foo1 .hover\:bar1:hover .baz1 {
color: red;
}
.foo1 .bar1 .hover\:baz1:hover {
color: red;
}
.group:hover .group-hover\:foo.bar.baz {
color: red;
}
.group:hover .group-hover\:bar.foo.baz {
color: red;
}
.group:hover .group-hover\:baz.foo.bar {
color: red;
}
.group:hover .group-hover\:foo1 .bar1 .baz1 {
color: red;
}
.foo1 .group:hover .group-hover\:bar1 .baz1 {
color: red;
}
.foo1 .bar1 .group:hover .group-hover\:baz1 {
color: red;
}
.peer:checked ~ .peer-checked\:foo.bar.baz {
color: red;
}
.peer:checked ~ .peer-checked\:bar.foo.baz {
color: red;
}
.peer:checked ~ .peer-checked\:baz.foo.bar {
color: red;
}
.peer:checked ~ .peer-checked\:foo1 .bar1 .baz1 {
color: red;
}
.foo1 .peer:checked ~ .peer-checked\:bar1 .baz1 {
color: red;
}
.hover\:foo:hover.bar.baz,
.hover\:bar:hover.foo.baz,
.hover\:baz:hover.foo.bar,
.hover\:foo1:hover .bar1 .baz1,
.foo1 .hover\:bar1:hover .baz1,
.foo1 .bar1 .hover\:baz1:hover,
.group:hover .group-hover\:foo.bar.baz,
.group:hover .group-hover\:bar.foo.baz,
.group:hover .group-hover\:baz.foo.bar,
.group:hover .group-hover\:foo1 .bar1 .baz1,
.foo1 .group:hover .group-hover\:bar1 .baz1,
.foo1 .bar1 .group:hover .group-hover\:baz1,
.peer:checked ~ .peer-checked\:foo.bar.baz,
.peer:checked ~ .peer-checked\:bar.foo.baz,
.peer:checked ~ .peer-checked\:baz.foo.bar,
.peer:checked ~ .peer-checked\:foo1 .bar1 .baz1,
.foo1 .peer:checked ~ .peer-checked\:bar1 .baz1,
.foo1 .bar1 .peer:checked ~ .peer-checked\:baz1 {
color: red;
}
@@ -989,7 +888,7 @@ crosscheck(({ stable, oxide }) => {
:where(.foo) {
color: red;
}
:matches(.foo, .bar, .baz) {
:is(.foo, .bar, .baz) {
color: orange;
}
:is(.foo) {
@@ -1006,30 +905,25 @@ crosscheck(({ stable, oxide }) => {
:where(.foo) {
color: red;
}
:matches(.foo, .bar, .baz) {
:is(.foo, .bar, .baz) {
color: orange;
}
:is(.foo) {
color: yellow;
.foo {
color: #ff0;
}
html:has(.foo) {
color: green;
}
:where(.hover\:foo:hover) {
color: red;
}
:matches(.hover\:foo:hover, .bar, .baz) {
:is(.hover\:foo:hover, .bar, .baz),
:is(.foo, .hover\:bar:hover, .baz),
:is(.foo, .bar, .hover\:baz:hover) {
color: orange;
}
:matches(.foo, .hover\:bar:hover, .baz) {
color: orange;
}
:matches(.foo, .bar, .hover\:baz:hover) {
color: orange;
}
:is(.hover\:foo:hover) {
color: yellow;
.hover\:foo:hover {
color: #ff0;
}
html:has(.hover\:foo:hover) {
color: green;
@@ -1038,17 +932,13 @@ crosscheck(({ stable, oxide }) => {
:where(.sm\:foo) {
color: red;
}
:matches(.sm\:foo, .bar, .baz) {
:is(.sm\:foo, .bar, .baz),
:is(.foo, .sm\:bar, .baz),
:is(.foo, .bar, .sm\:baz) {
color: orange;
}
:matches(.foo, .sm\:bar, .baz) {
color: orange;
}
:matches(.foo, .bar, .sm\:baz) {
color: orange;
}
:is(.sm\:foo) {
color: yellow;
.sm\:foo {
color: #ff0;
}
html:has(.sm\:foo) {
color: green;
@@ -1118,7 +1008,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-aspect-ratio: 1/10) {
@media (min-aspect-ratio: 1 / 10) {
.ar-1\/10\:text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -1155,7 +1045,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-aspect-ratio: 1/10) and (foo: 20) {
@media (min-aspect-ratio: 1 / 10) and (foo: 20) {
.ar-1\/10\/20\:text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));