diff --git a/jest/customMatchers.js b/jest/customMatchers.js index 1ea532f0c..8c8d81e60 100644 --- a/jest/customMatchers.js +++ b/jest/customMatchers.js @@ -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, diff --git a/tests/animations.test.js b/tests/animations.test.js index 53bb2a8ab..958f24252 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -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; } `) }) diff --git a/tests/any-type.test.js b/tests/any-type.test.js index 0ba5dac52..add8a1795 100644 --- a/tests/any-type.test.js +++ b/tests/any-type.test.js @@ -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); diff --git a/tests/apply.test.js b/tests/apply.test.js index 77aafaecf..a90bdf23c 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -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)); diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index 216cc7f98..ce52c1bc7 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -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; } diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css index 326149b90..acd68ee33 100644 --- a/tests/arbitrary-values.oxide.test.css +++ b/tests/arbitrary-values.oxide.test.css @@ -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; } } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index e446fcab3..3c357c605 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -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; } } diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index c08b2241c..183fcf57c 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -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); } `) diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 1b7c08290..8bc02a582 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -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; } diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 17e112260..2f0367c23 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -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); diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index b76f91734..9484dfdd6 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -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); diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index b64878032..9ec0e5917 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -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; } diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js index 6cc817de8..5033d27a3 100644 --- a/tests/collapse-adjacent-rules.test.js +++ b/tests/collapse-adjacent-rules.test.js @@ -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'; `) }) }) diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js index 629f35639..128eb9bef 100644 --- a/tests/collapse-duplicate-declarations.test.js +++ b/tests/collapse-duplicate-declarations.test.js @@ -138,7 +138,7 @@ crosscheck(() => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .example { - color: blue; + color: #00f; height: var(--value); } `) diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index 127e5c7b3..435511aff 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -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); } `) diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index 263be2c72..51aa0a8ce 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -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; } `) }) diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index d92fb5384..428a807d0 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -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 { diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js index 942138205..4ead43fd4 100644 --- a/tests/context-reuse.test.js +++ b/tests/context-reuse.test.js @@ -125,7 +125,7 @@ crosscheck(({ stable, oxide }) => { expect(result.css).toMatchFormattedCss(css` .only\:custom-utility:only-child { - color: blue; + color: #00f; } `) }) diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 29ff0a340..d91843199 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -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; } `) }) diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 324f6b9ae..7c5a9ead2 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -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; } `) }) diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index dc9086b32..2a1cbf43d 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -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; diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index 8586921b8..82aa9b7da 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -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; } `) }) diff --git a/tests/experimental.test.js b/tests/experimental.test.js index 824c718d1..5fb57d10c 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -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), diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index 48fa4e894..a7524e1f8 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -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; diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index bd0b1b11b..cfa094342 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -123,7 +123,7 @@ crosscheck(() => { } } #app .animate-spin { - animation: spin 1s linear infinite; + animation: 1s linear infinite spin; } #app .font-bold { font-weight: 700; diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 45a3fd2a3..c8dd5c339 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -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; diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index a894d22e9..db98bbeb5 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -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; diff --git a/tests/layer-without-tailwind.test.js b/tests/layer-without-tailwind.test.js index 2e1e4dd82..f15d43351 100644 --- a/tests/layer-without-tailwind.test.js +++ b/tests/layer-without-tailwind.test.js @@ -72,7 +72,7 @@ crosscheck(() => { expect(result.css).toMatchFormattedCss(css` @layer custom { .foo { - color: black; + color: #000; } } `) diff --git a/tests/match-components.test.js b/tests/match-components.test.js index f1801857d..a8b546127 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -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; diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js index 41e7ca509..8b1f95429 100644 --- a/tests/match-variants.test.js +++ b/tests/match-variants.test.js @@ -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; diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index af4196397..c799bb54e 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -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; } diff --git a/tests/normalize-config.test.js b/tests/normalize-config.test.js index 6edb6f626..ac9892c8c 100644 --- a/tests/normalize-config.test.js +++ b/tests/normalize-config.test.js @@ -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; } diff --git a/tests/opacity.test.js b/tests/opacity.test.js index f31981a43..80fba7ee6 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -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)); diff --git a/tests/oxide.test.js b/tests/oxide.test.js index c676a9f72..d2a697626 100644 --- a/tests/oxide.test.js +++ b/tests/oxide.test.js @@ -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)); } `) }) diff --git a/tests/parallel-variants.test.js b/tests/parallel-variants.test.js index 3d439f746..02e2776b5 100644 --- a/tests/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -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; } `) }) diff --git a/tests/parseObjectStyles.test.js b/tests/parseObjectStyles.test.js index 24590b21d..c6121977f 100644 --- a/tests/parseObjectStyles.test.js +++ b/tests/parseObjectStyles.test.js @@ -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; } `) }) diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 72729935f..314233bea 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -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; } diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js index 69c79b267..fb025720a 100644 --- a/tests/plugins/fontFamily.test.js +++ b/tests/plugins/fontFamily.test.js @@ -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; } `) }) diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 745115ec6..08e88bb76 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -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; diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index c44678007..cf9fbd6e4 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -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; diff --git a/tests/postcss-plugins/nesting/index.test.js b/tests/postcss-plugins/nesting/index.test.js index 667ac851f..fe942a284 100644 --- a/tests/postcss-plugins/nesting/index.test.js +++ b/tests/postcss-plugins/nesting/index.test.js @@ -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() diff --git a/tests/prefers-contrast.test.js b/tests/prefers-contrast.test.js index 8e1ecd25c..1d658437e 100644 --- a/tests/prefers-contrast.test.js +++ b/tests/prefers-contrast.test.js @@ -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; diff --git a/tests/prefix.test.js b/tests/prefix.test.js index bfb4bbf2c..e0139ad9a 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -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); } diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css index b8ea67813..b0543f37f 100644 --- a/tests/raw-content.oxide.test.css +++ b/tests/raw-content.oxide.test.css @@ -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); diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 9fcfa730d..402f90a34 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -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); diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 56a423587..5c7e0738e 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -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); } `) diff --git a/tests/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js index a825dc333..9d9ed5d85 100644 --- a/tests/responsive-and-variants-atrules.test.js +++ b/tests/responsive-and-variants-atrules.test.js @@ -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; diff --git a/tests/safelist.test.js b/tests/safelist.test.js index a8404e634..07e9fe406 100644 --- a/tests/safelist.test.js +++ b/tests/safelist.test.js @@ -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; diff --git a/tests/screenAtRule.test.js b/tests/screenAtRule.test.js index 8bda65c94..42ed22e0b 100644 --- a/tests/screenAtRule.test.js +++ b/tests/screenAtRule.test.js @@ -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) }) }) diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index eddeb69eb..f968fd0e3 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -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; } `) }) diff --git a/tests/util/defaults.js b/tests/util/defaults.js index bc65e2e8e..cc8d5b513 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -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; diff --git a/tests/variant-grouping.test.skip.js b/tests/variant-grouping.test.skip.js index 6abdfb6c8..aba113783 100644 --- a/tests/variant-grouping.test.skip.js +++ b/tests/variant-grouping.test.skip.js @@ -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)); diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css index 1a213ae4e..a00e42f2f 100644 --- a/tests/variants.oxide.test.css +++ b/tests/variants.oxide.test.css @@ -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), diff --git a/tests/variants.test.css b/tests/variants.test.css index c5e15501f..7d0120d12 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -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), diff --git a/tests/variants.test.js b/tests/variants.test.js index 87d0ecbd9..f37897d80 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -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));