BREAKING: Remove child-{psuedo-class} custom variants.

Author: Sam Goody

README.md

@@ -278,6 +278,19 @@ I might eventually implement it, even though it is not a tailwind style rule at
 
 ## Changes from earlier versions.
 
+[Modifiers such as :hover](https://tailwindcss.com/docs/hover-focus-and-other-states) must be set *first* (eg. hover:child:shadow) for it [to be applied to the children](https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers).
+
+In earlier versions, we created custom variants for all modifiers, so that you can use the form `child-hover`, which is easier to read, and matches group and peer:
+
+```html
+<input class="peer">
+<p class="peer-hover:shadow">p has shadow when hovering on input</p>
+
+<div class="group">
+    <p class="group-hover:shadow">p has shadow when hovering over div</p>
+</div>
+```
+
 #### Matching selector on child
 
 Earlier versions limitted matching children to those havng a class `.child`.  

dist/index.js

@@ -29,63 +29,7 @@ const aliases = Object.entries({
   "&": ["heir", "descendant"],
   "& ~": ["sibling", "twin"]
 });
-const psuedo = [
-  ...[
-    "active",
-    "focus",
-    "focus-within",
-    "focus-visible",
-    "hover",
-    "disabled",
-    "first-of-type",
-    "last-of-type",
-    "only-of-type",
-    "autofill",
-    "checked",
-    "default",
-    "indeterminate",
-    "placeholder-shown",
-    "required",
-    "valid",
-    "invalid",
-    "in-range",
-    "out-of-range",
-    "read-only",
-    "empty",
-    "visited",
-    "target"
-  ].map((v) => [v, v]),
-  ...[
-    "before",
-    "after",
-    "first-letter",
-    "first-line",
-    "marker",
-    "selection",
-    "placeholder"
-  ].map((v) => [v, `:${v}`]),
-  ...[
-    ["open", "open"],
-    ["rtl", 'dir="rtl"'],
-    ["ltr", 'dir="ltr"']
-  ].map((v) => [v[0], "", `[${v[1]}]`]),
-  ...[
-    ["first", "first-child"],
-    ["last", "last-child"],
-    ["only", "only-child"],
-    ["odd", "nth-child(odd)"],
-    ["even", "nth-child(even)"],
-    ["not-first", "not(:first-child)"],
-    ["not-last", "not(:last-child)"],
-    ["file", "file-selector-button"]
-  ]
-];
-let variants = psuedo.flatMap(([pstate, pclass, pselector]) => aliases.flatMap(([prefix, newvariants]) => newvariants.map((newvariant) => [
-  `${newvariant}-${pstate}`,
-  `${prefix} .${newvariant}` + (pselector || `:${pclass}`)
-])));
-let basic = aliases.flatMap(([k, v]) => v.map((i) => [i, `${k} :where(:not(.not-${i}))`]));
-variants.unshift(...basic);
+let variants = aliases.flatMap(([k, v]) => v.map((i) => [i, `${k} :where(:not(.not-${i}))`]));
 const els = [
   "address",
   "article",

src/index.mjs

@@ -6,49 +6,9 @@ const aliases = Object.entries({
     ":where(&) ~ ": ['sibling', 'twin'],
     })
 
-// Handle all tailwind psuedoclasses, see:
-// https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference
-const psuedo = [
-    ... [
-        'active', 'focus', 'focus-within', 'focus-visible', 'hover', 'disabled',  // Interactive
-        'first-of-type', 'last-of-type', 'only-of-type',                          // Positional
-        'autofill', 'checked', 'default', 'indeterminate', 'placeholder-shown',   // Forms
-        'required', 'valid', 'invalid', 'in-range', 'out-of-range', 'read-only',  // Forms
-        'empty', 'visited', 'target',                                             // State
-        ].map(v => [v, v]),
-    ... [ // Pseudo-elements
-        'before', 'after', 'first-letter', 'first-line', 'marker', 'selection', 'placeholder'
-        ].map(v => [v, `:${v}`]),
-    ... [ // Attributes
-        ['open', 'open'],
-        ['rtl', 'dir="rtl"'],
-        ['ltr', 'dir="ltr"'],
-        ].map(v => [v[0], '', `[${v[1]}]`]),
-    ... [ // Positional
-        ['first', 'first-child'],
-        ['last', 'last-child'],
-        ['only', 'only-child'],
-        ['odd', 'nth-child(odd)'],
-        ['even', 'nth-child(even)'],
-        ['not-first', 'not(:first-child)'],
-        ['not-last', 'not(:last-child)'],
-        ['file', 'file-selector-button'],
-        ],
-    ]
-
-// convert ['hover', 'hover'] -> ['children-hover', '& > .children:hover']
-let variants = psuedo.flatMap(([pstate, pclass, pselector]) =>
-    aliases.flatMap(([prefix, newvariants]) =>
-        newvariants.map(newvariant => [
-            `${newvariant}-${pstate}`,
-            `${prefix} :where(.${newvariant}` + (pselector || `:${pclass}`) + ')'
-            ])))
-
-let basic = aliases
+let variants = aliases
     .flatMap(([k, v]) => v.map(i => [i, `${k} :where(:not(.not-${i}))`]));
 
-variants.unshift(...basic);
-
 // list of elements from https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 // For each of these we do not need explicit sign-in
 const els = [