fix: kobalte boolean selector

zirbest · Jan 7, 2023 · 28e393c · 28e393c
1 parent 0791bf2
commit 28e393c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -16,13 +16,19 @@ export interface PrimitivesOptions {
    * @default 'data-headlessui-state'
    */
   selector?: string
+  /**
+   * @default 'false'
+   * use [data~='checked'] or [data-checked]
+   */
+  isAttrBoolean?: boolean
 }
 
 const presetPrimitives = (options: PrimitivesOptions = {}): Preset => {
   const {
     prefix = 'ui',
     variants = 'open|checked|selected|active|disabled',
     selector = 'data-headlessui-state',
+    isAttrBoolean = false,
   } = options
 
   return {
@@ -32,11 +38,14 @@ const presetPrimitives = (options: PrimitivesOptions = {}): Preset => {
         const regex = new RegExp(`^${prefix}(-not)?-(${variants})[:-]`)
         const match = matcher.match(regex)
         if (match) {
+          const attrGen = !isAttrBoolean
+            ? `[${selector}~='${match[2]}']`
+            : `[${selector}-${match[2]}]`
           return {
             matcher: matcher.slice(match[0].length),
             selector: (s: any) => (match[1] === '-not')
-              ? `${s}[${selector}]:not([${selector}~='${match[2]}'])`
-              : `${s}[${selector}~='${match[2]}']`,
+              ? `${s}[${selector}]:not(${attrGen})`
+              : `${s}${attrGen}`,
           }
         }
         else {
@@ -97,7 +106,7 @@ const presetKobalte = (options: KobalteOptions = {}): Preset => {
     prefix = 'ui',
   } = options
   const variants = 'valid|invalid|required|disabled|readonly|checked|indeterminate|selected|pressed|expanded|hover|focus|focus-visible|active'
-  return presetPrimitives({ prefix, variants, selector: 'data' })
+  return presetPrimitives({ prefix, variants, selector: 'data', isAttrBoolean: true })
 }
 
 export { presetHeadlessUi, presetRadixUi, presetKobalte }

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -50,6 +50,6 @@ describe('unocss-preset-kobalte', () => {
   test('should generate css for an exposed state', async () => {
     const { css } = await uno
       .generate('<div class="ui-selected:foo"></div>', { preflights: false, minify: true })
-    expect(css).toMatch(`.${e('ui-selected:foo')}[data~='selected']{name:bar;}`)
+    expect(css).toMatch(`.${e('ui-selected:foo')}[data-selected]{name:bar;}`)
   })
 })