@novlan/postcss-plugin-remove-selector 0.1.1

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 novlan1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# 移除选择器
+
+<p align="center">
+  <img src="https://img.shields.io/npm/dw/@novlan/postcss-plugin-remove-selector">
+  <img src="https://img.shields.io/npm/unpacked-size/@novlan/postcss-plugin-remove-selector">
+  <img src="https://img.shields.io/npm/v/@novlan/postcss-plugin-remove-selector">
+  <img src="https://img.shields.io/npm/l/@novlan/postcss-plugin-remove-selector">
+  <img src="https://img.shields.io/github/last-commit/novlan1/plugins">
+  <img src="https://img.shields.io/github/created-at/novlan1/plugins">
+</p>
+
+可用于移除三方库中的不需要的样式，从而减小包体积。
+
+## 1. 作者
+
+**novlan1**
+
+## 2. 如何使用
+
+安装
+
+```bash
+pnpm add @novlan/postcss-plugin-remove-selector -D
+```
+
+在 `vite.config.ts` 中使用：
+
+```ts
+import { defineConfig } from 'vite';
+import { postCssPluginRemoveSelector } from '@novlan/postcss-plugin-remove-selector';
+import {
+  TDESIGN_ICON_REMOVE_SELECTOR
+} from '@novlan/postcss-plugin-remove-selector/lib/tdesign-uniapp-icon';
+
+
+export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [postCssPluginRemoveSelector(TDESIGN_ICON_REMOVE_SELECTOR)],
+    },
+  },
+});
+```
+
+## 3. 类型
+
+```ts
+interface FileConfig {
+  /** 文件匹配规则，可以是字符串或正则表达式 */
+  file: RegExp | string;
+  /** 需要保留的选择器列表（图标名称） */
+  include?: string[];
+  /** 需要移除的选择器列表（图标名称） */
+  exclude?: string[];
+  /** 选择器匹配模式，只处理匹配该模式的选择器 */
+  selectorPattern?: RegExp;
+}
+
+interface Options {
+  /** 配置列表 */
+  list: FileConfig[];
+  /** 是否开启调试模式 */
+  debug?: boolean;
+}
+```
+
+## 4. 更新日志
+
+[点此查看](./CHANGELOG.md)
+
+## 5. 效果
+
+使用此插件，可使小程序大小减少`15KB`。
+
+<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/3/own_mike_5110452c29f3a22c3a.png" width="600">
+
+<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/3/own_mike_d5703094c04270a6d5.png" width="600">

package/lib/helper.d.ts

@@ -0,0 +1,18 @@
+import type { FileConfig, ShouldRemoveRuleOptions } from './types';
+/**
+ * 判断是否应该处理该文件
+ * @param configList 配置列表
+ * @param current 当前文件路径
+ */
+export declare function shouldHandleFile(configList: FileConfig[] | undefined, current: string): FileConfig | undefined;
+/**
+ * 从选择器中提取图标名称
+ * @param selector 选择器，如 .t-icon-home:before
+ * @returns 图标名称，如 home
+ */
+export declare function extractIconName(selector: string): string | null;
+/**
+ * 判断是否应该移除该规则
+ * @param options 配置项
+ */
+export declare function shouldRemoveRule(options: ShouldRemoveRuleOptions): boolean;

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+import type { Options, PostCSSPlugin } from './types';
+export type { Options, FileConfig, ShouldRemoveRuleOptions, PostCSSPlugin } from './types';
+export { shouldHandleFile, shouldRemoveRule, extractIconName } from './helper';
+/**
+ * PostCSS 插件：移除指定的 CSS 选择器
+ * 用于图标样式减包等场景
+ *
+ * @param opts 配置项
+ * @returns PostCSS 插件
+ */
+export declare function postCssPluginRemoveSelector(opts?: Options): PostCSSPlugin & {
+    postcss: true;
+};

package/lib/index.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 判断是否应该处理该文件
+ * @param configList 配置列表
+ * @param current 当前文件路径
+ */
+function shouldHandleFile(configList = [], current) {
+    return configList.find((item) => {
+        const { file } = item;
+        if (typeof file === 'string') {
+            return current.includes(file);
+        }
+        return file.test(current);
+    });
+}
+/**
+ * 从选择器中提取图标名称
+ * @param selector 选择器，如 .t-icon-home:before
+ * @returns 图标名称，如 home
+ */
+function extractIconName(selector) {
+    const match = selector.match(/\.t-icon-([\w-]+):before/);
+    return match ? match[1] : null;
+}
+/**
+ * 判断是否应该移除该规则
+ * @param options 配置项
+ */
+function shouldRemoveRule(options) {
+    const { selectorPattern, include, exclude, selector } = options;
+    // 如果配置了 selectorPattern，只处理匹配的选择器
+    if (selectorPattern && !selectorPattern.test(selector)) {
+        return false;
+    }
+    // 提取图标名称进行精确匹配
+    const iconName = extractIconName(selector);
+    // 如果有 include 列表，只保留 include 中的图标
+    if (include.length) {
+        return !include.includes(iconName || '');
+    }
+    // 如果有 exclude 列表，移除 exclude 中的图标
+    if (exclude.length) {
+        return exclude.includes(iconName || '');
+    }
+    return false;
+}
+
+/**
+ * PostCSS 插件：移除指定的 CSS 选择器
+ * 用于图标样式减包等场景
+ *
+ * @param opts 配置项
+ * @returns PostCSS 插件
+ */
+function postCssPluginRemoveSelector(opts = { list: [] }) {
+    const { list = [], debug = false } = opts;
+    const plugin = {
+        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);
+            }
+        },
+    };
+    return plugin;
+}
+
+exports.extractIconName = extractIconName;
+exports.postCssPluginRemoveSelector = postCssPluginRemoveSelector;
+exports.shouldHandleFile = shouldHandleFile;
+exports.shouldRemoveRule = shouldRemoveRule;

package/lib/tdesign-uniapp-icon.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TDesign UniApp 图标减包配置
+ *
+ * 使用说明：
+ * 1. 在 USED_ICONS 数组中配置项目中实际使用的图标名称
+ * 2. 插件只会处理 .t-icon-xxx:before 这类图标选择器
+ * 3. 其他基础样式（如 @font-face、.t-icon 等）会自动保留
+ *
+ * 如何查找项目中使用的图标：
+ * grep -rho 'icon="[^"]*"\|left-icon="[^"]*"\|name="[^"]*"' src --include="*.vue" | sort | uniq
+ */
+/**
+ * TDesign UniApp 图标减包配置
+ */
+export declare const TDESIGN_ICON_REMOVE_SELECTOR: {
+    list: {
+        file: RegExp;
+        selectorPattern: RegExp;
+        include: string[];
+        exclude: never[];
+    }[];
+};

package/lib/types.d.ts

@@ -0,0 +1,45 @@
+import type { Root, Result } from 'postcss';
+/**
+ * 单个文件匹配配置
+ */
+export interface FileConfig {
+    /** 文件匹配规则，可以是字符串或正则表达式 */
+    file: RegExp | string;
+    /** 需要保留的选择器列表（图标名称） */
+    include?: string[];
+    /** 需要移除的选择器列表（图标名称） */
+    exclude?: string[];
+    /** 选择器匹配模式，只处理匹配该模式的选择器 */
+    selectorPattern?: RegExp;
+}
+/**
+ * 插件配置项
+ */
+export interface Options {
+    /** 配置列表 */
+    list: FileConfig[];
+    /** 是否开启调试模式 */
+    debug?: boolean;
+}
+/**
+ * 判断是否移除规则的参数
+ */
+export interface ShouldRemoveRuleOptions {
+    /** 选择器匹配模式 */
+    selectorPattern?: RegExp;
+    /** 需要保留的选择器列表 */
+    include: string[];
+    /** 需要移除的选择器列表 */
+    exclude: string[];
+    /** 当前选择器 */
+    selector: string;
+}
+/**
+ * PostCSS 插件返回类型
+ */
+export interface PostCSSPlugin {
+    postcssPlugin: string;
+    Once(root: Root, helpers: {
+        result: Result;
+    }): void;
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@novlan/postcss-plugin-remove-selector",
+  "version": "0.1.1",
+  "homepage": "https://novlan1.github.io/plugins/zh/postcss-plugin-remove-selector.html",
+  "bugs": {
+    "url": "https://github.com/novlan1/plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/novlan1/plugins"
+  },
+  "license": "MIT",
+  "author": "novlan1",
+  "main": "./lib/index",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib/"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "postcss": "^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rm -rf lib && rollup -c",
+    "bump": "node ../../script/monorepo/version-simple $PWD",
+    "changelog": "node ../../script/monorepo/changelog $PWD",
+    "release": "node ../../script/monorepo/release $PWD"
+  }
+}