From a0b8de8508329ecc50e65567edb09a4d761a7a56 Mon Sep 17 00:00:00 2001 From: Eloy Espinaco Date: Fri, 28 Jun 2024 10:41:10 -0300 Subject: [PATCH 1/4] Add simplified any parent variant (in-{modifier}) Add support for "in" that works like the group variant, but use any parent (so it does not require an explicit group element). --- src/corePlugins.js | 1 + tests/arbitrary-variants.test.js | 52 ++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index be2a106c2333..122a6c55c759 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -153,6 +153,7 @@ export let variantPlugins = { } let variants = { + in: (_) => ['', ' &'], group: (_, { modifier }) => modifier ? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &'] diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 0ab9e234c336..82dceca0b204 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -910,6 +910,58 @@ test('peer-has-* variants with arbitrary values', () => { }) }) +it('should be possible to use modifiers with in', () => { + let config = { + content: [ + { + raw: html` +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + :hover .in-hover\:underline, + :focus .in-\[\&\:focus\]\:underline, + [data-open] .in-\[\&\[data-open\]\]\:underline, + .foo .in-\[\.foo\]\:underline, + .foo .in-\[\.foo_\&\]\:underline, + :hover .in-\[\:hover\]\:underline, + [data-open] .in-\[\[data-open\]\]\:underline { + text-decoration-line: underline; + } + `) + }) +}) + it('should be possible to use modifiers and arbitrary groups', () => { let config = { content: [ From ecd67db1e23d89a55c0d118395d01c565d085721 Mon Sep 17 00:00:00 2001 From: Eloy Espinaco Date: Fri, 28 Jun 2024 10:58:50 -0300 Subject: [PATCH 2/4] Add support for in-data --- src/corePlugins.js | 3 +++ tests/arbitrary-variants.test.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index 122a6c55c759..bfda78e107ac 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -494,6 +494,9 @@ export let variantPlugins = { dataVariants: ({ matchVariant, theme }) => { matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} }) + matchVariant('in-data', (value) => `[data-${normalize(value)}] &`, { + values: theme('data') ?? {}, + }) matchVariant( 'group-data', (value, { modifier }) => diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 82dceca0b204..a5ccf7d9387f 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -659,10 +659,12 @@ it('should support data variants', () => {
+
+
@@ -686,6 +688,8 @@ it('should support data variants', () => { .data-checked\:underline[data-ui~='checked'], .data-\[foo\=\'bar_baz\'\]\:underline[data-foo='bar baz'], .data-\[position\=top\]\:underline[data-position='top'], + [data-ui~='checked'] .in-data-checked\:underline, + [data-position='top'] .in-data-\[position\=top\]\:underline, .group\/foo[data-ui~='checked'] .group-data-checked\/foo\:underline, .group[data-ui~='checked'] .group-data-checked\:underline, .group[data-foo='bar baz'] .group-data-\[foo\=\'bar_baz\'\]\:underline, From b3fc2349b8b44ba842c222ef19141ed1082d7bec Mon Sep 17 00:00:00 2001 From: Eloy Espinaco Date: Fri, 28 Jun 2024 11:04:20 -0300 Subject: [PATCH 3/4] Add in-aria support --- src/corePlugins.js | 3 +++ tests/arbitrary-variants.test.js | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index bfda78e107ac..2ab12cee3927 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -474,6 +474,9 @@ export let variantPlugins = { ariaVariants: ({ matchVariant, theme }) => { matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) + matchVariant('in-aria', (value) => `[aria-${normalize(value)}] &`, { + values: theme('aria') ?? {}, + }) matchVariant( 'group-aria', (value, { modifier }) => diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index a5ccf7d9387f..f7baddfa8e4f 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -602,12 +602,15 @@ it('should support aria variants', () => {
+
+
+
@@ -629,6 +632,9 @@ it('should support aria variants', () => { .aria-checked\:underline[aria-checked='true'], .aria-\[labelledby\=\'a_b\'\]\:underline[aria-labelledby='a b'], .aria-\[sort\=ascending\]\:underline[aria-sort='ascending'], + [aria-checked='true'] .in-aria-checked\:underline, + [aria-labelledby='a b'] .in-aria-\[labelledby\=\'a_b\'\]\:underline, + [aria-sort='ascending'] .in-aria-\[sort\=ascending\]\:underline, .group\/foo[aria-checked='true'] .group-aria-checked\/foo\:underline, .group[aria-checked='true'] .group-aria-checked\:underline, .group[aria-labelledby='a b'] .group-aria-\[labelledby\=\'a_b\'\]\:underline, From 266ba40e9b66ba607a4021b27576cc65fb118c2f Mon Sep 17 00:00:00 2001 From: Eloy Espinaco Date: Fri, 28 Jun 2024 11:10:30 -0300 Subject: [PATCH 4/4] Add in-has support --- src/corePlugins.js | 7 +++++++ tests/arbitrary-variants.test.js | 24 ++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index 2ab12cee3927..9756bf3a453d 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -443,6 +443,13 @@ export let variantPlugins = { }, }) + matchVariant('in-has', (value) => `:has(${normalize(value)}) &`, { + values: {}, + [INTERNAL_FEATURES]: { + respectPrefix: false, + }, + }) + matchVariant( 'group-has', (value, { modifier }) => diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index f7baddfa8e4f..6124ba9e6fa7 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -850,6 +850,30 @@ test('has-* variants with arbitrary values', () => { }) }) +test('in-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(> h1 + .foo) .in-has-\[\>_h1_\+_\.foo\]\:block { + display: block; + } + `) + }) +}) + test('group-has-* variants with arbitrary values', () => { let config = { theme: {},