@fairys/taro-tools-plugins 0.0.1

package/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './postcss.plugin';
+export * from './replace.plugin';
+export * from './utils';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from "./postcss.plugin.js";
+export * from "./replace.plugin.js";
+export * from "./utils.js";

package/esm/postcss.plugin.d.ts

@@ -0,0 +1,6 @@
+import type postcss from 'postcss';
+import { ReplaceOptions } from './utils';
+export interface PostcssClassProcessorOptions extends Omit<ReplaceOptions, 'content' | 'isPostcss'> {
+    replace?: (str: string, isPostcss: boolean) => string;
+}
+export declare const postcssClassProcessor: (options?: PostcssClassProcessorOptions) => (root: postcss.Root) => void;

package/esm/postcss.plugin.js

@@ -0,0 +1,15 @@
+import { replace } from "./utils.js";
+const postcssClassProcessor = (options = {})=>{
+    const { replace: parentReplace, ...rest } = options || {};
+    return (root)=>{
+        root.walkRules((rule)=>{
+            const regx = new RegExp(`^\\.${rest.prefix || 'fairystaro__'}`);
+            if (regx.test(rule.selector)) rule.selector = parentReplace?.(rule.selector, true) || replace({
+                ...rest,
+                content: rule.selector,
+                isPostcss: true
+            });
+        });
+    };
+};
+export { postcssClassProcessor };

package/esm/replace.plugin.d.ts

@@ -0,0 +1,11 @@
+import { RspackPluginInstance, Compiler } from '@rspack/core';
+import { ReplaceOptions } from './utils';
+export interface ReplacePluginOptions extends Omit<ReplaceOptions, 'content' | 'isPostcss'> {
+    replace?: (str: string, isPostcss: boolean) => string;
+}
+export declare class ReplacePlugin implements RspackPluginInstance {
+    options: ReplacePluginOptions;
+    constructor(options?: ReplacePluginOptions);
+    _replace: (str: string) => string;
+    apply(compiler: Compiler): void;
+}

package/esm/replace.plugin.js

@@ -0,0 +1,31 @@
+import { Compilation, sources } from "@rspack/core";
+import { replace } from "./utils.js";
+class ReplacePlugin {
+    options;
+    constructor(options = {}){
+        this.options = options;
+    }
+    _replace = (str)=>{
+        const { replace: parentReplace, ...rest } = this.options || {};
+        return parentReplace?.(str, false) || replace({
+            content: str,
+            ...rest,
+            isPostcss: false
+        });
+    };
+    apply(compiler) {
+        compiler.hooks.compilation.tap('ReplacePlugin', (compilation)=>{
+            compilation.hooks.processAssets.tap({
+                name: 'ReplacePlugin',
+                stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
+            }, (assets)=>{
+                for (const filename of Object.keys(assets))if (filename.endsWith('.js') || filename.endsWith('.ts') || filename.endsWith('.tsx') || filename.endsWith('.jsx')) {
+                    const source = assets[filename].source();
+                    const sourceStr = source.toString();
+                    assets[filename] = new sources.RawSource(this._replace(sourceStr));
+                }
+            });
+        });
+    }
+}
+export { ReplacePlugin };

package/esm/utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 处理特殊字符正则表达式
+ */
+export declare const defaultReplaceRules: {
+    readonly ':': "_mh_";
+    readonly '/': "_xg_";
+    readonly '[': "_zkh1_";
+    readonly ']': "_zhk2_";
+    readonly '(': "_xkh1_";
+    readonly ')': "_xkh2_";
+    readonly '!': "_gqh_";
+    readonly '%': "_bfh_";
+    readonly '*': "_x_";
+};
+export interface ReplaceOptions {
+    /**内容*/
+    content: string;
+    /**是否是postcss*/
+    isPostcss?: boolean;
+    /**前缀*/
+    prefix?: string;
+    /**替换规则*/
+    replaceRules?: Record<string, string>;
+}
+export declare const replace: (options: ReplaceOptions) => string;

package/esm/utils.js

@@ -0,0 +1,22 @@
+import { defaultRules, transformEscapESelector, transformSelector } from "unplugin-transform-class/utils";
+const defaultReplaceRules = {
+    ...defaultRules,
+    ':': '_mh_',
+    '/': '_xg_',
+    '[': '_zkh1_',
+    ']': '_zhk2_',
+    '(': '_xkh1_',
+    ')': '_xkh2_',
+    '!': '_gqh_',
+    '%': '_bfh_',
+    '*': '_x_'
+};
+const replace = (options)=>{
+    const { content, isPostcss = true, prefix = 'fairystaro__', replaceRules = defaultReplaceRules } = options;
+    return content.replace(new RegExp(`${prefix}(\\S+?)(?=[\\s'"]|$)`, 'g'), (match)=>{
+        let _newStr = match;
+        _newStr = isPostcss ? transformEscapESelector(_newStr, replaceRules) : transformSelector(_newStr, replaceRules);
+        return _newStr;
+    });
+};
+export { defaultReplaceRules, replace };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fairys/taro-tools-plugins",
+  "type": "module",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "框架组件库",
+  "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
+  "version": "0.0.1",
+  "main": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build --esm",
+    "watch": "carefrees-rslib build --watch --esm"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/fairys-taro-react.git",
+    "directory": "packages/plugins"
+  },
+  "files": [
+    "src",
+    "lib",
+    "esm"
+  ],
+  "dependencies": {
+    "unplugin-transform-class": "^0.6.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './postcss.plugin';
+export * from './replace.plugin';
+export * from './utils';

package/src/postcss.plugin.ts

@@ -0,0 +1,24 @@
+import type postcss from 'postcss';
+import { replace, ReplaceOptions } from './utils';
+// 这个解决了 tailwindcss 类名中的符号替换问题
+export interface PostcssClassProcessorOptions extends Omit<ReplaceOptions, 'content' | 'isPostcss'> {
+  replace?: (str: string, isPostcss: boolean) => string;
+}
+export const postcssClassProcessor = (options: PostcssClassProcessorOptions = {}) => {
+  const { replace: parentReplace, ...rest } = options || {};
+  return (root: postcss.Root) => {
+    root.walkRules((rule: postcss.Rule) => {
+      // 或处理选择器中的 class（如 .my-class → .prefix-my-class）
+      const regx = new RegExp(`^\\.${rest.prefix || 'fairystaro__'}`);
+      if (regx.test(rule.selector)) {
+        rule.selector =
+          parentReplace?.(rule.selector, true) ||
+          replace({
+            ...rest,
+            content: rule.selector,
+            isPostcss: true,
+          });
+      }
+    });
+  };
+};

package/src/replace.plugin.ts

@@ -0,0 +1,45 @@
+import { RspackPluginInstance, Compiler, Compilation, sources } from '@rspack/core';
+import { replace, ReplaceOptions } from './utils';
+
+export interface ReplacePluginOptions extends Omit<ReplaceOptions, 'content' | 'isPostcss'> {
+  replace?: (str: string, isPostcss: boolean) => string;
+}
+
+export class ReplacePlugin implements RspackPluginInstance {
+  options: ReplacePluginOptions;
+
+  constructor(options: ReplacePluginOptions = {}) {
+    this.options = options;
+  }
+
+  // 替换内容
+  _replace = (str: string) => {
+    const { replace: parentReplace, ...rest } = this.options || {};
+    return parentReplace?.(str, false) || replace({ content: str, ...rest, isPostcss: false });
+  };
+
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap('ReplacePlugin', (compilation: Compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: 'ReplacePlugin',
+          stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+        },
+        (assets) => {
+          for (const filename of Object.keys(assets)) {
+            if (
+              filename.endsWith('.js') ||
+              filename.endsWith('.ts') ||
+              filename.endsWith('.tsx') ||
+              filename.endsWith('.jsx')
+            ) {
+              const source = assets[filename].source();
+              const sourceStr = source.toString();
+              assets[filename] = new sources.RawSource(this._replace(sourceStr));
+            }
+          }
+        },
+      );
+    });
+  }
+}

package/src/utils.ts

@@ -0,0 +1,42 @@
+import { transformSelector, transformEscapESelector, defaultRules } from 'unplugin-transform-class/utils';
+
+/**
+ * 处理特殊字符正则表达式
+ */
+export const defaultReplaceRules = {
+  ...defaultRules,
+  ':': '_mh_',
+  '/': '_xg_',
+  '[': '_zkh1_',
+  ']': '_zhk2_',
+  '(': '_xkh1_',
+  ')': '_xkh2_',
+  '!': '_gqh_',
+  '%': '_bfh_',
+  '*': '_x_',
+} as const;
+
+export interface ReplaceOptions {
+  /**内容*/
+  content: string;
+  /**是否是postcss*/
+  isPostcss?: boolean;
+  /**前缀*/
+  prefix?: string;
+  /**替换规则*/
+  replaceRules?: Record<string, string>;
+}
+
+export const replace = (options: ReplaceOptions) => {
+  const { content, isPostcss = true, prefix = 'fairystaro__', replaceRules = defaultReplaceRules } = options;
+  // /fairystaro__(\S+?)(?=[\s'"]|$)/g
+  return content.replace(new RegExp(`${prefix}(\\S+?)(?=[\\s'"]|$)`, 'g'), (match) => {
+    let _newStr = match;
+    if (isPostcss) {
+      _newStr = transformEscapESelector(_newStr, replaceRules);
+    } else {
+      _newStr = transformSelector(_newStr, replaceRules);
+    }
+    return _newStr;
+  });
+};