diff --git a/CHANGELOG.md b/CHANGELOG.md index d7ea9ab443ef..ae682f777620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748)) - Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299)) +- Improve relative precedence of `rtl`, `ltr`, `forced-colors`, and `dark` variants ([#12584](https://github.com/tailwindlabs/tailwindcss/pull/12584)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index a0687ab675e4..a04dce82e3bd 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -207,8 +207,8 @@ export let variantPlugins = { }, directionVariants: ({ addVariant }) => { - addVariant('ltr', ':is([dir="ltr"] &)') - addVariant('rtl', ':is([dir="rtl"] &)') + addVariant('ltr', ':is(:where([dir="ltr"]) &)') + addVariant('rtl', ':is(:where([dir="rtl"]) &)') }, reducedMotionVariants: ({ addVariant }) => { @@ -229,7 +229,7 @@ export let variantPlugins = { } if (mode === 'class') { - addVariant('dark', `:is(${className} &)`) + addVariant('dark', `:is(:where(${className}) &)`) } else if (mode === 'media') { addVariant('dark', '@media (prefers-color-scheme: dark)') } diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index d3cde4488fa0..91d5f66bfc8e 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -765,14 +765,14 @@ function resolvePlugins(context, root) { ] let afterVariants = [ variantPlugins['supportsVariants'], - variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], - variantPlugins['darkVariants'], - variantPlugins['forcedColorsVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], + variantPlugins['directionVariants'], + variantPlugins['darkVariants'], + variantPlugins['forcedColorsVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/tests/apply.test.js b/tests/apply.test.js index 141d5dab912f..fe2b572496ba 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -216,14 +216,14 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: center; } - :is(.dark .apply-dark-variant:hover) { + :is(:where(.dark) .apply-dark-variant:hover) { text-align: right; } @media (min-width: 1024px) { - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: left; } } @@ -513,14 +513,14 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: center; } - :is(.dark .apply-dark-variant:hover) { + :is(:where(.dark) .apply-dark-variant:hover) { text-align: right; } @media (min-width: 1024px) { - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: left; } } @@ -2404,18 +2404,18 @@ crosscheck(({ stable, oxide }) => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - :is(.dark .foo)::before, - :is([dir='rtl'] :is(.dark .bar))::before, - :is([dir='rtl'] :is(.dark .baz:hover))::before { + :is(:where(.dark) .foo)::before, + :is(:where([dir='rtl']) :is(:where(.dark) .bar))::before, + :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover))::before { background-color: #000; } - :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover { + :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover { background-color: #000; } - :is([dir='rtl'] :is(.dark .steve):hover):before { + :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before { background-color: #000; } - :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover { + :is(:where([dir='rtl']) :is(:where(.dark) .bob))::file-selector-button:hover { background-color: #000; } :has([dir='rtl'] .foo:hover):before { diff --git a/tests/custom-separator.test.js b/tests/custom-separator.test.js index adc1d55afd65..6546f4ed2c63 100644 --- a/tests/custom-separator.test.js +++ b/tests/custom-separator.test.js @@ -23,22 +23,22 @@ crosscheck(() => { .group:hover .group-hover_focus-within_text-left:focus-within { text-align: left; } - :is([dir='rtl'] .rtl_active_text-center:active) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { .motion-safe_hover_text-center:hover { text-align: center; } } - :is(.dark .dark_focus_text-left:focus) { - text-align: left; - } @media (min-width: 768px) { .md_hover_text-right:hover { text-align: right; } } + :is(:where([dir='rtl']) .rtl_active_text-center:active) { + text-align: center; + } + :is(:where(.dark) .dark_focus_text-left:focus) { + text-align: left; + } `) }) }) diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index ce06496b2124..9845e0fdfe61 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -17,7 +17,7 @@ crosscheck(() => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - :is(.dark .dark\:font-bold) { + :is(:where(.dark) .dark\:font-bold) { font-weight: 700; } `) @@ -40,7 +40,7 @@ crosscheck(() => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - :is(.test-dark .dark\:font-bold) { + :is(:where(.test-dark) .dark\:font-bold) { font-weight: 700; } `) diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js index c94fb95f615c..ea0b92741d13 100644 --- a/tests/format-variant-selector.test.js +++ b/tests/format-variant-selector.test.js @@ -348,8 +348,8 @@ crosscheck(() => { ${'.parent::before &:hover'} | ${'.parent &:hover::before'} ${':where(&::before) :is(h1, h2, h3, h4)'} | ${':where(&) :is(h1, h2, h3, h4)::before'} ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} - ${'#app :is(.dark &::before)'} | ${'#app :is(.dark &)::before'} - ${'#app :is(:is(.dark &)::before)'} | ${'#app :is(:is(.dark &))::before'} + ${'#app :is(:where(.dark) &::before)'} | ${'#app :is(:where(.dark) &)::before'} + ${'#app :is(:is(:where(.dark) &)::before)'} | ${'#app :is(:is(:where(.dark) &))::before'} ${'#app :is(.foo::file-selector-button)'} | ${'#app :is(.foo)::file-selector-button'} ${'#app :is(.foo::-webkit-progress-bar)'} | ${'#app :is(.foo)::-webkit-progress-bar'} ${'.parent::marker li'} | ${'.parent li::marker'} diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index 895ca053c901..6b028736c441 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -138,22 +138,22 @@ crosscheck(() => { .group:hover .group-hover\:focus-within\:text-left:focus-within { text-align: left !important; } - :is([dir='rtl'] .rtl\:active\:text-center:active) { - text-align: center !important; - } @media (prefers-reduced-motion: no-preference) { .motion-safe\:hover\:text-center:hover { text-align: center !important; } } - :is(.dark .dark\:focus\:text-left:focus) { - text-align: left !important; - } @media (min-width: 768px) { .md\:hover\:text-right:hover { text-align: right !important; } } + :is(:where([dir='rtl']) .rtl\:active\:text-center:active) { + text-align: center !important; + } + :is(:where(.dark) .dark\:focus\:text-left:focus) { + text-align: left !important; + } `) }) }) diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index 22edafb94dd1..24533f02f34d 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -136,29 +136,29 @@ crosscheck(({ stable, oxide }) => { #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) { text-align: left; } - #app :is(:is([dir='rtl'] .rtl\:active\:text-center:active)) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { #app :is(.motion-safe\:hover\:text-center:hover) { text-align: center; } } - #app :is(.dark .dark\:before\:underline):before { - content: var(--tw-content); - text-decoration-line: underline; - } - #app :is(:is(.dark .dark\:focus\:text-left:focus)) { - text-align: left; - } @media (min-width: 768px) { #app :is(.md\:hover\:text-right:hover) { text-align: right; } } + #app :is(:is(:where([dir='rtl']) .rtl\:active\:text-center:active)) { + text-align: center; + } + #app :is(:where(.dark) .dark\:before\:underline):before { + content: var(--tw-content); + text-decoration-line: underline; + } + #app :is(:is(:where(.dark) .dark\:focus\:text-left:focus)) { + text-align: left; + } #app :is( - [dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) + :where([dir='rtl']) :is(:where(.dark) .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) )::file-selector-button:hover { background-color: #000; } @@ -187,7 +187,7 @@ crosscheck(({ stable, oxide }) => { return run(input, config).then((result) => { stable.expect(result.css).toMatchFormattedCss(css` ${defaults} - #app :is(.dark .dark\:before\:bg-black)::before { + #app :is(:where(.dark) .dark\:before\:bg-black)::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -195,7 +195,7 @@ crosscheck(({ stable, oxide }) => { `) oxide.expect(result.css).toMatchFormattedCss(css` ${defaults} - #app :is(.dark .dark\:before\:bg-black)::before { + #app :is(:where(.dark) .dark\:before\:bg-black)::before { content: var(--tw-content); background-color: #000; } diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 5923de27eb98..44665ffab4a6 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -305,7 +305,7 @@ crosscheck(({ stable, oxide }) => { } .drop-empty-rules:hover, .group:hover .apply-group, - :is(.dark .apply-dark-mode) { + :is(:where(.dark) .apply-dark-mode) { font-weight: 700; } .apply-with-existing:hover { @@ -340,7 +340,7 @@ crosscheck(({ stable, oxide }) => { .apply-order-b { margin: 1.5rem 1.25rem 1.25rem; } - :is(.dark .group:hover .apply-dark-group-example-a) { + :is(:where(.dark) .group:hover .apply-dark-group-example-a) { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } @@ -741,9 +741,6 @@ crosscheck(({ stable, oxide }) => { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } - :is(.dark .dark\:custom-util) { - background: #abcdef; - } @media (min-width: 640px) { .sm\:text-center { text-align: center; @@ -788,9 +785,6 @@ crosscheck(({ stable, oxide }) => { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { - background: #abcdef !important; - } } @media (min-width: 640px) { .md\:sm\:text-center { @@ -808,6 +802,16 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } + :is(:where(.dark) .dark\:custom-util) { + background: #abcdef; + } + @media (min-width: 768px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { + background: #abcdef !important; + } + } + } `) oxide.expect(result.css).toMatchFormattedCss(css` .theme-test { @@ -874,7 +878,7 @@ crosscheck(({ stable, oxide }) => { } .drop-empty-rules:hover, .group:hover .apply-group, - :is(.dark .apply-dark-mode) { + :is(:where(.dark) .apply-dark-mode) { font-weight: 700; } .apply-with-existing:hover { @@ -908,7 +912,7 @@ crosscheck(({ stable, oxide }) => { .apply-order-b { margin: 1.5rem 1.25rem 1.25rem; } - :is(.dark .group:hover .apply-dark-group-example-a) { + :is(:where(.dark) .group:hover .apply-dark-group-example-a) { background-color: #22c55e; } @media (min-width: 640px) { @@ -1299,9 +1303,6 @@ crosscheck(({ stable, oxide }) => { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } - :is(.dark .dark\:custom-util) { - background: #abcdef; - } @media (min-width: 640px) { .sm\:text-center { text-align: center; @@ -1346,9 +1347,6 @@ crosscheck(({ stable, oxide }) => { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { - background: #abcdef !important; - } } @media (min-width: 640px) { .md\:sm\:text-center { @@ -1366,6 +1364,15 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } + :is(:where(.dark) .dark\:custom-util) { + background: #abcdef; + } + @media (min-width: 768px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { + background: #abcdef !important; + } + } `) }) }) diff --git a/tests/prefix.test.js b/tests/prefix.test.js index cf5085509d7a..a1fb6733ebc8 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -128,7 +128,7 @@ crosscheck(({ stable, oxide }) => { .custom-component { font-weight: 700; } - :is(.tw-dark .tw-group:hover .custom-component) { + :is(:where(.tw-dark) .tw-group:hover .custom-component) { font-weight: 400; } .tw--ml-4 { @@ -155,21 +155,11 @@ crosscheck(({ stable, oxide }) => { .tw-group:hover .group-hover\:focus-within\:tw-text-left:focus-within { text-align: left; } - :is([dir='rtl'] .rtl\:active\:tw-text-center:active) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { .motion-safe\:hover\:tw-text-center:hover { text-align: center; } } - :is(.tw-dark .dark\:tw-bg-\[rgb\(255\,0\,0\)\]) { - --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); - } - :is(.tw-dark .dark\:focus\:tw-text-left:focus) { - text-align: left; - } @media (min-width: 768px) { .md\:tw--ml-5 { margin-left: -1.25rem; @@ -181,6 +171,16 @@ crosscheck(({ stable, oxide }) => { text-align: right; } } + :is(:where([dir='rtl']) .rtl\:active\:tw-text-center:active) { + text-align: center; + } + :is(:where(.tw-dark) .dark\:tw-bg-\[rgb\(255\,0\,0\)\]) { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + } + :is(:where(.tw-dark) .dark\:focus\:tw-text-left:focus) { + text-align: left; + } `) }) }) diff --git a/tests/util/apply-important-selector.test.js b/tests/util/apply-important-selector.test.js index 3f4ef294c92f..cc2cacf524fd 100644 --- a/tests/util/apply-important-selector.test.js +++ b/tests/util/apply-important-selector.test.js @@ -13,8 +13,8 @@ crosscheck(() => { ${'.foo::file-selector-button'} | ${'#app :is(.foo)::file-selector-button'} ${'.foo::-webkit-progress-bar'} | ${'#app :is(.foo)::-webkit-progress-bar'} ${'.foo:hover::before'} | ${'#app :is(.foo:hover)::before'} - ${':is(.dark :is([dir="rtl"] .foo::before))'} | ${'#app :is(.dark :is([dir="rtl"] .foo))::before'} - ${':is(.dark .foo) .bar'} | ${'#app :is(:is(.dark .foo) .bar)'} + ${':is(:where(.dark) :is(:where([dir="rtl"]) .foo::before))'} | ${'#app :is(:where(.dark) :is(:where([dir="rtl"]) .foo))::before'} + ${':is(:where(.dark) .foo) .bar'} | ${'#app :is(:is(:where(.dark) .foo) .bar)'} ${':is(.foo) :is(.bar)'} | ${'#app :is(:is(.foo) :is(.bar))'} ${':is(.foo)::before'} | ${'#app :is(.foo)::before'} ${'.foo:before'} | ${'#app :is(.foo):before'} diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css index 5e06f3942492..2aaab5e70730 100644 --- a/tests/variants.oxide.test.css +++ b/tests/variants.oxide.test.css @@ -285,9 +285,7 @@ .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, -:is([dir='ltr'] .ltr\:shadow-md), -:is([dir='rtl'] .rtl\:shadow-md) { +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { --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), @@ -321,14 +319,6 @@ background-color: #fde047; } } -:is(.dark .dark\:shadow-md), -:is(.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md), -:is(.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\: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 print { .print\:bg-yellow-300 { background-color: #fde047; @@ -363,8 +353,7 @@ .lg\:animate-spin { animation: 1s linear infinite spin; } - .lg\:shadow-md, - :is(.dark .lg\:dark\:shadow-md) { + .lg\: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); @@ -373,8 +362,7 @@ } } @media (min-width: 1280px) { - .xl\:shadow-md, - :is(.dark .xl\:dark\:disabled\:shadow-md:disabled) { + .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); @@ -390,15 +378,6 @@ 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) { - :is(.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), - var(--tw-shadow); - } - } } @media (orientation: portrait) { .portrait\:bg-yellow-300 { @@ -410,3 +389,55 @@ background-color: #fde047; } } +:is(:where([dir="ltr"]) .ltr\:shadow-md), +:is(:where([dir="rtl"]) .rtl\:shadow-md), +:is(:where(.dark) .dark\:shadow-md), +:is( + :where(.dark) + .group:disabled:focus:hover + .dark\:group-disabled\:group-focus\:group-hover\:shadow-md + ), +:is( + :where(.dark) + .peer:disabled:focus:hover + ~ .dark\:peer-disabled\:peer-focus\:peer-hover\: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 (min-width: 1024px) { + :is(:where(.dark) .lg\:dark\: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 (min-width: 1280px) { + :is(:where(.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), + 0 2px 4px -2px 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 (min-width: 1536px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.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), + var(--tw-shadow); + } + } +} +@media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } +} diff --git a/tests/variants.test.css b/tests/variants.test.css index cd2ec1dd7977..c2fadabcbab7 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -301,9 +301,7 @@ .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, -:is([dir='ltr'] .ltr\:shadow-md), -:is([dir='rtl'] .rtl\:shadow-md) { +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { --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), @@ -339,19 +337,6 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } -:is(.dark .dark\:shadow-md), -:is(.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md), -:is(.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\: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 (forced-colors: active) { - .forced-colors\:flex { - display: flex; - } -} @media print { .print\:bg-yellow-300 { --tw-bg-opacity: 1; @@ -387,8 +372,7 @@ .lg\:animate-spin { animation: 1s linear infinite spin; } - .lg\:shadow-md, - :is(.dark .lg\:dark\:shadow-md) { + .lg\: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); @@ -397,8 +381,7 @@ } } @media (min-width: 1280px) { - .xl\:shadow-md, - :is(.dark .xl\:dark\:disabled\:shadow-md:disabled) { + .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); @@ -414,15 +397,6 @@ 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) { - :is(.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), - var(--tw-shadow); - } - } } @media (orientation: portrait) { .portrait\:bg-yellow-300 { @@ -436,3 +410,55 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } +:is(:where([dir="ltr"]) .ltr\:shadow-md), +:is(:where([dir="rtl"]) .rtl\:shadow-md), +:is(:where(.dark) .dark\:shadow-md), +:is( + :where(.dark) + .group:disabled:focus:hover + .dark\:group-disabled\:group-focus\:group-hover\:shadow-md + ), +:is( + :where(.dark) + .peer:disabled:focus:hover + ~ .dark\:peer-disabled\:peer-focus\:peer-hover\: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 (min-width: 1024px) { + :is(:where(.dark) .lg\:dark\: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 (min-width: 1280px) { + :is(:where(.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), + 0 2px 4px -2px 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 (min-width: 1536px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.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), + var(--tw-shadow); + } + } +} +@media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } +} \ No newline at end of file diff --git a/tests/variants.test.js b/tests/variants.test.js index 139d00ad8d62..14535dfd0ce1 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1172,7 +1172,7 @@ crosscheck(({ stable, oxide }) => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - :is(.dark :is([dir='rtl'] .dark\:rtl\:italic)) { + :is(:where(.dark) :is(:where([dir='rtl']) .dark\:rtl\:italic)) { font-style: italic; } `) @@ -1196,7 +1196,7 @@ crosscheck(({ stable, oxide }) => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - :is(.dark :is([dir='rtl'] .dark\:rtl\:placeholder\:italic))::placeholder { + :is(:where(.dark) :is(:where([dir='rtl']) .dark\:rtl\:placeholder\:italic))::placeholder { font-style: italic; } `)