support labeled groups and peers

tw-in-js · Dec 13, 2022 · 6e64c33 · 6e64c33
1 parent 7f72cb0
commit 6e64c33
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 11 deletions.
diff --git a/.changeset/fuzzy-chefs-dance.md b/.changeset/fuzzy-chefs-dance.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': minor
+---
+
+support labeled groups and peers
diff --git a/packages/preset-tailwind/package.json b/packages/preset-tailwind/package.json
@@ -35,7 +35,7 @@
       "name": "@twind/preset-tailwind",
       "path": "dist/preset-tailwind.esnext.js",
       "brotli": true,
-      "limit": "9.3kb",
+      "limit": "9.4kb",
       "ignore": [
         "twind"
       ]

diff --git a/packages/preset-tailwind/src/defaultTheme.ts b/packages/preset-tailwind/src/defaultTheme.ts
@@ -21,7 +21,7 @@ export type OmitedSections =
   | 'objectPosition'
   | 'transformOrigin'
 
-  export type StableSections =
+export type StableSections =
   | 'screens'
   | 'columns'
   | 'spacing'

diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -2120,16 +2120,24 @@
   "aria-[sort=ascending]:underline": ".aria-\\[sort\\=ascending\\]\\:underline[aria-sort=ascending]{text-decoration-line:underline}",
   "group-aria-checked:underline": ".group[aria-checked=\"true\"] .group-aria-checked\\:underline{text-decoration-line:underline}",
   "peer-aria-checked:underline": ".peer[aria-checked=\"true\"]~.peer-aria-checked\\:underline{text-decoration-line:underline}",
+  "group-aria-checked/foo:underline": ".group\\/foo[aria-checked=\"true\"] .group-aria-checked\\/foo\\:underline{text-decoration-line:underline}",
+  "peer-aria-checked/foo:underline": ".peer\\/foo[aria-checked=\"true\"]~.peer-aria-checked\\/foo\\:underline{text-decoration-line:underline}",
   "group-aria-[sort=ascending]:underline": ".group[aria-sort=ascending] .group-aria-\\[sort\\=ascending\\]\\:underline{text-decoration-line:underline}",
   "peer-aria-[sort=ascending]:underline": ".peer[aria-sort=ascending]~.peer-aria-\\[sort\\=ascending\\]\\:underline{text-decoration-line:underline}",
+  "group-aria-[sort=ascending]/foo:underline": ".group\\/foo[aria-sort=ascending] .group-aria-\\[sort\\=ascending\\]\\/foo\\:underline{text-decoration-line:underline}",
+  "peer-aria-[sort=ascending]/foo:underline": ".peer\\/foo[aria-sort=ascending]~.peer-aria-\\[sort\\=ascending\\]\\/foo\\:underline{text-decoration-line:underline}",
   "aria-asc:underline": ".aria-asc\\:underline[aria-sort=\"ascending\"]{text-decoration-line:underline}",
   "aria-desc:underline": ".aria-desc\\:underline[aria-sort=\"descending\"]{text-decoration-line:underline}",
   "data-checked:underline": ".data-checked\\:underline[data-ui~=\"checked\"]{text-decoration-line:underline}",
   "data-[position=top]:underline": ".data-\\[position\\=top\\]\\:underline[data-position=top]{text-decoration-line:underline}",
   "group-data-checked:underline": ".group[data-ui~=\"checked\"] .group-data-checked\\:underline{text-decoration-line:underline}",
   "peer-data-checked:underline": ".peer[data-ui~=\"checked\"]~.peer-data-checked\\:underline{text-decoration-line:underline}",
+  "group-data-checked/foo:underline": ".group\\/foo[data-ui~=\"checked\"] .group-data-checked\\/foo\\:underline{text-decoration-line:underline}",
+  "peer-data-checked/foo:underline": ".peer\\/foo[data-ui~=\"checked\"]~.peer-data-checked\\/foo\\:underline{text-decoration-line:underline}",
   "group-data-[position=top]:underline": ".group[data-position=top] .group-data-\\[position\\=top\\]\\:underline{text-decoration-line:underline}",
   "peer-data-[position=top]:underline": ".peer[data-position=top]~.peer-data-\\[position\\=top\\]\\:underline{text-decoration-line:underline}",
+  "group-data-[position=top]/foo:underline": ".group\\/foo[data-position=top] .group-data-\\[position\\=top\\]\\/foo\\:underline{text-decoration-line:underline}",
+  "peer-data-[position=top]/foo:underline": ".peer\\/foo[data-position=top]~.peer-data-\\[position\\=top\\]\\/foo\\:underline{text-decoration-line:underline}",
   "aria-[labelledby=a_b]:underline": ".aria-\\[labelledby\\=a_b\\]\\:underline[aria-labelledby=a b]{text-decoration-line:underline}",
   "group-aria-[labelledby=a_b]:underline": ".group[aria-labelledby=a b] .group-aria-\\[labelledby\\=a_b\\]\\:underline{text-decoration-line:underline}",
   "peer-aria-[labelledby=a_b]:underline": ".peer[aria-labelledby=a b]~.peer-aria-\\[labelledby\\=a_b\\]\\:underline{text-decoration-line:underline}",

diff --git a/packages/preset-tailwind/src/rules.test.ts b/packages/preset-tailwind/src/rules.test.ts
@@ -302,6 +302,22 @@ test('group and peer marker classes', () => {
   assert.deepEqual(tw.target, [
     '.peer\\~name:focus-visible~.peer\\~name-focus-visible\\:underline{text-decoration-line:underline}',
   ])
+
+  tw.clear()
+
+  assert.strictEqual(tw('group/label'), 'group/label')
+  assert.strictEqual(tw('group[disabled]/label:underline'), 'group[disabled]/label:underline')
+  assert.deepEqual(tw.target, [
+    '.group\\/label[disabled] .group\\[disabled\\]\\/label\\:underline{text-decoration-line:underline}',
+  ])
+
+  tw.clear()
+
+  assert.strictEqual(tw('peer/label'), 'peer/label')
+  assert.strictEqual(tw('peer-focus-visible/label:underline'), 'peer-focus-visible/label:underline')
+  assert.deepEqual(tw.target, [
+    '.peer\\/label:focus-visible~.peer-focus-visible\\/label\\:underline{text-decoration-line:underline}',
+  ])
 })
 
 test('group and peer hashed marker classes', () => {
@@ -334,6 +350,20 @@ test('group and peer hashed marker classes', () => {
   assert.strictEqual(tw('peer~name'), '#1krcwoi')
   assert.strictEqual(tw('peer~name[disabled]:underline'), '#1tsl4h5')
   assert.deepEqual(tw.target, ['.\\#1krcwoi[disabled]~.\\#1tsl4h5{text-decoration-line:underline}'])
+
+  tw.clear()
+
+  assert.strictEqual(tw('group/label'), '#ooal8')
+  assert.strictEqual(tw('group[disabled]/label:underline'), '#v0jdie')
+  assert.deepEqual(tw.target, ['.\\#ooal8[disabled] .\\#v0jdie{text-decoration-line:underline}'])
+
+  tw.clear()
+
+  assert.strictEqual(tw('peer/label'), '#1wrxcbs')
+  assert.strictEqual(tw('peer-focus-visible/label:underline'), '#skcvd2')
+  assert.deepEqual(tw.target, [
+    '.\\#1wrxcbs:focus-visible~.\\#skcvd2{text-decoration-line:underline}',
+  ])
 })
 
 test('arbitrary variants with @apply', () => {

diff --git a/packages/preset-tailwind/src/rules.ts b/packages/preset-tailwind/src/rules.ts
@@ -57,7 +57,7 @@ const rules: Rule<TailwindTheme>[] = [
 
   /* Styling based on parent and peer state */
   withAutocomplete$(
-    match('(group|peer)(~[^-[]+)?', ({ input }, { h }) => [{ c: h(input) }]),
+    match('(group|peer)([~/][^-[]+)?', ({ input }, { h }) => [{ c: h(input) }]),
     DEV && (() => ['group', 'peer']),
   ),
 

diff --git a/packages/preset-tailwind/src/variants.ts b/packages/preset-tailwind/src/variants.ts
@@ -94,24 +94,34 @@ const variants: Variant<TailwindTheme>[] = [
   // these need to add a marker selector with the pseudo class
   // => '.group:focus .group-focus:selector'
   [
-    '((group|peer)(~[^-[]+)?)(-[a-z-]+|-\\[(.+)]|\\[.+])',
+    '((group|peer)(~[^-[]+)?)(-\\[(.+)]|[-[].+?)(\\/.+)?',
     withAutocomplete$(
-      ({ 1: $1, 4: $4, 5: $5 }, { e, h, v }) => {
-        const selector = ($5 && normalize($5)) || ($4[0] == '[' ? $4 : (v($4.slice(1)) as string))
+      ({ 2: type, 3: name = '', 4: $4, 5: $5 = '', 6: label = name }, { e, h, v }) => {
+        const selector = normalize($5) || ($4[0] == '[' ? $4 : (v($4.slice(1)) as string))
 
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         return `${(selector.includes('&') ? selector : '&' + selector).replace(
           /&/g,
-          `:merge(.${e(h($1))})`,
-        )}${$1[0] == 'p' ? '~' : ' '}&`
+          `:merge(.${e(h(type + label))})`,
+        )}${type[0] == 'p' ? '~' : ' '}&`
       },
       DEV &&
         ((_, { variants }) =>
-          [...Object.entries(variants)]
+          Object.entries(variants)
             .filter(([, selector]) => /^&(\[|:[^:])/.test(selector))
             .flatMap(([variant, selector]): AutocompleteItem[] => [
-              { prefix: 'group-', suffix: variant, label: `${selector.replace('&', '.group')} &` },
-              { prefix: 'peer-', suffix: variant, label: `${selector.replace('&', '.peer')} &` },
+              {
+                prefix: 'group-',
+                suffix: variant,
+                label: `${selector.replace('&', '.group')} &`,
+                modifiers: [],
+              },
+              {
+                prefix: 'peer-',
+                suffix: variant,
+                label: `${selector.replace('&', '.peer')} &`,
+                modifiers: [],
+              },
             ])),
     ),
   ],