fix: #25

sonofmagic · Aug 17, 2023 · 2b0dda7 · 2b0dda7
1 parent bf28237
commit 2b0dda7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/postcss/plugins.ts b/src/postcss/plugins.ts
@@ -61,7 +61,30 @@ export const innerPlugin: PluginCreator<
         selector.value = escape(selector.value)
       }
       if (selector.type === 'combinator') {
-        selector.value = '+'
+        // Descendant combinator
+
+        // if (
+        //   selector.value === ' ' ||
+        //   selector.value === '+' ||
+        //   selector.value === '>' ||
+        //   selector.value === '~'
+        // ) {
+        //   return
+        // }
+        // has :not() and ~
+        // General sibling combinator
+        // eslint-disable-next-line unicorn/no-lonely-if
+        if (selector.value === '~' && selector.parent) {
+          // Adjacent sibling combinator
+          const idx = selector.parent.nodes.indexOf(selector)
+          if (idx && idx > -1) {
+            // const beforeNodes = selector.parent.nodes.slice(0, idx)
+            const beforeNode = selector.parent.nodes[idx - 1]
+            if (beforeNode.type !== 'class') {
+              selector.value = '+'
+            }
+          }
+        }
       }
       if (
         selector.type === 'universal' &&

diff --git a/test/postcss.test.ts b/test/postcss.test.ts
@@ -105,6 +105,16 @@ describe('postcss', () => {
     expect(css).toMatchSnapshot()
   })
 
+  it('_peerHover no :not(n) case ', async () => {
+    const { css } = await postcss([
+      postcssPlugin({
+        removeNegationPseudoClass: false
+      })
+    ]).process(`.peer~.peerHovercbg_redd500{}`)
+    // 前面不能有伪元素和 [data-*]
+    expect(css).toBe(`.peer~.peerHovercbg_redd500{}`)
+  })
+
   it('_peerHover case disabled enable', async () => {
     const testCase = `.peer:hover:not(n):not(n):not(n):not(n)~.peerHovercbg_redd500,
     .peer[data-hover]:not(n):not(n):not(n):not(n)~.peerHovercbg_redd500 {}`
@@ -142,6 +152,13 @@ describe('postcss', () => {
     expect(css).toMatchSnapshot()
   })
 
+  it('should not transform descendant combinator', async () => {
+    const { css } = await postcss([postcssPlugin()]).process(
+      `.custom-tabs .tabs__scroll { background: red; }`
+    )
+    expect(css).toBe('.custom-tabs .tabs__scroll { background: red; }')
+  })
+
   it('useOptions default', () => {
     const { mergeOptions, optionsRef } = useOptions()
     expect(optionsRef).toMatchSnapshot()