feat(nested selectors): use :where css selector

zirbest · Jul 1, 2023 · a722803 · a722803
1 parent 7c86cea
commit a722803
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -44,8 +44,8 @@ function presetPrimitives(options: PrimitivesOptions = {}): Preset {
           return {
             matcher: matcher.slice(match[0].length),
             selector: (s: any) => (match[1] === '-not')
-              ? `${s}[${selector}]:not(${attrGen})`
-              : `${s}${attrGen}`,
+              ? `${s}[${selector}]:not(${attrGen}),:where([${selector}]:not(${attrGen})) ${s}:not(${selector})`
+              : `${s}${attrGen},:where(${attrGen}) ${s}`,
           }
         }
         else {

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -11,7 +11,7 @@ describe('unocss-preset-primitives', () => {
   test('should generate css for an exposed state', async () => {
     const { css } = await uno
       .generate('<div class="ui-open:foo"></div>', { preflights: false, minify: true })
-    expect(css).toMatch(`.${e('ui-open:foo')}[data-headlessui-state~='open']{name:bar;}`)
+    expect(css).toMatchInlineSnapshot('".ui-open\\\\:foo[data-headlessui-state~=\'open\'],:where([data-headlessui-state~=\'open\']) .ui-open\\\\:foo{name:bar;}"')
   })
 })
 
@@ -24,7 +24,7 @@ describe('unocss-preset-headlessui', () => {
   test('should generate css for an exposed state', async () => {
     const { css } = await uno
       .generate('<div class="ui-open:foo"></div>', { preflights: false, minify: true })
-    expect(css).toMatch(`.${e('ui-open:foo')}[data-headlessui-state~='open']{name:bar;}`)
+    expect(css).toMatchInlineSnapshot('".ui-open\\\\:foo[data-headlessui-state~=\'open\'],:where([data-headlessui-state~=\'open\']) .ui-open\\\\:foo{name:bar;}"')
   })
 })
 
@@ -37,7 +37,7 @@ describe('unocss-preset-radixui', () => {
   test('should generate css for an exposed state', async () => {
     const { css } = await uno
       .generate('<div class="ui-open:foo"></div>', { preflights: false, minify: true })
-    expect(css).toMatch(`.${e('ui-open:foo')}[data-state~='open']{name:bar;}`)
+    expect(css).toMatchInlineSnapshot('".ui-open\\\\:foo[data-state~=\'open\'],:where([data-state~=\'open\']) .ui-open\\\\:foo{name:bar;}"')
   })
 })
 
@@ -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).toMatchInlineSnapshot('".ui-selected\\\\:foo[data-selected],:where([data-selected]) .ui-selected\\\\:foo{name:bar;}"')
   })
 })