Add * variant for targeting direct children (#12551)

* add `*` as child variant

* add `*` as allowed variant character

* update test to reflect Lightning CSS output

* add `childVariant` test

* Update changelog

---------

Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>
Co-authored-by: Gregor Kaczmarczyk <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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))
+- Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551))
 
 ### Changed
 

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.: '<sm'
                 // | '<' | '>' | '$' | '^' | '_'
@@ -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);

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')

src/lib/setupContextUtils.js

@@ -756,6 +756,7 @@ 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'],

tests/variants.test.js

@@ -1201,4 +1201,37 @@ 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;
+      }
+    `)
+  })
 })