diff --git a/CHANGELOG.md b/CHANGELOG.md index 31f65b985218..01f33ccdf79d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +## [3.4.0] - 2023-12-19 + +### Added + +- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) +- Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) +- Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031)) +- Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) +- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) +- Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) +- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) +- Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) +- Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) +- Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) +- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694), [#12582](https://github.com/tailwindlabs/tailwindcss/pull/12582)) +- Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) +- Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480)) +- Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551)) + +### Changed + +- 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 @@ -2310,7 +2333,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...HEAD +[3.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...v3.4.0 [3.3.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...v3.3.7 [3.3.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.3.6 [3.3.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...v3.3.5 diff --git a/oxide/crates/core/src/parser.rs b/oxide/crates/core/src/parser.rs index 16831afffd41..2f159f25ab46 100644 --- a/oxide/crates/core/src/parser.rs +++ b/oxide/crates/core/src/parser.rs @@ -278,7 +278,7 @@ impl<'a> Extractor<'a> { } // Allowed first characters. - b'@' | b'!' | b'-' | b'<' | b'0'..=b'9' | b'a'..=b'z' | b'A'..=b'Z' => { + b'@' | b'!' | b'-' | b'<' | b'0'..=b'9' | b'a'..=b'z' | b'A'..=b'Z' | b'*' => { // TODO: A bunch of characters that we currently support but maybe we only want it behind // a flag. E.g.: '' | '$' | '^' | '_' @@ -329,6 +329,7 @@ impl<'a> Extractor<'a> { | b'!' | b'@' | b'%' + | b'*' if prev != b']' => { /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */ @@ -508,6 +509,15 @@ mod test { assert_eq!(candidates, vec!["hover:underline"]); } + #[test] + fn it_can_parse_start_variants() { + let candidates = run("*:underline", false); + assert_eq!(candidates, vec!["*:underline"]); + + let candidates = run("hover:*:underline", false); + assert_eq!(candidates, vec!["hover:*:underline"]); + } + #[test] fn it_can_parse_simple_candidates_with_stacked_variants() { let candidates = run("focus:hover:underline", false); diff --git a/package-lock.json b/package-lock.json index 79d5ffac9056..22e90644cad8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "license": "MIT", "workspaces": [ "integrations/*", diff --git a/package-lock.stable.json b/package-lock.stable.json index 8d5a555afee3..8c2f5023a9d6 100644 --- a/package-lock.stable.json +++ b/package-lock.stable.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", diff --git a/package.json b/package.json index 9c7590fe33c3..fee562349ead 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/package.stable.json b/package.stable.json index ce3215c4066a..f5ef9ce064d1 100644 --- a/package.stable.json +++ b/package.stable.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/src/corePlugins.js b/src/corePlugins.js index 5db1fdb74e7b..a04dce82e3bd 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -25,6 +25,9 @@ import { normalize } from './util/dataTypes' import { INTERNAL_FEATURES } from './lib/setupContextUtils' export let variantPlugins = { + childVariant: ({ addVariant }) => { + addVariant('*', '& > *') + }, pseudoElementVariants: ({ addVariant }) => { addVariant('first-letter', '&::first-letter') addVariant('first-line', '&::first-line') @@ -204,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 }) => { @@ -226,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)') } @@ -392,6 +395,26 @@ export let variantPlugins = { ) }, + hasVariants: ({ matchVariant }) => { + matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} }) + matchVariant( + 'group-has', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &` + : `:merge(.group):has(${normalize(value)}) &`, + { values: {} } + ) + matchVariant( + 'peer-has', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &` + : `:merge(.peer):has(${normalize(value)}) ~ &`, + { values: {} } + ) + }, + ariaVariants: ({ matchVariant, theme }) => { matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) matchVariant( @@ -441,6 +464,10 @@ export let variantPlugins = { addVariant('contrast-more', '@media (prefers-contrast: more)') addVariant('contrast-less', '@media (prefers-contrast: less)') }, + + forcedColorsVariants: ({ addVariant }) => { + addVariant('forced-colors', '@media (forced-colors: active)') + }, } let cssTransformValue = [ @@ -666,6 +693,8 @@ export let corePlugins = { float: ({ addUtilities }) => { addUtilities({ + '.float-start': { float: 'inline-start' }, + '.float-end': { float: 'inline-end' }, '.float-right': { float: 'right' }, '.float-left': { float: 'left' }, '.float-none': { float: 'none' }, @@ -674,6 +703,8 @@ export let corePlugins = { clear: ({ addUtilities }) => { addUtilities({ + '.clear-start': { clear: 'inline-start' }, + '.clear-end': { clear: 'inline-end' }, '.clear-left': { clear: 'left' }, '.clear-right': { clear: 'right' }, '.clear-both': { clear: 'both' }, @@ -759,6 +790,8 @@ export let corePlugins = { aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]), + size: createUtilityPlugin('size', [['size', ['width', 'height']]]), + height: createUtilityPlugin('height', [['h', ['height']]]), maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]), minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]), @@ -1109,6 +1142,7 @@ export let corePlugins = { appearance: ({ addUtilities }) => { addUtilities({ '.appearance-none': { appearance: 'none' }, + '.appearance-auto': { appearance: 'auto' }, }) }, @@ -1509,6 +1543,15 @@ export let corePlugins = { }) }, + textWrap: ({ addUtilities }) => { + addUtilities({ + '.text-wrap': { 'text-wrap': 'wrap' }, + '.text-nowrap': { 'text-wrap': 'nowrap' }, + '.text-balance': { 'text-wrap': 'balance' }, + '.text-pretty': { 'text-wrap': 'pretty' }, + }) + }, + wordBreak: ({ addUtilities }) => { addUtilities({ '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' }, @@ -2852,4 +2895,10 @@ export let corePlugins = { content: createUtilityPlugin('content', [ ['content', ['--tw-content', ['content', 'var(--tw-content)']]], ]), + forcedColorAdjust: ({ addUtilities }) => { + addUtilities({ + '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' }, + '.forced-color-adjust-none': { 'forced-color-adjust': 'none' }, + }) + }, } diff --git a/src/css/preflight.css b/src/css/preflight.css index 8783e9b935ea..3e4fa066386f 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -24,16 +24,19 @@ 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ tab-size: 4; /* 3 */ - font-family: theme('fontFamily.sans', 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"); /* 4 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ } /* diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 59c261d698b3..91d5f66bfc8e 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -756,20 +756,23 @@ function resolvePlugins(context, root) { // TODO: This is a workaround for backwards compatibility, since custom variants // were historically sorted before screen/stackable variants. let beforeVariants = [ + variantPlugins['childVariant'], variantPlugins['pseudoElementVariants'], variantPlugins['pseudoClassVariants'], + variantPlugins['hasVariants'], variantPlugins['ariaVariants'], variantPlugins['dataVariants'], ] let afterVariants = [ variantPlugins['supportsVariants'], - variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], - variantPlugins['darkVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], + variantPlugins['directionVariants'], + variantPlugins['darkVariants'], + variantPlugins['forcedColorsVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/standalone-cli/package-lock.json b/standalone-cli/package-lock.json index 7073bb61b7e9..4d4049dbc651 100644 --- a/standalone-cli/package-lock.json +++ b/standalone-cli/package-lock.json @@ -24,7 +24,7 @@ } }, "..": { - "version": "3.3.7", + "version": "3.4.0", "dev": true, "license": "MIT", "workspaces": [ diff --git a/stubs/config.full.js b/stubs/config.full.js index 2dd01c6fd467..8eddd48984ba 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -303,13 +303,6 @@ module.exports = { sans: [ 'ui-sans-serif', 'system-ui', - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', @@ -451,6 +444,12 @@ module.exports = { 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', + 'span-7': 'span 7 / span 7', + 'span-8': 'span 8 / span 8', + 'span-9': 'span 9 / span 9', + 'span-10': 'span 10 / span 10', + 'span-11': 'span 11 / span 11', + 'span-12': 'span 12 / span 12', 'span-full': '1 / -1', }, gridRowEnd: { @@ -462,6 +461,12 @@ module.exports = { 5: '5', 6: '6', 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', }, gridRowStart: { auto: 'auto', @@ -472,9 +477,16 @@ module.exports = { 5: '5', 6: '6', 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', }, gridTemplateColumns: { none: 'none', + subgrid: 'subgrid', 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', @@ -490,12 +502,19 @@ module.exports = { }, gridTemplateRows: { none: 'none', + subgrid: 'subgrid', 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', + 7: 'repeat(7, minmax(0, 1fr))', + 8: 'repeat(8, minmax(0, 1fr))', + 9: 'repeat(9, minmax(0, 1fr))', + 10: 'repeat(10, minmax(0, 1fr))', + 11: 'repeat(11, minmax(0, 1fr))', + 12: 'repeat(12, minmax(0, 1fr))', }, height: ({ theme }) => ({ auto: 'auto', @@ -517,6 +536,9 @@ module.exports = { '5/6': '83.333333%', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -621,13 +643,16 @@ module.exports = { none: 'none', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', }), maxWidth: ({ theme, breakpoints }) => ({ + ...theme('spacing'), none: 'none', - 0: '0rem', xs: '20rem', sm: '24rem', md: '28rem', @@ -646,21 +671,24 @@ module.exports = { prose: '65ch', ...breakpoints(theme('screens')), }), - minHeight: { - 0: '0px', + minHeight: ({ theme }) => ({ + ...theme('spacing'), full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', - }, - minWidth: { - 0: '0px', + }), + minWidth: ({ theme }) => ({ + ...theme('spacing'), full: '100%', min: 'min-content', max: 'max-content', fit: 'fit-content', - }, + }), objectPosition: { bottom: 'bottom', center: 'center', @@ -676,15 +704,21 @@ module.exports = { 0: '0', 5: '0.05', 10: '0.1', + 15: '0.15', 20: '0.2', 25: '0.25', 30: '0.3', + 35: '0.35', 40: '0.4', + 45: '0.45', 50: '0.5', + 55: '0.55', 60: '0.6', + 65: '0.65', 70: '0.7', 75: '0.75', 80: '0.8', + 85: '0.85', 90: '0.9', 95: '0.95', 100: '1', @@ -936,6 +970,40 @@ module.exports = { '3/4': '75%', full: '100%', }), + size: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), width: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), @@ -967,6 +1035,9 @@ module.exports = { '11/12': '91.666667%', full: '100%', screen: '100vw', + svw: '100svw', + lvw: '100lvw', + dvw: '100dvw', min: 'min-content', max: 'max-content', fit: 'fit-content', 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/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index b210bdc77ecb..c4f8960dc638 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -845,6 +845,132 @@ crosscheck(({ stable, oxide }) => { }) }) + test('has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .has-\[\.foo\:hover\]\:block:has(.foo:hover) { + display: block; + } + .has-\[figcaption\]\:inline-block:has(figcaption) { + display: inline-block; + } + .has-\[\[data-active\]\]\:inline:has([data-active]) { + display: inline; + } + .has-\[\.foo\]\:flex:has(.foo) { + display: flex; + } + .has-\[\>_\.potato\]\:table:has(> .potato) { + display: table; + } + .has-\[\+_h2\]\:grid:has(+ h2) { + display: grid; + } + .has-\[\>_h1_\+_h2\]\:contents:has(> h1 + h2) { + display: contents; + } + .has-\[h2\]\:has-\[\.banana\]\:hidden:has(.banana):has(h2) { + display: none; + } + `) + }) + }) + + test('group-has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .group:has(> h1 + .foo) .group-has-\[\>_h1_\+_\.foo\]\:block { + display: block; + } + .group\/two:has(> h1 + .foo) .group-has-\[\>_h1_\+_\.foo\]\/two\:flex { + display: flex; + } + `) + }) + }) + + test('peer-has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .peer:has(> h1 + .foo) ~ .peer-has-\[\>_h1_\+_\.foo\]\:block { + display: block; + } + .peer\/two:has(> h1 + .foo) ~ .peer-has-\[\>_h1_\+_\.foo\]\/two\:flex { + display: flex; + } + `) + }) + }) + it('should be possible to use modifiers and arbitrary groups', () => { let config = { content: [ diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 6a01dc045efa..2c102b7a35e5 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } @@ -548,6 +593,15 @@ .whitespace-nowrap { white-space: nowrap; } +.text-wrap { + text-wrap: wrap; +} +.text-nowrap { + text-wrap: nowrap; +} +.text-balance { + text-wrap: balance; +} .break-words { overflow-wrap: break-word; } @@ -713,9 +767,8 @@ 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, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 720c783e91ab..17600764a711 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } @@ -552,6 +597,15 @@ .whitespace-nowrap { white-space: nowrap; } +.text-wrap { + text-wrap: wrap; +} +.text-nowrap { + text-wrap: nowrap; +} +.text-balance { + text-wrap: balance; +} .break-words { overflow-wrap: break-word; } @@ -731,9 +785,8 @@ 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, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 24bae0e68537..facc87ee25fa 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -91,9 +91,10 @@ crosscheck(({ stable, oxide, engine }) => {
-
+ +
-
+
@@ -192,6 +193,7 @@ crosscheck(({ stable, oxide, engine }) => {
+
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/getClassList.test.js b/tests/getClassList.test.js index 671a767ecfe5..65ca7a074b26 100644 --- a/tests/getClassList.test.js +++ b/tests/getClassList.test.js @@ -97,15 +97,21 @@ crosscheck(() => { '0', '5', '10', + '15', '20', '25', '30', + '35', '40', + '45', '50', + '55', '60', + '65', '70', '75', '80', + '85', '90', '95', '100', 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 3b02c8966014..44665ffab4a6 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -240,8 +240,7 @@ crosscheck(({ stable, oxide }) => { stable.expect(result.css).toMatchFormattedCss(css` .theme-test { 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, + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } @media (min-width: 1024px) { @@ -306,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 { @@ -341,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)); } @@ -742,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; @@ -789,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 { @@ -809,12 +802,21 @@ 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 { 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, + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } @media (min-width: 1024px) { @@ -876,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 { @@ -910,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) { @@ -1301,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; @@ -1348,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 { @@ -1368,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/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css index aa5abd127083..3408975df9d4 100644 --- a/tests/raw-content.oxide.test.css +++ b/tests/raw-content.oxide.test.css @@ -512,9 +512,8 @@ 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, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index dba9f3194292..a6be31fd0aec 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -524,9 +524,8 @@ 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, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js index c99a986defa0..69a62bba5529 100644 --- a/tests/resolveConfig.test.js +++ b/tests/resolveConfig.test.js @@ -150,7 +150,7 @@ crosscheck(() => { 'grey-lighter': '#f1f5f8', }, fonts: { - sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + sans: ['system-ui', 'Roboto', 'sans-serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], }, screens: { @@ -176,7 +176,7 @@ crosscheck(() => { 'grey-lighter': '#f1f5f8', }, fonts: { - sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + sans: ['system-ui', 'Roboto', 'sans-serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], }, screens: { diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 75bfd84fc7b7..686ec14eae59 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -98,309 +98,310 @@ crosscheck(({ stable, oxide }) => { '2:6-20 -> 19:2-18', '2:20 -> 20:0', '2:6 -> 22:0', - '2:20 -> 29:1', - '2:6 -> 31:0', - '2:6-20 -> 32:2-26', - '2:6-20 -> 33:2-40', + '2:20 -> 30:1', + '2:6 -> 32:0', '2:6-20 -> 34:2-26', - '2:6-20 -> 35:2-21', - '2:6-20 -> 36:2-230', - '2:6-20 -> 37:2-39', - '2:6-20 -> 38:2-41', - '2:20 -> 39:0', - '2:6 -> 41:0', - '2:20 -> 44:1', - '2:6 -> 46:0', - '2:6-20 -> 47:2-19', - '2:6-20 -> 48:2-30', - '2:20 -> 49:0', - '2:6 -> 51:0', - '2:20 -> 55:1', - '2:6 -> 57:0', - '2:6-20 -> 58:2-19', - '2:6-20 -> 59:2-24', - '2:6-20 -> 60:2-31', - '2:20 -> 61:0', - '2:6 -> 63:0', - '2:20 -> 65:1', - '2:6 -> 67:0', - '2:6-20 -> 68:2-35', - '2:20 -> 69:0', - '2:6 -> 71:0', - '2:20 -> 73:1', - '2:6 -> 75:0', - '2:6-20 -> 81:2-20', - '2:6-20 -> 82:2-22', - '2:20 -> 83:0', - '2:6 -> 85:0', - '2:20 -> 87:1', - '2:6 -> 89:0', - '2:6-20 -> 90:2-16', - '2:6-20 -> 91:2-26', - '2:20 -> 92:0', - '2:6 -> 94:0', - '2:20 -> 96:1', - '2:6 -> 98:0', - '2:6-20 -> 100:2-21', - '2:20 -> 101:0', - '2:6 -> 103:0', - '2:20 -> 108:1', - '2:6 -> 110:0', - '2:6-20 -> 114:2-121', - '2:6-20 -> 115:2-39', - '2:6-20 -> 116:2-41', - '2:6-20 -> 117:2-24', - '2:20 -> 118:0', - '2:6 -> 120:0', - '2:20 -> 122:1', - '2:6 -> 124:0', - '2:6-20 -> 125:2-16', - '2:20 -> 126:0', - '2:6 -> 128:0', - '2:20 -> 130:1', - '2:6 -> 132:0', - '2:6-20 -> 134:2-16', - '2:6-20 -> 135:2-16', - '2:6-20 -> 136:2-20', - '2:6-20 -> 137:2-26', - '2:20 -> 138:0', - '2:6 -> 140:0', - '2:6-20 -> 141:2-17', - '2:20 -> 142:0', - '2:6 -> 144:0', - '2:6-20 -> 145:2-13', - '2:20 -> 146:0', - '2:6 -> 148:0', - '2:20 -> 152:1', - '2:6 -> 154:0', - '2:6-20 -> 155:2-24', - '2:6-20 -> 156:2-31', - '2:6-20 -> 157:2-35', - '2:20 -> 158:0', - '2:6 -> 160:0', - '2:20 -> 164:1', - '2:6 -> 166:0', - '2:6-20 -> 171:2-30', - '2:6-20 -> 172:2-40', - '2:6-20 -> 173:2-42', - '2:6-20 -> 174:2-25', - '2:6-20 -> 175:2-30', - '2:6-20 -> 176:2-30', - '2:6-20 -> 177:2-24', - '2:6-20 -> 178:2-19', - '2:6-20 -> 179:2-20', - '2:20 -> 180:0', - '2:6 -> 182:0', - '2:20 -> 184:1', - '2:6 -> 186:0', - '2:6-20 -> 188:2-22', - '2:20 -> 189:0', - '2:6 -> 191:0', - '2:20 -> 194:1', - '2:6 -> 196:0', - '2:6-20 -> 200:2-36', - '2:6-20 -> 201:2-39', - '2:6-20 -> 202:2-32', - '2:20 -> 203:0', - '2:6 -> 205:0', - '2:20 -> 207:1', - '2:6 -> 209:0', - '2:6-20 -> 210:2-15', - '2:20 -> 211:0', - '2:6 -> 213:0', - '2:20 -> 215:1', - '2:6 -> 217:0', - '2:6-20 -> 218:2-18', - '2:20 -> 219:0', - '2:6 -> 221:0', - '2:20 -> 223:1', - '2:6 -> 225:0', - '2:6-20 -> 226:2-26', - '2:20 -> 227:0', - '2:6 -> 229:0', - '2:20 -> 231:1', - '2:6 -> 233:0', - '2:6-20 -> 235:2-14', - '2:20 -> 236:0', - '2:6 -> 238:0', - '2:20 -> 241:1', - '2:6 -> 243:0', - '2:6-20 -> 244:2-39', - '2:6-20 -> 245:2-30', - '2:20 -> 246:0', - '2:6 -> 248:0', - '2:20 -> 250:1', - '2:6 -> 252:0', - '2:6-20 -> 253:2-26', - '2:20 -> 254:0', - '2:6 -> 256:0', - '2:20 -> 259:1', - '2:6 -> 261:0', - '2:6-20 -> 262:2-36', - '2:6-20 -> 263:2-23', - '2:20 -> 264:0', - '2:6 -> 266:0', - '2:20 -> 268:1', - '2:6 -> 270:0', - '2:6-20 -> 271:2-20', - '2:20 -> 272:0', - '2:6 -> 274:0', - '2:20 -> 276:1', - '2:6 -> 278:0', - '2:6-20 -> 291:2-11', - '2:20 -> 292:0', - '2:6 -> 294:0', - '2:6-20 -> 295:2-11', - '2:6-20 -> 296:2-12', - '2:20 -> 297:0', - '2:6 -> 299:0', - '2:6-20 -> 300:2-12', - '2:20 -> 301:0', - '2:6 -> 303:0', - '2:6-20 -> 306:2-18', - '2:6-20 -> 307:2-11', - '2:6-20 -> 308:2-12', - '2:20 -> 309:0', - '2:6 -> 311:0', - '2:20 -> 313:1', + '2:6-20 -> 35:2-40', + '2:6-20 -> 36:2-26', + '2:6-20 -> 37:2-21', + '2:6-20 -> 38:2-137', + '2:6-20 -> 39:2-39', + '2:6-20 -> 40:2-41', + '2:6-20 -> 41:2-50', + '2:20 -> 42:0', + '2:6 -> 44:0', + '2:20 -> 47:1', + '2:6 -> 49:0', + '2:6-20 -> 50:2-19', + '2:6-20 -> 51:2-30', + '2:20 -> 52:0', + '2:6 -> 54:0', + '2:20 -> 58:1', + '2:6 -> 60:0', + '2:6-20 -> 61:2-19', + '2:6-20 -> 62:2-24', + '2:6-20 -> 63:2-31', + '2:20 -> 64:0', + '2:6 -> 66:0', + '2:20 -> 68:1', + '2:6 -> 70:0', + '2:6-20 -> 71:2-35', + '2:20 -> 72:0', + '2:6 -> 74:0', + '2:20 -> 76:1', + '2:6 -> 78:0', + '2:6-20 -> 84:2-20', + '2:6-20 -> 85:2-22', + '2:20 -> 86:0', + '2:6 -> 88:0', + '2:20 -> 90:1', + '2:6 -> 92:0', + '2:6-20 -> 93:2-16', + '2:6-20 -> 94:2-26', + '2:20 -> 95:0', + '2:6 -> 97:0', + '2:20 -> 99:1', + '2:6 -> 101:0', + '2:6-20 -> 103:2-21', + '2:20 -> 104:0', + '2:6 -> 106:0', + '2:20 -> 111:1', + '2:6 -> 113:0', + '2:6-20 -> 117:2-121', + '2:6-20 -> 118:2-39', + '2:6-20 -> 119:2-41', + '2:6-20 -> 120:2-24', + '2:20 -> 121:0', + '2:6 -> 123:0', + '2:20 -> 125:1', + '2:6 -> 127:0', + '2:6-20 -> 128:2-16', + '2:20 -> 129:0', + '2:6 -> 131:0', + '2:20 -> 133:1', + '2:6 -> 135:0', + '2:6-20 -> 137:2-16', + '2:6-20 -> 138:2-16', + '2:6-20 -> 139:2-20', + '2:6-20 -> 140:2-26', + '2:20 -> 141:0', + '2:6 -> 143:0', + '2:6-20 -> 144:2-17', + '2:20 -> 145:0', + '2:6 -> 147:0', + '2:6-20 -> 148:2-13', + '2:20 -> 149:0', + '2:6 -> 151:0', + '2:20 -> 155:1', + '2:6 -> 157:0', + '2:6-20 -> 158:2-24', + '2:6-20 -> 159:2-31', + '2:6-20 -> 160:2-35', + '2:20 -> 161:0', + '2:6 -> 163:0', + '2:20 -> 167:1', + '2:6 -> 169:0', + '2:6-20 -> 174:2-30', + '2:6-20 -> 175:2-40', + '2:6-20 -> 176:2-42', + '2:6-20 -> 177:2-25', + '2:6-20 -> 178:2-30', + '2:6-20 -> 179:2-30', + '2:6-20 -> 180:2-24', + '2:6-20 -> 181:2-19', + '2:6-20 -> 182:2-20', + '2:20 -> 183:0', + '2:6 -> 185:0', + '2:20 -> 187:1', + '2:6 -> 189:0', + '2:6-20 -> 191:2-22', + '2:20 -> 192:0', + '2:6 -> 194:0', + '2:20 -> 197:1', + '2:6 -> 199:0', + '2:6-20 -> 203:2-36', + '2:6-20 -> 204:2-39', + '2:6-20 -> 205:2-32', + '2:20 -> 206:0', + '2:6 -> 208:0', + '2:20 -> 210:1', + '2:6 -> 212:0', + '2:6-20 -> 213:2-15', + '2:20 -> 214:0', + '2:6 -> 216:0', + '2:20 -> 218:1', + '2:6 -> 220:0', + '2:6-20 -> 221:2-18', + '2:20 -> 222:0', + '2:6 -> 224:0', + '2:20 -> 226:1', + '2:6 -> 228:0', + '2:6-20 -> 229:2-26', + '2:20 -> 230:0', + '2:6 -> 232:0', + '2:20 -> 234:1', + '2:6 -> 236:0', + '2:6-20 -> 238:2-14', + '2:20 -> 239:0', + '2:6 -> 241:0', + '2:20 -> 244:1', + '2:6 -> 246:0', + '2:6-20 -> 247:2-39', + '2:6-20 -> 248:2-30', + '2:20 -> 249:0', + '2:6 -> 251:0', + '2:20 -> 253:1', + '2:6 -> 255:0', + '2:6-20 -> 256:2-26', + '2:20 -> 257:0', + '2:6 -> 259:0', + '2:20 -> 262:1', + '2:6 -> 264:0', + '2:6-20 -> 265:2-36', + '2:6-20 -> 266:2-23', + '2:20 -> 267:0', + '2:6 -> 269:0', + '2:20 -> 271:1', + '2:6 -> 273:0', + '2:6-20 -> 274:2-20', + '2:20 -> 275:0', + '2:6 -> 277:0', + '2:20 -> 279:1', + '2:6 -> 281:0', + '2:6-20 -> 294:2-11', + '2:20 -> 295:0', + '2:6 -> 297:0', + '2:6-20 -> 298:2-11', + '2:6-20 -> 299:2-12', + '2:20 -> 300:0', + '2:6 -> 302:0', + '2:6-20 -> 303:2-12', + '2:20 -> 304:0', + '2:6 -> 306:0', + '2:6-20 -> 309:2-18', + '2:6-20 -> 310:2-11', + '2:6-20 -> 311:2-12', + '2:20 -> 312:0', '2:6 -> 314:0', - '2:6-20 -> 315:2-12', - '2:20 -> 316:0', - '2:6 -> 318:0', - '2:20 -> 320:1', - '2:6 -> 322:0', - '2:6-20 -> 323:2-18', - '2:20 -> 324:0', - '2:6 -> 326:0', - '2:20 -> 329:1', - '2:6 -> 331:0', - '2:6-20 -> 333:2-20', - '2:6-20 -> 334:2-24', - '2:20 -> 335:0', - '2:6 -> 337:0', - '2:20 -> 339:1', - '2:6 -> 341:0', - '2:6-20 -> 343:2-17', - '2:20 -> 344:0', - '2:6 -> 346:0', - '2:20 -> 348:1', + '2:20 -> 316:1', + '2:6 -> 317:0', + '2:6-20 -> 318:2-12', + '2:20 -> 319:0', + '2:6 -> 321:0', + '2:20 -> 323:1', + '2:6 -> 325:0', + '2:6-20 -> 326:2-18', + '2:20 -> 327:0', + '2:6 -> 329:0', + '2:20 -> 332:1', + '2:6 -> 334:0', + '2:6-20 -> 336:2-20', + '2:6-20 -> 337:2-24', + '2:20 -> 338:0', + '2:6 -> 340:0', + '2:20 -> 342:1', + '2:6 -> 344:0', + '2:6-20 -> 346:2-17', + '2:20 -> 347:0', '2:6 -> 349:0', - '2:6-20 -> 350:2-17', - '2:20 -> 351:0', - '2:6 -> 353:0', - '2:20 -> 357:1', - '2:6 -> 359:0', - '2:6-20 -> 367:2-24', - '2:6-20 -> 368:2-32', - '2:20 -> 369:0', - '2:6 -> 371:0', - '2:20 -> 373:1', - '2:6 -> 375:0', - '2:6-20 -> 377:2-17', - '2:6-20 -> 378:2-14', - '2:20 -> 379:0', - '2:6-20 -> 381:0-72', - '2:6 -> 382:0', - '2:6-20 -> 383:2-15', - '2:20 -> 384:0', - '2:6 -> 386:0', - '2:6-20 -> 387:2-26', - '2:6-20 -> 388:2-26', - '2:6-20 -> 389:2-21', - '2:6-20 -> 390:2-21', - '2:6-20 -> 391:2-16', - '2:6-20 -> 392:2-16', - '2:6-20 -> 393:2-16', - '2:6-20 -> 394:2-17', - '2:6-20 -> 395:2-17', - '2:6-20 -> 396:2-15', - '2:6-20 -> 397:2-15', - '2:6-20 -> 398:2-20', - '2:6-20 -> 399:2-40', - '2:6-20 -> 400:2-32', - '2:6-20 -> 401:2-31', - '2:6-20 -> 402:2-30', - '2:6-20 -> 403:2-17', - '2:6-20 -> 404:2-22', - '2:6-20 -> 405:2-24', - '2:6-20 -> 406:2-25', - '2:6-20 -> 407:2-26', - '2:6-20 -> 408:2-20', - '2:6-20 -> 409:2-29', - '2:6-20 -> 410:2-30', - '2:6-20 -> 411:2-40', - '2:6-20 -> 412:2-36', - '2:6-20 -> 413:2-29', - '2:6-20 -> 414:2-24', - '2:6-20 -> 415:2-32', - '2:6-20 -> 416:2-14', - '2:6-20 -> 417:2-20', - '2:6-20 -> 418:2-18', - '2:6-20 -> 419:2-19', + '2:20 -> 351:1', + '2:6 -> 352:0', + '2:6-20 -> 353:2-17', + '2:20 -> 354:0', + '2:6 -> 356:0', + '2:20 -> 360:1', + '2:6 -> 362:0', + '2:6-20 -> 370:2-24', + '2:6-20 -> 371:2-32', + '2:20 -> 372:0', + '2:6 -> 374:0', + '2:20 -> 376:1', + '2:6 -> 378:0', + '2:6-20 -> 380:2-17', + '2:6-20 -> 381:2-14', + '2:20 -> 382:0', + '2:6-20 -> 384:0-72', + '2:6 -> 385:0', + '2:6-20 -> 386:2-15', + '2:20 -> 387:0', + '2:6 -> 389:0', + '2:6-20 -> 390:2-26', + '2:6-20 -> 391:2-26', + '2:6-20 -> 392:2-21', + '2:6-20 -> 393:2-21', + '2:6-20 -> 394:2-16', + '2:6-20 -> 395:2-16', + '2:6-20 -> 396:2-16', + '2:6-20 -> 397:2-17', + '2:6-20 -> 398:2-17', + '2:6-20 -> 399:2-15', + '2:6-20 -> 400:2-15', + '2:6-20 -> 401:2-20', + '2:6-20 -> 402:2-40', + '2:6-20 -> 403:2-32', + '2:6-20 -> 404:2-31', + '2:6-20 -> 405:2-30', + '2:6-20 -> 406:2-17', + '2:6-20 -> 407:2-22', + '2:6-20 -> 408:2-24', + '2:6-20 -> 409:2-25', + '2:6-20 -> 410:2-26', + '2:6-20 -> 411:2-20', + '2:6-20 -> 412:2-29', + '2:6-20 -> 413:2-30', + '2:6-20 -> 414:2-40', + '2:6-20 -> 415:2-36', + '2:6-20 -> 416:2-29', + '2:6-20 -> 417:2-24', + '2:6-20 -> 418:2-32', + '2:6-20 -> 419:2-14', '2:6-20 -> 420:2-20', - '2:6-20 -> 421:2-16', - '2:6-20 -> 422:2-18', - '2:6-20 -> 423:2-15', - '2:6-20 -> 424:2-21', - '2:6-20 -> 425:2-23', - '2:6-20 -> 426:2-29', - '2:6-20 -> 427:2-27', - '2:6-20 -> 428:2-28', + '2:6-20 -> 421:2-18', + '2:6-20 -> 422:2-19', + '2:6-20 -> 423:2-20', + '2:6-20 -> 424:2-16', + '2:6-20 -> 425:2-18', + '2:6-20 -> 426:2-15', + '2:6-20 -> 427:2-21', + '2:6-20 -> 428:2-23', '2:6-20 -> 429:2-29', - '2:6-20 -> 430:2-25', - '2:6-20 -> 431:2-26', - '2:6-20 -> 432:2-27', - '2:6 -> 433:2', - '2:20 -> 434:0', - '2:6 -> 436:0', - '2:6-20 -> 437:2-26', - '2:6-20 -> 438:2-26', - '2:6-20 -> 439:2-21', - '2:6-20 -> 440:2-21', - '2:6-20 -> 441:2-16', - '2:6-20 -> 442:2-16', - '2:6-20 -> 443:2-16', - '2:6-20 -> 444:2-17', - '2:6-20 -> 445:2-17', - '2:6-20 -> 446:2-15', - '2:6-20 -> 447:2-15', - '2:6-20 -> 448:2-20', - '2:6-20 -> 449:2-40', - '2:6-20 -> 450:2-32', - '2:6-20 -> 451:2-31', - '2:6-20 -> 452:2-30', - '2:6-20 -> 453:2-17', - '2:6-20 -> 454:2-22', - '2:6-20 -> 455:2-24', - '2:6-20 -> 456:2-25', - '2:6-20 -> 457:2-26', - '2:6-20 -> 458:2-20', - '2:6-20 -> 459:2-29', - '2:6-20 -> 460:2-30', - '2:6-20 -> 461:2-40', - '2:6-20 -> 462:2-36', - '2:6-20 -> 463:2-29', - '2:6-20 -> 464:2-24', - '2:6-20 -> 465:2-32', - '2:6-20 -> 466:2-14', - '2:6-20 -> 467:2-20', - '2:6-20 -> 468:2-18', - '2:6-20 -> 469:2-19', + '2:6-20 -> 430:2-27', + '2:6-20 -> 431:2-28', + '2:6-20 -> 432:2-29', + '2:6-20 -> 433:2-25', + '2:6-20 -> 434:2-26', + '2:6-20 -> 435:2-27', + '2:6 -> 436:2', + '2:20 -> 437:0', + '2:6 -> 439:0', + '2:6-20 -> 440:2-26', + '2:6-20 -> 441:2-26', + '2:6-20 -> 442:2-21', + '2:6-20 -> 443:2-21', + '2:6-20 -> 444:2-16', + '2:6-20 -> 445:2-16', + '2:6-20 -> 446:2-16', + '2:6-20 -> 447:2-17', + '2:6-20 -> 448:2-17', + '2:6-20 -> 449:2-15', + '2:6-20 -> 450:2-15', + '2:6-20 -> 451:2-20', + '2:6-20 -> 452:2-40', + '2:6-20 -> 453:2-32', + '2:6-20 -> 454:2-31', + '2:6-20 -> 455:2-30', + '2:6-20 -> 456:2-17', + '2:6-20 -> 457:2-22', + '2:6-20 -> 458:2-24', + '2:6-20 -> 459:2-25', + '2:6-20 -> 460:2-26', + '2:6-20 -> 461:2-20', + '2:6-20 -> 462:2-29', + '2:6-20 -> 463:2-30', + '2:6-20 -> 464:2-40', + '2:6-20 -> 465:2-36', + '2:6-20 -> 466:2-29', + '2:6-20 -> 467:2-24', + '2:6-20 -> 468:2-32', + '2:6-20 -> 469:2-14', '2:6-20 -> 470:2-20', - '2:6-20 -> 471:2-16', - '2:6-20 -> 472:2-18', - '2:6-20 -> 473:2-15', - '2:6-20 -> 474:2-21', - '2:6-20 -> 475:2-23', - '2:6-20 -> 476:2-29', - '2:6-20 -> 477:2-27', - '2:6-20 -> 478:2-28', + '2:6-20 -> 471:2-18', + '2:6-20 -> 472:2-19', + '2:6-20 -> 473:2-20', + '2:6-20 -> 474:2-16', + '2:6-20 -> 475:2-18', + '2:6-20 -> 476:2-15', + '2:6-20 -> 477:2-21', + '2:6-20 -> 478:2-23', '2:6-20 -> 479:2-29', - '2:6-20 -> 480:2-25', - '2:6-20 -> 481:2-26', - '2:6-20 -> 482:2-27', - '2:6 -> 483:2', - '2:20 -> 484:0', + '2:6-20 -> 480:2-27', + '2:6-20 -> 481:2-28', + '2:6-20 -> 482:2-29', + '2:6-20 -> 483:2-25', + '2:6-20 -> 484:2-26', + '2:6-20 -> 485:2-27', + '2:6 -> 486:2', + '2:20 -> 487:0', ]) }) 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 8a9d481ee7bc..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,14 +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 print { .print\:bg-yellow-300 { --tw-bg-opacity: 1; @@ -382,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); @@ -392,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); @@ -409,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 { @@ -431,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.html b/tests/variants.test.html index bd40b625fbdb..f3ba2ba3b6ad 100644 --- a/tests/variants.test.html +++ b/tests/variants.test.html @@ -121,6 +121,9 @@
+ +
+
diff --git a/tests/variants.test.js b/tests/variants.test.js index 55facc122f41..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,40 @@ 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; + } + `) + }) + + test('* is matched by the parser as the children variant', async () => { + let config = { + content: [ + { + raw: html` +
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + let result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + .\*\:italic > *, + .\*\:hover\:italic:hover > *, + .hover\:\*\:italic > :hover, + .data-\[slot\=label\]\:\*\:hover\:italic:hover > [data-slot='label'], + .\[\&_p\]\:\*\:hover\:italic:hover > * p { font-style: italic; } `)