chore(deps): use cascade-layers

sonofmagic · Feb 1, 2025 · fe799f9 · fe799f9
1 parent ed585a5
commit fe799f9
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 164 deletions.
diff --git a/packages/postcss/package.json b/packages/postcss/package.json
@@ -59,6 +59,7 @@
     "types": "./dist/index.d.ts"
   },
   "dependencies": {
+    "@csstools/postcss-cascade-layers": "^5.0.1",
     "@csstools/postcss-is-pseudo-class": "^5.0.1",
     "@weapp-core/escape": "~3.0.2",
     "@weapp-tailwindcss/shared": "workspace:*",
@@ -67,7 +68,6 @@
     "postcss-selector-parser": "~7.0.0"
   },
   "devDependencies": {
-    "@csstools/postcss-cascade-layers": "^5.0.1",
     "@weapp-tailwindcss/mangle": "workspace:*"
   }
 }
diff --git a/packages/postcss/src/plugins/index.ts b/packages/postcss/src/plugins/index.ts
@@ -1,11 +1,11 @@
 import type { AcceptedPlugin } from 'postcss'
 import type { IStyleHandlerOptions } from '../types'
+import postcssCascadeLayers from '@csstools/postcss-cascade-layers'
 import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class'
 import postcssRem2rpx from 'postcss-rem-to-responsive-pixel'
 import { createContext } from './ctx'
 import { postcssWeappTailwindcssPostPlugin } from './post'
 import { postcssWeappTailwindcssPrePlugin } from './pre'
-
 /**
  * 根据提供的选项生成一组 PostCSS 插件。
  * @param options - 样式处理器选项，包含 PostCSS 插件和其他配置。
@@ -15,6 +15,7 @@ export function getPlugins(options: IStyleHandlerOptions) {
   const ctx = createContext()
   options.ctx = ctx
   const plugins: AcceptedPlugin[] = [
+    postcssCascadeLayers(),
     ...(options.postcssOptions?.plugins ?? []),
     postcssWeappTailwindcssPrePlugin(options),
     postcssIsPseudoClass({

diff --git a/packages/postcss/src/plugins/post.ts b/packages/postcss/src/plugins/post.ts
@@ -1,7 +1,7 @@
 import type { Plugin, PluginCreator } from 'postcss'
 import type { IStyleHandlerOptions } from '../types'
 import { postcssPlugin } from '../constants'
-import { fallbackRemove } from '../selectorParser'
+import { getFallbackRemove } from '../selectorParser'
 
 export type PostcssWeappTailwindcssRenamePlugin = PluginCreator<IStyleHandlerOptions>
 
@@ -18,10 +18,11 @@ const postcssWeappTailwindcssPostPlugin: PostcssWeappTailwindcssRenamePlugin = (
   if (isMainChunk) {
     p.OnceExit = (root) => {
       root.walkRules((rule) => {
-        fallbackRemove.transformSync(rule, {
+        getFallbackRemove(rule).transformSync(rule, {
           updateSelector: true,
           lossless: false,
         })
+
         if (rule.selectors.length === 0 || (rule.selectors.length === 1 && rule.selector.trim() === '')) {
           rule.remove()
         }

diff --git a/packages/postcss/src/selectorParser.ts b/packages/postcss/src/selectorParser.ts
@@ -1,7 +1,7 @@
 import type { Rule } from 'postcss'
 import type { SyncProcessor } from 'postcss-selector-parser'
 import type { IStyleHandlerOptions } from './types'
-import selectorParser from 'postcss-selector-parser'
+import selectorParser, { tag } from 'postcss-selector-parser'
 import { composeIsPseudo, internalCssSelectorReplacer } from './shared'
 
 function createRuleTransform(rule: Rule, options: IStyleHandlerOptions) {
@@ -44,12 +44,8 @@ function createRuleTransform(rule: Rule, options: IStyleHandlerOptions) {
   return transform
 }
 
-function getRuleTransformer(rule: Rule, options: IStyleHandlerOptions) {
-  return selectorParser(createRuleTransform(rule, options))
-}
-
 export function ruleTransformSync(rule: Rule, options: IStyleHandlerOptions) {
-  const transformer = getRuleTransformer(rule, options)
+  const transformer = selectorParser(createRuleTransform(rule, options))
 
   return transformer.transformSync(rule, {
     lossless: false,
@@ -77,22 +73,68 @@ export function isOnlyBeforeAndAfterPseudoElement(node: Rule) {
   return b && a
 }
 
-export const fallbackRemove = selectorParser((selectors) => {
-  let maybeImportantId = false
-  selectors.walk((selector, idx) => {
-    if (idx === 0 && (selector.type === 'id' || selector.type === 'class' || selector.type === 'attribute')) {
-      maybeImportantId = true
-    }
-    if (selector.type === 'universal') {
-      selector.parent?.remove()
-    }
-    if (selector.type === 'pseudo' && selector.value === ':is') {
-      if (maybeImportantId && selector.nodes[0]?.type === 'selector') {
-        selector.replaceWith(selector.nodes[0])
+export function getFallbackRemove(rule?: Rule) {
+  const fallbackRemove = selectorParser((selectors) => {
+    let maybeImportantId = false
+    selectors.walk((selector, idx) => {
+      if (idx === 0 && (selector.type === 'id' || selector.type === 'class' || selector.type === 'attribute')) {
+        maybeImportantId = true
       }
-      else {
+      if (selector.type === 'universal') {
         selector.parent?.remove()
       }
-    }
+      if (selector.type === 'pseudo') {
+        if (selector.value === ':is') {
+          if (maybeImportantId && selector.nodes[0]?.type === 'selector') {
+            selector.replaceWith(selector.nodes[0])
+          }
+          else {
+            selector.parent?.remove()
+          }
+        }
+        else if (selector.value === ':not') {
+          for (const x of selector.nodes) {
+            if (
+              x.nodes.length === 1
+              && x.nodes[0].type === 'id'
+              && x.nodes[0].value === '#'
+            ) {
+              // if (removeNegationPseudoClass) {
+              //   selector.remove()
+              // }
+              x.nodes = [
+                tag({
+                  value: 'n',
+                }),
+              ]
+            }
+          }
+        }
+      }
+      if (selector.type === 'attribute') {
+        if (selector.attribute === 'hidden') {
+          rule?.remove()
+        }
+        else {
+          selector.remove()
+        }
+      }
+    })
+    selectors.walk((selector) => {
+      if (selector.type === 'pseudo') {
+        if (selector.value === ':where') {
+          const res = selector.nodes.every(x => x.nodes.length === 0)
+          if (res) {
+            selector.remove()
+          }
+          // for (const x of selector.nodes) {
+          //   if (x.nodes.length === 0) {
+          //     x.remove()
+          //   }
+          // }
+        }
+      }
+    })
   })
-})
+  return fallbackRemove
+}
diff --git a/packages/postcss/test/__snapshots__/selectorParser.test.ts.snap b/packages/postcss/test/__snapshots__/selectorParser.test.ts.snap
@@ -3,3 +3,9 @@
 exports[`selectorParser > fallbackRemove case 0 1`] = `"#app-provider .space-x-4>view+view"`;
 
 exports[`selectorParser > fallbackRemove case 1 1`] = `"#app .space-x-0>view+view"`;
+
+exports[`selectorParser > fallbackRemove case 2 1`] = `"button:not(n),input:not(n)"`;
+
+exports[`selectorParser > fallbackRemove case 3 1`] = `"[hidden]:where(:not([hidden="until-found"])):not(n):not(n):not(n)"`;
+
+exports[`selectorParser > fallbackRemove case 4 1`] = `"button:not(n),input:not(n)"`;