Compare commits

...
Sign in to create a new pull request.

22 commits

Author SHA1 Message Date
Jordan Pittman
48864d4686 Move test 2023-12-11 18:13:11 -05:00
Jordan Pittman
68e9295084 Fix failing test 2023-12-11 18:12:44 -05:00
Adam Wathan
e6d5accd89 Port child variant 2023-12-09 09:26:43 -05:00
Jordan Pittman
65fd47f256 Disable tap highlights on iOS (#12299)
* Disable tap highlights on iOS

* Update changelog

* Update snapshots

* Update changelog
2023-12-05 12:34:39 -05:00
Emilia
d0d2ba15f1 feat(preflight): simplify sans-serif font stack (#11748)
* feat(preflight): simplify sans-serif font stack

`-apple-system` and `BlinkMacSystemFont` were historically needed for
IE11 and chakra-based Edge (The one that wasn't chromium-based).

https://caniuse.com/font-family-system-ui has more details around it.

* further simplify `font-family`

* update tests

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-12-05 12:34:39 -05:00
Adam Wathan
394f6e9e97 Update changelog 2023-12-05 12:34:39 -05:00
Ngô Quốc Đạt
736f2f1b42 Add logical properties support for float and clear (#12480) 2023-12-05 12:34:15 -05:00
Adam Wathan
82f7294965 Fix typo in changelog 2023-12-05 12:34:15 -05:00
Adam Wathan
05965b7da0 Add appearance-auto utility (#12404)
* Add `appearance-auto` utility

* Update CHANGELOG

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:29 -05:00
Luke Warlow
02fb5df775 Add forced-colors variant (#11694)
* Add forced-colors variant

Also add a contrast-custom variant to match custom contrast preferences

* use `toMatchSnapshot` instead of `toMatchFormattedCss`

More info: https://github.com/tailwindlabs/tailwindcss/pull/12170

* remove `contrast-custom` variant

* move `forcedColorsVariants` next to `prefersContrastVariants`

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-12-05 12:30:29 -05:00
Luke Warlow
5cb0c3dcce Add forced-color-adjust utilities (#11931)
* Add forced-colors-adjust utilities

* Update forcedColorsAdjust.test.js

* use `toMatchSnapshot` instead of `toMatchFormattedCss`

More info: https://github.com/tailwindlabs/tailwindcss/pull/12170

* rename `forced-colors-adjust` -> `forced-color-adjust`

Dropped the `s` in `colors`.

* update changelog

* fix typo

* use full `forced-color-adjust-auto` and `forced-color-adjust-none` names

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-12-05 12:30:29 -05:00
Jordan Pittman
79e92de68e Add spacing scale to min-width, min-height, and max-width (#12300)
* Add spacing scale to `min-width`, `min-height`, and `max-width`

* Update snapshots

* Update changelog
2023-12-05 12:30:19 -05:00
Adam Wathan
08916a5aa6 Add subgrid utilities (#12298)
* Add subgrid utilities

* Update CHANGELOG

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:19 -05:00
Jordan Pittman
075665351f Add size-* shorthand (#12287)
* Add `size-*` shorthand

Add plugin tests

Adjust options

wip

* Update changelog
2023-12-05 12:30:19 -05:00
Adam Wathan
81c8a0cccc Update CHANGELOG 2023-12-05 12:30:19 -05:00
bandogora
c54a8e7dbd Equal number of grid columns and rows (#12180)
Update test snapshots
2023-12-05 12:30:19 -05:00
Brandon McConnell
bbc4018285 Update Preflight html styles to include shadow DOM :host pseudo-class (#11200)
* Extend current preflight `html` styles to support other root/host scopes

Supports SVG root scope, ShadowDOM, and presumably other root scopes

* Replace `:root` with `html`

* Update tests

* Update changelog

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2023-12-05 12:30:19 -05:00
Adam Wathan
9a8ef8d1ae Extend opacity scale to include all steps of 5 (#11832)
* Extend opacity scale to include all steps of 5

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:19 -05:00
Yuhei Yasuda
c726806a82 Add support for text-wrap: pretty (#12031)
* Add support for `text-wrap: pretty`

* Update changelog

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2023-12-05 12:30:19 -05:00
Adam Wathan
a38b946c62 Add support for text-wrap property (#11320)
Update changelog

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:19 -05:00
Adam Wathan
8b737f61c6 Add has-* variants for :has(...) pseudo-class (#11318)
* Add `has-*` variants for `:has(...)` pseudo-class

* Update changelog

* Fix mistake in test

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:19 -05:00
Adam Wathan
c2935e1630 Add svh, lvh, and dvh values to default theme (#11317)
* Add svh, lvh, and dvh values to default theme

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-12-05 12:30:19 -05:00
17 changed files with 752 additions and 333 deletions

View file

@ -11,6 +11,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix support for container query utilities with arbitrary values ([#12534](https://github.com/tailwindlabs/tailwindcss/pull/12534)) - Fix support for container query utilities with arbitrary values ([#12534](https://github.com/tailwindlabs/tailwindcss/pull/12534))
### 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))
- 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))
### 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))
## [3.3.6] - 2023-12-04 ## [3.3.6] - 2023-12-04
### Fixed ### Fixed

View file

@ -278,7 +278,7 @@ impl<'a> Extractor<'a> {
} }
// Allowed first characters. // 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 // TODO: A bunch of characters that we currently support but maybe we only want it behind
// a flag. E.g.: '<sm' // a flag. E.g.: '<sm'
// | '<' | '>' | '$' | '^' | '_' // | '<' | '>' | '$' | '^' | '_'
@ -329,6 +329,7 @@ impl<'a> Extractor<'a> {
| b'!' | b'!'
| b'@' | b'@'
| b'%' | b'%'
| b'*'
if prev != b']' => if prev != b']' =>
{ {
/* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */ /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */

View file

@ -25,6 +25,9 @@ import { normalize } from './util/dataTypes'
import { INTERNAL_FEATURES } from './lib/setupContextUtils' import { INTERNAL_FEATURES } from './lib/setupContextUtils'
export let variantPlugins = { export let variantPlugins = {
childVariant: ({ addVariant }) => {
addVariant('*', '& > *')
},
pseudoElementVariants: ({ addVariant }) => { pseudoElementVariants: ({ addVariant }) => {
addVariant('first-letter', '&::first-letter') addVariant('first-letter', '&::first-letter')
addVariant('first-line', '&::first-line') addVariant('first-line', '&::first-line')
@ -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 }) => { ariaVariants: ({ matchVariant, theme }) => {
matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
matchVariant( matchVariant(
@ -441,6 +464,10 @@ export let variantPlugins = {
addVariant('contrast-more', '@media (prefers-contrast: more)') addVariant('contrast-more', '@media (prefers-contrast: more)')
addVariant('contrast-less', '@media (prefers-contrast: less)') addVariant('contrast-less', '@media (prefers-contrast: less)')
}, },
forcedColorsVariants: ({ addVariant }) => {
addVariant('forced-colors', '@media (forced-colors: active)')
},
} }
let cssTransformValue = [ let cssTransformValue = [
@ -666,6 +693,8 @@ export let corePlugins = {
float: ({ addUtilities }) => { float: ({ addUtilities }) => {
addUtilities({ addUtilities({
'.float-start': { float: 'inline-start' },
'.float-end': { float: 'inline-end' },
'.float-right': { float: 'right' }, '.float-right': { float: 'right' },
'.float-left': { float: 'left' }, '.float-left': { float: 'left' },
'.float-none': { float: 'none' }, '.float-none': { float: 'none' },
@ -674,6 +703,8 @@ export let corePlugins = {
clear: ({ addUtilities }) => { clear: ({ addUtilities }) => {
addUtilities({ addUtilities({
'.clear-start': { clear: 'inline-start' },
'.clear-end': { clear: 'inline-end' },
'.clear-left': { clear: 'left' }, '.clear-left': { clear: 'left' },
'.clear-right': { clear: 'right' }, '.clear-right': { clear: 'right' },
'.clear-both': { clear: 'both' }, '.clear-both': { clear: 'both' },
@ -759,6 +790,8 @@ export let corePlugins = {
aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]), aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
size: createUtilityPlugin('size', [['size', ['width', 'height']]]),
height: createUtilityPlugin('height', [['h', ['height']]]), height: createUtilityPlugin('height', [['h', ['height']]]),
maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]), maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]), minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),
@ -1109,6 +1142,7 @@ export let corePlugins = {
appearance: ({ addUtilities }) => { appearance: ({ addUtilities }) => {
addUtilities({ addUtilities({
'.appearance-none': { appearance: 'none' }, '.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 }) => { wordBreak: ({ addUtilities }) => {
addUtilities({ addUtilities({
'.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' }, '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
@ -2852,4 +2895,10 @@ export let corePlugins = {
content: createUtilityPlugin('content', [ content: createUtilityPlugin('content', [
['content', ['--tw-content', ['content', 'var(--tw-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' },
})
},
} }

View file

@ -24,16 +24,19 @@
4. Use the user's configured `sans` font-family by default. 4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings 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. 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 */ line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */ -moz-tab-size: 4; /* 3 */
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-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
} }
/* /*

View file

@ -756,8 +756,10 @@ function resolvePlugins(context, root) {
// TODO: This is a workaround for backwards compatibility, since custom variants // TODO: This is a workaround for backwards compatibility, since custom variants
// were historically sorted before screen/stackable variants. // were historically sorted before screen/stackable variants.
let beforeVariants = [ let beforeVariants = [
variantPlugins['childVariant'],
variantPlugins['pseudoElementVariants'], variantPlugins['pseudoElementVariants'],
variantPlugins['pseudoClassVariants'], variantPlugins['pseudoClassVariants'],
variantPlugins['hasVariants'],
variantPlugins['ariaVariants'], variantPlugins['ariaVariants'],
variantPlugins['dataVariants'], variantPlugins['dataVariants'],
] ]
@ -766,6 +768,7 @@ function resolvePlugins(context, root) {
variantPlugins['directionVariants'], variantPlugins['directionVariants'],
variantPlugins['reducedMotionVariants'], variantPlugins['reducedMotionVariants'],
variantPlugins['prefersContrastVariants'], variantPlugins['prefersContrastVariants'],
variantPlugins['forcedColorsVariants'],
variantPlugins['darkVariants'], variantPlugins['darkVariants'],
variantPlugins['printVariant'], variantPlugins['printVariant'],
variantPlugins['screenVariants'], variantPlugins['screenVariants'],

View file

@ -303,13 +303,6 @@ module.exports = {
sans: [ sans: [
'ui-sans-serif', 'ui-sans-serif',
'system-ui', 'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif', 'sans-serif',
'"Apple Color Emoji"', '"Apple Color Emoji"',
'"Segoe UI Emoji"', '"Segoe UI Emoji"',
@ -451,6 +444,12 @@ module.exports = {
'span-4': 'span 4 / span 4', 'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5', 'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6', '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', 'span-full': '1 / -1',
}, },
gridRowEnd: { gridRowEnd: {
@ -462,6 +461,12 @@ module.exports = {
5: '5', 5: '5',
6: '6', 6: '6',
7: '7', 7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
}, },
gridRowStart: { gridRowStart: {
auto: 'auto', auto: 'auto',
@ -472,9 +477,16 @@ module.exports = {
5: '5', 5: '5',
6: '6', 6: '6',
7: '7', 7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
}, },
gridTemplateColumns: { gridTemplateColumns: {
none: 'none', none: 'none',
subgrid: 'subgrid',
1: 'repeat(1, minmax(0, 1fr))', 1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))',
@ -490,12 +502,19 @@ module.exports = {
}, },
gridTemplateRows: { gridTemplateRows: {
none: 'none', none: 'none',
subgrid: 'subgrid',
1: 'repeat(1, minmax(0, 1fr))', 1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, 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 }) => ({ height: ({ theme }) => ({
auto: 'auto', auto: 'auto',
@ -517,6 +536,9 @@ module.exports = {
'5/6': '83.333333%', '5/6': '83.333333%',
full: '100%', full: '100%',
screen: '100vh', screen: '100vh',
svh: '100svh',
lvh: '100lvh',
dvh: '100dvh',
min: 'min-content', min: 'min-content',
max: 'max-content', max: 'max-content',
fit: 'fit-content', fit: 'fit-content',
@ -621,13 +643,16 @@ module.exports = {
none: 'none', none: 'none',
full: '100%', full: '100%',
screen: '100vh', screen: '100vh',
svh: '100svh',
lvh: '100lvh',
dvh: '100dvh',
min: 'min-content', min: 'min-content',
max: 'max-content', max: 'max-content',
fit: 'fit-content', fit: 'fit-content',
}), }),
maxWidth: ({ theme, breakpoints }) => ({ maxWidth: ({ theme, breakpoints }) => ({
...theme('spacing'),
none: 'none', none: 'none',
0: '0rem',
xs: '20rem', xs: '20rem',
sm: '24rem', sm: '24rem',
md: '28rem', md: '28rem',
@ -646,21 +671,24 @@ module.exports = {
prose: '65ch', prose: '65ch',
...breakpoints(theme('screens')), ...breakpoints(theme('screens')),
}), }),
minHeight: { minHeight: ({ theme }) => ({
0: '0px', ...theme('spacing'),
full: '100%', full: '100%',
screen: '100vh', screen: '100vh',
svh: '100svh',
lvh: '100lvh',
dvh: '100dvh',
min: 'min-content', min: 'min-content',
max: 'max-content', max: 'max-content',
fit: 'fit-content', fit: 'fit-content',
}, }),
minWidth: { minWidth: ({ theme }) => ({
0: '0px', ...theme('spacing'),
full: '100%', full: '100%',
min: 'min-content', min: 'min-content',
max: 'max-content', max: 'max-content',
fit: 'fit-content', fit: 'fit-content',
}, }),
objectPosition: { objectPosition: {
bottom: 'bottom', bottom: 'bottom',
center: 'center', center: 'center',
@ -676,15 +704,21 @@ module.exports = {
0: '0', 0: '0',
5: '0.05', 5: '0.05',
10: '0.1', 10: '0.1',
15: '0.15',
20: '0.2', 20: '0.2',
25: '0.25', 25: '0.25',
30: '0.3', 30: '0.3',
35: '0.35',
40: '0.4', 40: '0.4',
45: '0.45',
50: '0.5', 50: '0.5',
55: '0.55',
60: '0.6', 60: '0.6',
65: '0.65',
70: '0.7', 70: '0.7',
75: '0.75', 75: '0.75',
80: '0.8', 80: '0.8',
85: '0.85',
90: '0.9', 90: '0.9',
95: '0.95', 95: '0.95',
100: '1', 100: '1',
@ -936,6 +970,40 @@ module.exports = {
'3/4': '75%', '3/4': '75%',
full: '100%', 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 }) => ({ width: ({ theme }) => ({
auto: 'auto', auto: 'auto',
...theme('spacing'), ...theme('spacing'),
@ -967,6 +1035,9 @@ module.exports = {
'11/12': '91.666667%', '11/12': '91.666667%',
full: '100%', full: '100%',
screen: '100vw', screen: '100vw',
svw: '100svw',
lvw: '100lvw',
dvw: '100dvw',
min: 'min-content', min: 'min-content',
max: 'max-content', max: 'max-content',
fit: 'fit-content', fit: 'fit-content',

View file

@ -845,6 +845,132 @@ crosscheck(({ stable, oxide }) => {
}) })
}) })
test('has-* variants with arbitrary values', () => {
let config = {
theme: {},
content: [
{
raw: html`
<div>
<figure class="has-[figcaption]:inline-block"></figure>
<div class="has-[.foo]:flex"></div>
<div class="has-[.foo:hover]:block"></div>
<div class="has-[[data-active]]:inline"></div>
<div class="has-[>_.potato]:table"></div>
<div class="has-[+_h2]:grid"></div>
<div class="has-[>_h1_+_h2]:contents"></div>
<div class="has-[h2]:has-[.banana]:hidden"></div>
</div>
`,
},
],
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`
<div class="group">
<div class="group-has-[>_h1_+_.foo]:block"></div>
</div>
<div class="group/two">
<div class="group-has-[>_h1_+_.foo]/two:flex"></div>
</div>
`,
},
],
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`
<div>
<div className="peer"></div>
<div class="peer-has-[>_h1_+_.foo]:block"></div>
</div>
<div>
<div className="peer"></div>
<div class="peer-has-[>_h1_+_.foo]/two:flex"></div>
</div>
`,
},
],
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', () => { it('should be possible to use modifiers and arbitrary groups', () => {
let config = { let config = {
content: [ content: [

View file

@ -201,15 +201,60 @@
.aspect-video { .aspect-video {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
.h-0 {
height: 0;
}
.h-16 { .h-16 {
height: 4rem; 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-h-screen {
max-height: 100vh; max-height: 100vh;
} }
.max-h-svh {
max-height: 100svh;
}
.min-h-0 { .min-h-0 {
min-height: 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 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -548,6 +593,15 @@
.whitespace-nowrap { .whitespace-nowrap {
white-space: nowrap; white-space: nowrap;
} }
.text-wrap {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-balance {
text-wrap: balance;
}
.break-words { .break-words {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -713,9 +767,8 @@
vertical-align: middle; vertical-align: middle;
} }
.font-sans { .font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Segoe UI Symbol, Noto Color Emoji;
Noto Color Emoji;
} }
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;

View file

@ -201,15 +201,60 @@
.aspect-video { .aspect-video {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
.h-0 {
height: 0;
}
.h-16 { .h-16 {
height: 4rem; 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-h-screen {
max-height: 100vh; max-height: 100vh;
} }
.max-h-svh {
max-height: 100svh;
}
.min-h-0 { .min-h-0 {
min-height: 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 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -552,6 +597,15 @@
.whitespace-nowrap { .whitespace-nowrap {
white-space: nowrap; white-space: nowrap;
} }
.text-wrap {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-balance {
text-wrap: balance;
}
.break-words { .break-words {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -731,9 +785,8 @@
vertical-align: middle; vertical-align: middle;
} }
.font-sans { .font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Segoe UI Symbol, Noto Color Emoji;
Noto Color Emoji;
} }
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;

View file

@ -91,9 +91,10 @@ crosscheck(({ stable, oxide, engine }) => {
<div class="list-disc"></div> <div class="list-disc"></div>
<div class="list-image-none"></div> <div class="list-image-none"></div>
<div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div> <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
<div class="max-h-screen"></div> <div class="h-0 h-full h-screen h-svh h-lvh h-dvh"></div>
<div class="max-h-0 max-h-full max-h-screen max-h-svh max-h-lvh max-h-dvh"></div>
<div class="max-w-full"></div> <div class="max-w-full"></div>
<div class="min-h-0"></div> <div class="min-h-0 min-h-full min-h-0 min-h-svh min-h-lvh min-h-dvh"></div>
<div class="min-w-min"></div> <div class="min-w-min"></div>
<div class="object-cover"></div> <div class="object-cover"></div>
<div class="object-bottom"></div> <div class="object-bottom"></div>
@ -192,6 +193,7 @@ crosscheck(({ stable, oxide, engine }) => {
<div class="invisible"></div> <div class="invisible"></div>
<div class="collapse"></div> <div class="collapse"></div>
<div class="whitespace-nowrap"></div> <div class="whitespace-nowrap"></div>
<div class="text-wrap text-balance text-nowrap"></div>
<div class="w-12"></div> <div class="w-12"></div>
<div class="break-words"></div> <div class="break-words"></div>
<div class="z-30"></div> <div class="z-30"></div>

View file

@ -97,15 +97,21 @@ crosscheck(() => {
'0', '0',
'5', '5',
'10', '10',
'15',
'20', '20',
'25', '25',
'30', '30',
'35',
'40', '40',
'45',
'50', '50',
'55',
'60', '60',
'65',
'70', '70',
'75', '75',
'80', '80',
'85',
'90', '90',
'95', '95',
'100', '100',

View file

@ -240,8 +240,7 @@ crosscheck(({ stable, oxide }) => {
stable.expect(result.css).toMatchFormattedCss(css` stable.expect(result.css).toMatchFormattedCss(css`
.theme-test { .theme-test {
color: #3b82f6; color: #3b82f6;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji; Segoe UI Symbol, Noto Color Emoji;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@ -813,8 +812,7 @@ crosscheck(({ stable, oxide }) => {
oxide.expect(result.css).toMatchFormattedCss(css` oxide.expect(result.css).toMatchFormattedCss(css`
.theme-test { .theme-test {
color: #3b82f6; color: #3b82f6;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji; Segoe UI Symbol, Noto Color Emoji;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {

View file

@ -512,9 +512,8 @@
vertical-align: middle; vertical-align: middle;
} }
.font-sans { .font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Segoe UI Symbol, Noto Color Emoji;
Noto Color Emoji;
} }
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;

View file

@ -524,9 +524,8 @@
vertical-align: middle; vertical-align: middle;
} }
.font-sans { .font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Segoe UI Symbol, Noto Color Emoji;
Noto Color Emoji;
} }
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;

View file

@ -150,7 +150,7 @@ crosscheck(() => {
'grey-lighter': '#f1f5f8', 'grey-lighter': '#f1f5f8',
}, },
fonts: { fonts: {
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], sans: ['system-ui', 'Roboto', 'sans-serif'],
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
}, },
screens: { screens: {
@ -176,7 +176,7 @@ crosscheck(() => {
'grey-lighter': '#f1f5f8', 'grey-lighter': '#f1f5f8',
}, },
fonts: { fonts: {
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], sans: ['system-ui', 'Roboto', 'sans-serif'],
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
}, },
screens: { screens: {

View file

@ -98,309 +98,310 @@ crosscheck(({ stable, oxide }) => {
'2:6-20 -> 19:2-18', '2:6-20 -> 19:2-18',
'2:20 -> 20:0', '2:20 -> 20:0',
'2:6 -> 22:0', '2:6 -> 22:0',
'2:20 -> 29:1', '2:20 -> 30:1',
'2:6 -> 31:0', '2:6 -> 32:0',
'2:6-20 -> 32:2-26',
'2:6-20 -> 33:2-40',
'2:6-20 -> 34:2-26', '2:6-20 -> 34:2-26',
'2:6-20 -> 35:2-21', '2:6-20 -> 35:2-40',
'2:6-20 -> 36:2-230', '2:6-20 -> 36:2-26',
'2:6-20 -> 37:2-39', '2:6-20 -> 37:2-21',
'2:6-20 -> 38:2-41', '2:6-20 -> 38:2-137',
'2:20 -> 39:0', '2:6-20 -> 39:2-39',
'2:6 -> 41:0', '2:6-20 -> 40:2-41',
'2:20 -> 44:1', '2:6-20 -> 41:2-50',
'2:6 -> 46:0', '2:20 -> 42:0',
'2:6-20 -> 47:2-19', '2:6 -> 44:0',
'2:6-20 -> 48:2-30', '2:20 -> 47:1',
'2:20 -> 49:0', '2:6 -> 49:0',
'2:6 -> 51:0', '2:6-20 -> 50:2-19',
'2:20 -> 55:1', '2:6-20 -> 51:2-30',
'2:6 -> 57:0', '2:20 -> 52:0',
'2:6-20 -> 58:2-19', '2:6 -> 54:0',
'2:6-20 -> 59:2-24', '2:20 -> 58:1',
'2:6-20 -> 60:2-31', '2:6 -> 60:0',
'2:20 -> 61:0', '2:6-20 -> 61:2-19',
'2:6 -> 63:0', '2:6-20 -> 62:2-24',
'2:20 -> 65:1', '2:6-20 -> 63:2-31',
'2:6 -> 67:0', '2:20 -> 64:0',
'2:6-20 -> 68:2-35', '2:6 -> 66:0',
'2:20 -> 69:0', '2:20 -> 68:1',
'2:6 -> 71:0', '2:6 -> 70:0',
'2:20 -> 73:1', '2:6-20 -> 71:2-35',
'2:6 -> 75:0', '2:20 -> 72:0',
'2:6-20 -> 81:2-20', '2:6 -> 74:0',
'2:6-20 -> 82:2-22', '2:20 -> 76:1',
'2:20 -> 83:0', '2:6 -> 78:0',
'2:6 -> 85:0', '2:6-20 -> 84:2-20',
'2:20 -> 87:1', '2:6-20 -> 85:2-22',
'2:6 -> 89:0', '2:20 -> 86:0',
'2:6-20 -> 90:2-16', '2:6 -> 88:0',
'2:6-20 -> 91:2-26', '2:20 -> 90:1',
'2:20 -> 92:0', '2:6 -> 92:0',
'2:6 -> 94:0', '2:6-20 -> 93:2-16',
'2:20 -> 96:1', '2:6-20 -> 94:2-26',
'2:6 -> 98:0', '2:20 -> 95:0',
'2:6-20 -> 100:2-21', '2:6 -> 97:0',
'2:20 -> 101:0', '2:20 -> 99:1',
'2:6 -> 103:0', '2:6 -> 101:0',
'2:20 -> 108:1', '2:6-20 -> 103:2-21',
'2:6 -> 110:0', '2:20 -> 104:0',
'2:6-20 -> 114:2-121', '2:6 -> 106:0',
'2:6-20 -> 115:2-39', '2:20 -> 111:1',
'2:6-20 -> 116:2-41', '2:6 -> 113:0',
'2:6-20 -> 117:2-24', '2:6-20 -> 117:2-121',
'2:20 -> 118:0', '2:6-20 -> 118:2-39',
'2:6 -> 120:0', '2:6-20 -> 119:2-41',
'2:20 -> 122:1', '2:6-20 -> 120:2-24',
'2:6 -> 124:0', '2:20 -> 121:0',
'2:6-20 -> 125:2-16', '2:6 -> 123:0',
'2:20 -> 126:0', '2:20 -> 125:1',
'2:6 -> 128:0', '2:6 -> 127:0',
'2:20 -> 130:1', '2:6-20 -> 128:2-16',
'2:6 -> 132:0', '2:20 -> 129:0',
'2:6-20 -> 134:2-16', '2:6 -> 131:0',
'2:6-20 -> 135:2-16', '2:20 -> 133:1',
'2:6-20 -> 136:2-20', '2:6 -> 135:0',
'2:6-20 -> 137:2-26', '2:6-20 -> 137:2-16',
'2:20 -> 138:0', '2:6-20 -> 138:2-16',
'2:6 -> 140:0', '2:6-20 -> 139:2-20',
'2:6-20 -> 141:2-17', '2:6-20 -> 140:2-26',
'2:20 -> 142:0', '2:20 -> 141:0',
'2:6 -> 144:0', '2:6 -> 143:0',
'2:6-20 -> 145:2-13', '2:6-20 -> 144:2-17',
'2:20 -> 146:0', '2:20 -> 145:0',
'2:6 -> 148:0', '2:6 -> 147:0',
'2:20 -> 152:1', '2:6-20 -> 148:2-13',
'2:6 -> 154:0', '2:20 -> 149:0',
'2:6-20 -> 155:2-24', '2:6 -> 151:0',
'2:6-20 -> 156:2-31', '2:20 -> 155:1',
'2:6-20 -> 157:2-35', '2:6 -> 157:0',
'2:20 -> 158:0', '2:6-20 -> 158:2-24',
'2:6 -> 160:0', '2:6-20 -> 159:2-31',
'2:20 -> 164:1', '2:6-20 -> 160:2-35',
'2:6 -> 166:0', '2:20 -> 161:0',
'2:6-20 -> 171:2-30', '2:6 -> 163:0',
'2:6-20 -> 172:2-40', '2:20 -> 167:1',
'2:6-20 -> 173:2-42', '2:6 -> 169:0',
'2:6-20 -> 174:2-25', '2:6-20 -> 174:2-30',
'2:6-20 -> 175:2-30', '2:6-20 -> 175:2-40',
'2:6-20 -> 176:2-30', '2:6-20 -> 176:2-42',
'2:6-20 -> 177:2-24', '2:6-20 -> 177:2-25',
'2:6-20 -> 178:2-19', '2:6-20 -> 178:2-30',
'2:6-20 -> 179:2-20', '2:6-20 -> 179:2-30',
'2:20 -> 180:0', '2:6-20 -> 180:2-24',
'2:6 -> 182:0', '2:6-20 -> 181:2-19',
'2:20 -> 184:1', '2:6-20 -> 182:2-20',
'2:6 -> 186:0', '2:20 -> 183:0',
'2:6-20 -> 188:2-22', '2:6 -> 185:0',
'2:20 -> 189:0', '2:20 -> 187:1',
'2:6 -> 191:0', '2:6 -> 189:0',
'2:20 -> 194:1', '2:6-20 -> 191:2-22',
'2:6 -> 196:0', '2:20 -> 192:0',
'2:6-20 -> 200:2-36', '2:6 -> 194:0',
'2:6-20 -> 201:2-39', '2:20 -> 197:1',
'2:6-20 -> 202:2-32', '2:6 -> 199:0',
'2:20 -> 203:0', '2:6-20 -> 203:2-36',
'2:6 -> 205:0', '2:6-20 -> 204:2-39',
'2:20 -> 207:1', '2:6-20 -> 205:2-32',
'2:6 -> 209:0', '2:20 -> 206:0',
'2:6-20 -> 210:2-15', '2:6 -> 208:0',
'2:20 -> 211:0', '2:20 -> 210:1',
'2:6 -> 213:0', '2:6 -> 212:0',
'2:20 -> 215:1', '2:6-20 -> 213:2-15',
'2:6 -> 217:0', '2:20 -> 214:0',
'2:6-20 -> 218:2-18', '2:6 -> 216:0',
'2:20 -> 219:0', '2:20 -> 218:1',
'2:6 -> 221:0', '2:6 -> 220:0',
'2:20 -> 223:1', '2:6-20 -> 221:2-18',
'2:6 -> 225:0', '2:20 -> 222:0',
'2:6-20 -> 226:2-26', '2:6 -> 224:0',
'2:20 -> 227:0', '2:20 -> 226:1',
'2:6 -> 229:0', '2:6 -> 228:0',
'2:20 -> 231:1', '2:6-20 -> 229:2-26',
'2:6 -> 233:0', '2:20 -> 230:0',
'2:6-20 -> 235:2-14', '2:6 -> 232:0',
'2:20 -> 236:0', '2:20 -> 234:1',
'2:6 -> 238:0', '2:6 -> 236:0',
'2:20 -> 241:1', '2:6-20 -> 238:2-14',
'2:6 -> 243:0', '2:20 -> 239:0',
'2:6-20 -> 244:2-39', '2:6 -> 241:0',
'2:6-20 -> 245:2-30', '2:20 -> 244:1',
'2:20 -> 246:0', '2:6 -> 246:0',
'2:6 -> 248:0', '2:6-20 -> 247:2-39',
'2:20 -> 250:1', '2:6-20 -> 248:2-30',
'2:6 -> 252:0', '2:20 -> 249:0',
'2:6-20 -> 253:2-26', '2:6 -> 251:0',
'2:20 -> 254:0', '2:20 -> 253:1',
'2:6 -> 256:0', '2:6 -> 255:0',
'2:20 -> 259:1', '2:6-20 -> 256:2-26',
'2:6 -> 261:0', '2:20 -> 257:0',
'2:6-20 -> 262:2-36', '2:6 -> 259:0',
'2:6-20 -> 263:2-23', '2:20 -> 262:1',
'2:20 -> 264:0', '2:6 -> 264:0',
'2:6 -> 266:0', '2:6-20 -> 265:2-36',
'2:20 -> 268:1', '2:6-20 -> 266:2-23',
'2:6 -> 270:0', '2:20 -> 267:0',
'2:6-20 -> 271:2-20', '2:6 -> 269:0',
'2:20 -> 272:0', '2:20 -> 271:1',
'2:6 -> 274:0', '2:6 -> 273:0',
'2:20 -> 276:1', '2:6-20 -> 274:2-20',
'2:6 -> 278:0', '2:20 -> 275:0',
'2:6-20 -> 291:2-11', '2:6 -> 277:0',
'2:20 -> 292:0', '2:20 -> 279:1',
'2:6 -> 294:0', '2:6 -> 281:0',
'2:6-20 -> 295:2-11', '2:6-20 -> 294:2-11',
'2:6-20 -> 296:2-12', '2:20 -> 295:0',
'2:20 -> 297:0', '2:6 -> 297:0',
'2:6 -> 299:0', '2:6-20 -> 298:2-11',
'2:6-20 -> 300:2-12', '2:6-20 -> 299:2-12',
'2:20 -> 301:0', '2:20 -> 300:0',
'2:6 -> 303:0', '2:6 -> 302:0',
'2:6-20 -> 306:2-18', '2:6-20 -> 303:2-12',
'2:6-20 -> 307:2-11', '2:20 -> 304:0',
'2:6-20 -> 308:2-12', '2:6 -> 306:0',
'2:20 -> 309:0', '2:6-20 -> 309:2-18',
'2:6 -> 311:0', '2:6-20 -> 310:2-11',
'2:20 -> 313:1', '2:6-20 -> 311:2-12',
'2:20 -> 312:0',
'2:6 -> 314:0', '2:6 -> 314:0',
'2:6-20 -> 315:2-12', '2:20 -> 316:1',
'2:20 -> 316:0', '2:6 -> 317:0',
'2:6 -> 318:0', '2:6-20 -> 318:2-12',
'2:20 -> 320:1', '2:20 -> 319:0',
'2:6 -> 322:0', '2:6 -> 321:0',
'2:6-20 -> 323:2-18', '2:20 -> 323:1',
'2:20 -> 324:0', '2:6 -> 325:0',
'2:6 -> 326:0', '2:6-20 -> 326:2-18',
'2:20 -> 329:1', '2:20 -> 327:0',
'2:6 -> 331:0', '2:6 -> 329:0',
'2:6-20 -> 333:2-20', '2:20 -> 332:1',
'2:6-20 -> 334:2-24', '2:6 -> 334:0',
'2:20 -> 335:0', '2:6-20 -> 336:2-20',
'2:6 -> 337:0', '2:6-20 -> 337:2-24',
'2:20 -> 339:1', '2:20 -> 338:0',
'2:6 -> 341:0', '2:6 -> 340:0',
'2:6-20 -> 343:2-17', '2:20 -> 342:1',
'2:20 -> 344:0', '2:6 -> 344:0',
'2:6 -> 346:0', '2:6-20 -> 346:2-17',
'2:20 -> 348:1', '2:20 -> 347:0',
'2:6 -> 349:0', '2:6 -> 349:0',
'2:6-20 -> 350:2-17', '2:20 -> 351:1',
'2:20 -> 351:0', '2:6 -> 352:0',
'2:6 -> 353:0', '2:6-20 -> 353:2-17',
'2:20 -> 357:1', '2:20 -> 354:0',
'2:6 -> 359:0', '2:6 -> 356:0',
'2:6-20 -> 367:2-24', '2:20 -> 360:1',
'2:6-20 -> 368:2-32', '2:6 -> 362:0',
'2:20 -> 369:0', '2:6-20 -> 370:2-24',
'2:6 -> 371:0', '2:6-20 -> 371:2-32',
'2:20 -> 373:1', '2:20 -> 372:0',
'2:6 -> 375:0', '2:6 -> 374:0',
'2:6-20 -> 377:2-17', '2:20 -> 376:1',
'2:6-20 -> 378:2-14', '2:6 -> 378:0',
'2:20 -> 379:0', '2:6-20 -> 380:2-17',
'2:6-20 -> 381:0-72', '2:6-20 -> 381:2-14',
'2:6 -> 382:0', '2:20 -> 382:0',
'2:6-20 -> 383:2-15', '2:6-20 -> 384:0-72',
'2:20 -> 384:0', '2:6 -> 385:0',
'2:6 -> 386:0', '2:6-20 -> 386:2-15',
'2:6-20 -> 387:2-26', '2:20 -> 387:0',
'2:6-20 -> 388:2-26', '2:6 -> 389:0',
'2:6-20 -> 389:2-21', '2:6-20 -> 390:2-26',
'2:6-20 -> 390:2-21', '2:6-20 -> 391:2-26',
'2:6-20 -> 391:2-16', '2:6-20 -> 392:2-21',
'2:6-20 -> 392:2-16', '2:6-20 -> 393:2-21',
'2:6-20 -> 393:2-16', '2:6-20 -> 394:2-16',
'2:6-20 -> 394:2-17', '2:6-20 -> 395:2-16',
'2:6-20 -> 395:2-17', '2:6-20 -> 396:2-16',
'2:6-20 -> 396:2-15', '2:6-20 -> 397:2-17',
'2:6-20 -> 397:2-15', '2:6-20 -> 398:2-17',
'2:6-20 -> 398:2-20', '2:6-20 -> 399:2-15',
'2:6-20 -> 399:2-40', '2:6-20 -> 400:2-15',
'2:6-20 -> 400:2-32', '2:6-20 -> 401:2-20',
'2:6-20 -> 401:2-31', '2:6-20 -> 402:2-40',
'2:6-20 -> 402:2-30', '2:6-20 -> 403:2-32',
'2:6-20 -> 403:2-17', '2:6-20 -> 404:2-31',
'2:6-20 -> 404:2-22', '2:6-20 -> 405:2-30',
'2:6-20 -> 405:2-24', '2:6-20 -> 406:2-17',
'2:6-20 -> 406:2-25', '2:6-20 -> 407:2-22',
'2:6-20 -> 407:2-26', '2:6-20 -> 408:2-24',
'2:6-20 -> 408:2-20', '2:6-20 -> 409:2-25',
'2:6-20 -> 409:2-29', '2:6-20 -> 410:2-26',
'2:6-20 -> 410:2-30', '2:6-20 -> 411:2-20',
'2:6-20 -> 411:2-40', '2:6-20 -> 412:2-29',
'2:6-20 -> 412:2-36', '2:6-20 -> 413:2-30',
'2:6-20 -> 413:2-29', '2:6-20 -> 414:2-40',
'2:6-20 -> 414:2-24', '2:6-20 -> 415:2-36',
'2:6-20 -> 415:2-32', '2:6-20 -> 416:2-29',
'2:6-20 -> 416:2-14', '2:6-20 -> 417:2-24',
'2:6-20 -> 417:2-20', '2:6-20 -> 418:2-32',
'2:6-20 -> 418:2-18', '2:6-20 -> 419:2-14',
'2:6-20 -> 419:2-19',
'2:6-20 -> 420:2-20', '2:6-20 -> 420:2-20',
'2:6-20 -> 421:2-16', '2:6-20 -> 421:2-18',
'2:6-20 -> 422:2-18', '2:6-20 -> 422:2-19',
'2:6-20 -> 423:2-15', '2:6-20 -> 423:2-20',
'2:6-20 -> 424:2-21', '2:6-20 -> 424:2-16',
'2:6-20 -> 425:2-23', '2:6-20 -> 425:2-18',
'2:6-20 -> 426:2-29', '2:6-20 -> 426:2-15',
'2:6-20 -> 427:2-27', '2:6-20 -> 427:2-21',
'2:6-20 -> 428:2-28', '2:6-20 -> 428:2-23',
'2:6-20 -> 429:2-29', '2:6-20 -> 429:2-29',
'2:6-20 -> 430:2-25', '2:6-20 -> 430:2-27',
'2:6-20 -> 431:2-26', '2:6-20 -> 431:2-28',
'2:6-20 -> 432:2-27', '2:6-20 -> 432:2-29',
'2:6 -> 433:2', '2:6-20 -> 433:2-25',
'2:20 -> 434:0', '2:6-20 -> 434:2-26',
'2:6 -> 436:0', '2:6-20 -> 435:2-27',
'2:6-20 -> 437:2-26', '2:6 -> 436:2',
'2:6-20 -> 438:2-26', '2:20 -> 437:0',
'2:6-20 -> 439:2-21', '2:6 -> 439:0',
'2:6-20 -> 440:2-21', '2:6-20 -> 440:2-26',
'2:6-20 -> 441:2-16', '2:6-20 -> 441:2-26',
'2:6-20 -> 442:2-16', '2:6-20 -> 442:2-21',
'2:6-20 -> 443:2-16', '2:6-20 -> 443:2-21',
'2:6-20 -> 444:2-17', '2:6-20 -> 444:2-16',
'2:6-20 -> 445:2-17', '2:6-20 -> 445:2-16',
'2:6-20 -> 446:2-15', '2:6-20 -> 446:2-16',
'2:6-20 -> 447:2-15', '2:6-20 -> 447:2-17',
'2:6-20 -> 448:2-20', '2:6-20 -> 448:2-17',
'2:6-20 -> 449:2-40', '2:6-20 -> 449:2-15',
'2:6-20 -> 450:2-32', '2:6-20 -> 450:2-15',
'2:6-20 -> 451:2-31', '2:6-20 -> 451:2-20',
'2:6-20 -> 452:2-30', '2:6-20 -> 452:2-40',
'2:6-20 -> 453:2-17', '2:6-20 -> 453:2-32',
'2:6-20 -> 454:2-22', '2:6-20 -> 454:2-31',
'2:6-20 -> 455:2-24', '2:6-20 -> 455:2-30',
'2:6-20 -> 456:2-25', '2:6-20 -> 456:2-17',
'2:6-20 -> 457:2-26', '2:6-20 -> 457:2-22',
'2:6-20 -> 458:2-20', '2:6-20 -> 458:2-24',
'2:6-20 -> 459:2-29', '2:6-20 -> 459:2-25',
'2:6-20 -> 460:2-30', '2:6-20 -> 460:2-26',
'2:6-20 -> 461:2-40', '2:6-20 -> 461:2-20',
'2:6-20 -> 462:2-36', '2:6-20 -> 462:2-29',
'2:6-20 -> 463:2-29', '2:6-20 -> 463:2-30',
'2:6-20 -> 464:2-24', '2:6-20 -> 464:2-40',
'2:6-20 -> 465:2-32', '2:6-20 -> 465:2-36',
'2:6-20 -> 466:2-14', '2:6-20 -> 466:2-29',
'2:6-20 -> 467:2-20', '2:6-20 -> 467:2-24',
'2:6-20 -> 468:2-18', '2:6-20 -> 468:2-32',
'2:6-20 -> 469:2-19', '2:6-20 -> 469:2-14',
'2:6-20 -> 470:2-20', '2:6-20 -> 470:2-20',
'2:6-20 -> 471:2-16', '2:6-20 -> 471:2-18',
'2:6-20 -> 472:2-18', '2:6-20 -> 472:2-19',
'2:6-20 -> 473:2-15', '2:6-20 -> 473:2-20',
'2:6-20 -> 474:2-21', '2:6-20 -> 474:2-16',
'2:6-20 -> 475:2-23', '2:6-20 -> 475:2-18',
'2:6-20 -> 476:2-29', '2:6-20 -> 476:2-15',
'2:6-20 -> 477:2-27', '2:6-20 -> 477:2-21',
'2:6-20 -> 478:2-28', '2:6-20 -> 478:2-23',
'2:6-20 -> 479:2-29', '2:6-20 -> 479:2-29',
'2:6-20 -> 480:2-25', '2:6-20 -> 480:2-27',
'2:6-20 -> 481:2-26', '2:6-20 -> 481:2-28',
'2:6-20 -> 482:2-27', '2:6-20 -> 482:2-29',
'2:6 -> 483:2', '2:6-20 -> 483:2-25',
'2:20 -> 484:0', '2:6-20 -> 484:2-26',
'2:6-20 -> 485:2-27',
'2:6 -> 486:2',
'2:20 -> 487:0',
]) ])
}) })

View file

@ -1201,4 +1201,38 @@ crosscheck(({ stable, oxide }) => {
} }
`) `)
}) })
test('* is matched by the parser as the children variant', async () => {
let config = {
content: [
{
raw: html`
<div class="*:italic" />
<div class="*:hover:italic" />
<div class="hover:*:italic" />
<div class="data-[slot=label]:*:hover:italic" />
<div class="[&_p]:*:hover:italic" />
`,
},
],
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;
}
`)
})
}) })