feat(remove-selector): support postcss@7

Author: novlan1

packages/postcss-plugin-remove-selector/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "postcss": "^8.0.0"
+    "postcss": "^7.0.0 || ^8.0.0"
   },
   "publishConfig": {
     "access": "public",

packages/postcss-plugin-remove-selector/src/index.ts

@@ -1,2 +1,4 @@
 export * from './plugin';
 export { TDESIGN_ICON_REMOVE_SELECTOR } from './tdesign-uniapp-icon';
+
+export { postCssPluginRemoveSelector as default } from './plugin';

packages/postcss-plugin-remove-selector/src/plugin.ts

@@ -1,55 +1,86 @@
 import { shouldHandleFile, shouldRemoveRule } from './helper';
 
-import type { Options, PostCSSPlugin } from './types';
+import type { Options } from './types';
 
-export type { Options, FileConfig, ShouldRemoveRuleOptions, PostCSSPlugin } from './types';
+export type { Options, FileConfig, ShouldRemoveRuleOptions } from './types';
 export { shouldHandleFile, shouldRemoveRule, extractIconName } from './helper';
 
+const PLUGIN_NAME = 'postcss-plugin-remove-selector';
+
+/**
+ * 核心处理逻辑，PostCSS 7 / 8 共用
+ */
+function processRoot(root: any, result: any, opts: Options) {
+  const { list = [], debug = false } = opts;
+  const fileName = result.opts?.from || '';
+  const found = shouldHandleFile(list, fileName);
+
+  if (!found) {
+    return;
+  }
+
+  const { exclude = [], include = [], selectorPattern } = found;
+  if (debug) {
+    console.log('[postcss-plugin-remove-selector] handling:', fileName);
+  }
+
+  let removedCount = 0;
+
+  root.walkRules((rule: any) => {
+    if (shouldRemoveRule({
+      selectorPattern,
+      exclude,
+      include,
+      selector: rule.selector,
+    })) {
+      rule.remove();
+      removedCount += 1;
+    }
+  });
+
+  if (debug) {
+    console.log(`[postcss-plugin-remove-selector] removed ${removedCount} rules from:`, fileName);
+  }
+}
+
 /**
  * PostCSS 插件：移除指定的 CSS 选择器
  * 用于图标样式减包等场景
  *
+ * 同时兼容 PostCSS 7 和 PostCSS 8：
+ * - PostCSS 8：使用标准 Creator 函数格式 + postcss: true 标记
+ * - PostCSS 7：回退到 postcss.plugin() 注册方式
+ *
  * @param opts 配置项
  * @returns PostCSS 插件
  */
-export function postCssPluginRemoveSelector(opts: Options = { list: [] }): PostCSSPlugin & { postcss: true } {
-  const { list = [], debug = false } = opts;
-
-  const plugin: PostCSSPlugin & { postcss: true } = {
-    postcssPlugin: 'postcss-plugin-remove-selector',
-    postcss: true,
-    Once(root, { result }) {
-      const fileName = result.opts?.from || '';
-      const found = shouldHandleFile(list, fileName);
-
-      if (!found) {
-        return;
-      }
-
-      const { exclude = [], include = [], selectorPattern } = found;
-      if (debug) {
-        console.log('[postcss-plugin-remove-selector] handling:', fileName);
-      }
-
-      let removedCount = 0;
-
-      root.walkRules((rule) => {
-        if (shouldRemoveRule({
-          selectorPattern,
-          exclude,
-          include,
-          selector: rule.selector,
-        })) {
-          rule.remove();
-          removedCount += 1;
-        }
-      });
-
-      if (debug) {
-        console.log(`[postcss-plugin-remove-selector] removed ${removedCount} rules from:`, fileName);
-      }
+const postCssPluginRemoveSelector: any = (opts: Options = { list: [] }) =>
+  // PostCSS 8 格式
+  ({
+    postcssPlugin: PLUGIN_NAME,
+    Once(root: any, { result }: any) {
+      processRoot(root, result, opts);
     },
-  };
+  })
+;
 
-  return plugin;
+// 标记为 PostCSS 8 插件
+postCssPluginRemoveSelector.postcss = true as const;
+
+// PostCSS 7 兼容：通过 postcss.plugin() 注册
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const postcss = require('postcss');
+  if (postcss && typeof postcss.plugin === 'function') {
+    postCssPluginRemoveSelector.postcss7 = postcss.plugin(
+      PLUGIN_NAME,
+      (opts: Options = { list: [] }) => (root: any, result: any) => {
+        processRoot(root, result, opts);
+      },
+    );
+  }
+} catch (e) {
+  // postcss 未安装或不支持 postcss.plugin，忽略
 }
+
+export { postCssPluginRemoveSelector };

packages/postcss-plugin-remove-selector/src/types.ts

@@ -1,5 +1,3 @@
-import type { Root, Result } from 'postcss';
-
 /**
  * 单个文件匹配配置
  */
@@ -38,10 +36,4 @@ export interface ShouldRemoveRuleOptions {
   selector: string;
 }
 
-/**
- * PostCSS 插件返回类型
- */
-export interface PostCSSPlugin {
-  postcssPlugin: string;
-  Once(root: Root, helpers: { result: Result }): void;
-}
+

packages/postcss-plugin-remove-selector/tests/__snapshots__/remote-selector.spec.js.snap

@@ -2,19 +2,19 @@
 
 exports[`empty options 1`] = `
 "
-.press-icon-plus-arrow-down:before {
+.t-icon-arrow-down:before {
   content: 'e65e';
 }
 
-.press-icon-plus-arrow-up:before {
+.t-icon-arrow-up:before {
   content: 'e65f';
 }
 
-.press-icon-plus-invitation:before {
+.t-icon-invitation:before {
   content: 'e6d6';
 }
 
-.press-icon-plus-like-o:before {
+.t-icon-like-o:before {
   content: 'e6d7';
 }
 
@@ -26,11 +26,11 @@ exports[`empty options 1`] = `
 
 exports[`exclude 1`] = `
 "
-.press-icon-plus-arrow-down:before {
+.t-icon-arrow-down:before {
   content: 'e65e';
 }
 
-.press-icon-plus-arrow-up:before {
+.t-icon-arrow-up:before {
   content: 'e65f';
 }
 
@@ -42,23 +42,51 @@ exports[`exclude 1`] = `
 
 exports[`file is regexp 1`] = `
 "
-.press-icon-plus-arrow-down:before {
+.t-icon-arrow-down:before {
   content: 'e65e';
 }
 
-.press-icon-plus-arrow-up:before {
+.t-icon-arrow-up:before {
   content: 'e65f';
 }
+
+#someId {
+  color: red;
+}
+"
+`;
+
+exports[`file not matched - should not modify css 1`] = `
+"
+.t-icon-arrow-down:before {
+  content: 'e65e';
+}
+
+.t-icon-arrow-up:before {
+  content: 'e65f';
+}
+
+.t-icon-invitation:before {
+  content: 'e6d6';
+}
+
+.t-icon-like-o:before {
+  content: 'e6d7';
+}
+
+#someId {
+  color: red;
+}
 "
 `;
 
 exports[`include & exclude 1`] = `
 "
-.press-icon-plus-arrow-down:before {
+.t-icon-arrow-down:before {
   content: 'e65e';
 }
 
-.press-icon-plus-arrow-up:before {
+.t-icon-arrow-up:before {
   content: 'e65f';
 }
 
@@ -70,12 +98,40 @@ exports[`include & exclude 1`] = `
 
 exports[`include 1`] = `
 "
-.press-icon-plus-arrow-down:before {
+.t-icon-arrow-down:before {
   content: 'e65e';
 }
 
-.press-icon-plus-arrow-up:before {
+.t-icon-arrow-up:before {
   content: 'e65f';
 }
+
+#someId {
+  color: red;
+}
+"
+`;
+
+exports[`no selectorPattern - should not remove non-icon rules 1`] = `
+"
+.t-icon-arrow-down:before {
+  content: 'e65e';
+}
+"
+`;
+
+exports[`postcss7 fallback - should work with postcss.plugin style 1`] = `
+"
+.t-icon-arrow-down:before {
+  content: 'e65e';
+}
+
+.t-icon-arrow-up:before {
+  content: 'e65f';
+}
+
+#someId {
+  color: red;
+}
 "
 `;

packages/postcss-plugin-remove-selector/tests/remote-selector.spec.js

@@ -115,3 +115,27 @@ test('file not matched - should not modify css', async () => {
   expect(result.css).toMatchSnapshot();
   expect(result.warnings()).toHaveLength(0);
 });
+
+
+test('postcss7 fallback - should work with postcss.plugin style', async () => {
+  // 当 postcss.plugin 可用时，postcss7 属性应该被设置
+  if (postCssPluginRemoveSelector.postcss7) {
+    const plugin = postCssPluginRemoveSelector.postcss7({
+      list: [{
+        file: 'abc',
+        exclude: ['invitation', 'like-o'],
+        selectorPattern: /^\.t-icon-[\w-]+:before$/,
+      }],
+    });
+    const result = await postcss([plugin]).process(input, { from: 'abc' });
+
+    // eslint-disable-next-line jest/no-conditional-expect
+    expect(result.css).toMatchSnapshot();
+    // eslint-disable-next-line jest/no-conditional-expect
+    expect(result.warnings()).toHaveLength(0);
+  } else {
+    // 如果当前环境是 PostCSS 8，postcss.plugin 不存在，跳过
+    // eslint-disable-next-line jest/no-conditional-expect
+    expect(true).toBe(true);
+  }
+});