tailwindcss-taro
Version:
TailwindCSS plugin for Taro4 with Vite/Webpack support - 零配置，开箱即用
581 lines (570 loc) • 16.7 kB
text/typescript
import { Plugin } from 'vite';
import { z } from 'zod';
/**
* 超越 weapp-tailwindcss 的插件配置选项
*/
interface PluginOptions {
/** 目标平台 */
platform?: 'weapp' | 'h5';
/** 是否启用插件 */
enabled?: boolean;
/** 是否启用详细日志 */
verbose?: boolean;
/** TailwindCSS 配置文件路径 */
configPath?: string;
/** CSS 选择器替换规则 */
cssSelectorReplacement?: {
/** 根选择器替换 */
root?: string | string[];
/** 通配符选择器替换 */
universal?: string | string[];
};
/** 内容扫描路径 */
content?: string | string[];
/** 安全列表类名 */
safelist?: string[];
/** 主题配置 */
theme?: any;
/** 是否启用 rpx 单位 */
enableRpx?: boolean;
/** 是否移除不兼容的选择器 */
removeIncompatibleSelectors?: boolean;
/** 自定义转换器 */
transformers?: {
/** CSS 转换器 */
css?: (css: string) => string;
/** 类名转换器 */
className?: (className: string) => string;
};
/** 自动检测 TailwindCSS 版本 */
autoDetectTailwindVersion?: boolean;
/** 启用智能类名检测 */
enableSmartClassDetection?: boolean;
/** 启用性能优化 */
enablePerformanceOptimization?: boolean;
/** 启用热重载支持 */
enableHotReload?: boolean;
/** 启用源码映射 */
enableSourceMap?: boolean;
/** 启用包分析 */
enableBundleAnalysis?: boolean;
/** 启用运行时主题切换 */
enableRuntimeTheme?: boolean;
/** 启用类名压缩 */
enableClassNameCompression?: boolean;
/** 启用 CSS 压缩 */
enableCssCompression?: boolean;
/** 启用缓存 */
enableCache?: boolean;
/** 缓存配置 */
cacheConfig?: {
/** 缓存目录 */
dir?: string;
/** 缓存过期时间（毫秒） */
maxAge?: number;
/** 最大缓存大小（字节） */
maxSize?: number;
};
/** 性能监控配置 */
performanceMonitoring?: {
/** 启用性能监控 */
enabled?: boolean;
/** 性能阈值（毫秒） */
threshold?: number;
/** 输出格式 */
format?: 'json' | 'text' | 'html';
};
/** 调试配置 */
debug?: {
/** 启用调试模式 */
enabled?: boolean;
/** 调试级别 */
level?: 'info' | 'warn' | 'error' | 'debug';
/** 输出文件 */
outputFile?: string;
};
/** 新增自动 patch 配置 */
enableAutoPatch?: boolean;
/** 启用运行时主题 */
enableRuntime?: boolean;
/** 启用类名补丁 */
enableClassPatch?: boolean;
/** 启用选择器补丁 */
enableSelectorPatch?: boolean;
}
/**
* Vite 插件类型
*/
interface VitePlugin extends Plugin {
name: 'tailwindcss-taro';
}
/**
* Webpack 插件类型
*/
interface WebpackPlugin {
name: 'tailwindcss-taro';
apply(compiler: any): void;
}
/**
* 类名转换结果
*/
interface ClassTransformResult {
/** 原始类名 */
original: string;
/** 转换后类名 */
transformed: string;
/** 是否发生变化 */
changed: boolean;
/** 转换原因 */
reason?: string;
}
/**
* CSS 转换结果
*/
interface CssTransformResult {
/** 原始 CSS */
original: string;
/** 转换后 CSS */
transformed: string;
/** 是否发生变化 */
changed: boolean;
/** 转换统计 */
stats: {
/** 移除的规则数量 */
removedRules: number;
/** 修改的选择器数量 */
modifiedSelectors: number;
/** 转换的属性值数量 */
transformedValues: number;
};
}
/**
* 主题配置
*/
interface ThemeConfig {
/** 主题名称 */
name: string;
/** 主题变量 */
variables: Record<string, string>;
/** 主题类名前缀 */
prefix?: string;
/** 主题描述 */
description?: string;
}
/**
* 运行时主题切换配置
*/
interface RuntimeThemeConfig {
/** 默认主题 */
default: string;
/** 可用主题列表 */
themes: ThemeConfig[];
/** 主题切换回调 */
onThemeChange?: (theme: string) => void;
/** 主题持久化 */
persist?: boolean;
/** 持久化键名 */
storageKey?: string;
}
/**
* 性能监控事件
*/
interface PerformanceEvent {
/** 事件类型 */
type: 'transform' | 'build' | 'cache';
/** 事件名称 */
name: string;
/** 开始时间 */
startTime: number;
/** 结束时间 */
endTime: number;
/** 持续时间 */
duration: number;
/** 事件数据 */
data?: any;
}
/**
* 调试信息
*/
interface DebugInfo {
/** 时间戳 */
timestamp: number;
/** 级别 */
level: 'info' | 'warn' | 'error' | 'debug';
/** 消息 */
message: string;
/** 数据 */
data?: any;
/** 堆栈跟踪 */
stack?: string;
}
/**
* 插件状态
*/
interface PluginState {
/** 是否已初始化 */
initialized: boolean;
/** 当前平台 */
platform: 'weapp' | 'h5';
/** TailwindCSS 版本 */
tailwindVersion: 'v3' | 'v4' | 'unknown';
/** 处理文件数量 */
processedFiles: number;
/** 处理的类名数量 */
totalClasses: number;
/** 构建统计 */
buildStats: BuildStats;
/** 性能事件 */
performanceEvents: PerformanceEvent[];
/** 调试信息 */
debugInfo: DebugInfo[];
}
declare const PluginOptionsSchema: z.ZodObject<{
platform: z.ZodDefault<z.ZodEnum<["weapp", "h5"]>>;
verbose: z.ZodDefault<z.ZodBoolean>;
safelist: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
cssSelectorReplacement: z.ZodDefault<z.ZodObject<{
root: z.ZodDefault<z.ZodString>;
universal: z.ZodDefault<z.ZodString>;
}, "strip", z.ZodTypeAny, {
root: string;
universal: string;
}, {
root?: string | undefined;
universal?: string | undefined;
}>>;
autoDetectTailwindVersion: z.ZodDefault<z.ZodBoolean>;
enableSmartClassDetection: z.ZodDefault<z.ZodBoolean>;
enablePerformanceOptimization: z.ZodDefault<z.ZodBoolean>;
enableHotReload: z.ZodDefault<z.ZodBoolean>;
enableSourceMap: z.ZodDefault<z.ZodBoolean>;
enableBundleAnalysis: z.ZodDefault<z.ZodBoolean>;
enableAutoPatch: z.ZodDefault<z.ZodBoolean>;
enableRuntime: z.ZodDefault<z.ZodBoolean>;
enableClassPatch: z.ZodDefault<z.ZodBoolean>;
enableSelectorPatch: z.ZodDefault<z.ZodBoolean>;
enableRpx: z.ZodDefault<z.ZodBoolean>;
enableCache: z.ZodDefault<z.ZodBoolean>;
enableClassNameCompression: z.ZodDefault<z.ZodBoolean>;
enableCssCompression: z.ZodDefault<z.ZodBoolean>;
enableRuntimeTheme: z.ZodDefault<z.ZodBoolean>;
cacheConfig: z.ZodDefault<z.ZodObject<{
dir: z.ZodDefault<z.ZodString>;
maxAge: z.ZodDefault<z.ZodNumber>;
maxSize: z.ZodDefault<z.ZodNumber>;
}, "strip", z.ZodTypeAny, {
dir: string;
maxAge: number;
maxSize: number;
}, {
dir?: string | undefined;
maxAge?: number | undefined;
maxSize?: number | undefined;
}>>;
performanceMonitoring: z.ZodDefault<z.ZodObject<{
enabled: z.ZodDefault<z.ZodBoolean>;
threshold: z.ZodDefault<z.ZodNumber>;
format: z.ZodDefault<z.ZodEnum<["text", "json"]>>;
}, "strip", z.ZodTypeAny, {
enabled: boolean;
threshold: number;
format: "text" | "json";
}, {
enabled?: boolean | undefined;
threshold?: number | undefined;
format?: "text" | "json" | undefined;
}>>;
debug: z.ZodDefault<z.ZodObject<{
enabled: z.ZodDefault<z.ZodBoolean>;
level: z.ZodDefault<z.ZodEnum<["info", "warn", "error", "debug"]>>;
outputFile: z.ZodDefault<z.ZodString>;
}, "strip", z.ZodTypeAny, {
enabled: boolean;
level: "info" | "warn" | "error" | "debug";
outputFile: string;
}, {
enabled?: boolean | undefined;
level?: "info" | "warn" | "error" | "debug" | undefined;
outputFile?: string | undefined;
}>>;
}, "strip", z.ZodTypeAny, {
debug: {
enabled: boolean;
level: "info" | "warn" | "error" | "debug";
outputFile: string;
};
platform: "weapp" | "h5";
verbose: boolean;
safelist: string[];
cssSelectorReplacement: {
root: string;
universal: string;
};
autoDetectTailwindVersion: boolean;
enableSmartClassDetection: boolean;
enablePerformanceOptimization: boolean;
enableHotReload: boolean;
enableSourceMap: boolean;
enableBundleAnalysis: boolean;
enableAutoPatch: boolean;
enableRuntime: boolean;
enableClassPatch: boolean;
enableSelectorPatch: boolean;
enableRpx: boolean;
enableCache: boolean;
enableClassNameCompression: boolean;
enableCssCompression: boolean;
enableRuntimeTheme: boolean;
cacheConfig: {
dir: string;
maxAge: number;
maxSize: number;
};
performanceMonitoring: {
enabled: boolean;
threshold: number;
format: "text" | "json";
};
}, {
debug?: {
enabled?: boolean | undefined;
level?: "info" | "warn" | "error" | "debug" | undefined;
outputFile?: string | undefined;
} | undefined;
platform?: "weapp" | "h5" | undefined;
verbose?: boolean | undefined;
safelist?: string[] | undefined;
cssSelectorReplacement?: {
root?: string | undefined;
universal?: string | undefined;
} | undefined;
autoDetectTailwindVersion?: boolean | undefined;
enableSmartClassDetection?: boolean | undefined;
enablePerformanceOptimization?: boolean | undefined;
enableHotReload?: boolean | undefined;
enableSourceMap?: boolean | undefined;
enableBundleAnalysis?: boolean | undefined;
enableAutoPatch?: boolean | undefined;
enableRuntime?: boolean | undefined;
enableClassPatch?: boolean | undefined;
enableSelectorPatch?: boolean | undefined;
enableRpx?: boolean | undefined;
enableCache?: boolean | undefined;
enableClassNameCompression?: boolean | undefined;
enableCssCompression?: boolean | undefined;
enableRuntimeTheme?: boolean | undefined;
cacheConfig?: {
dir?: string | undefined;
maxAge?: number | undefined;
maxSize?: number | undefined;
} | undefined;
performanceMonitoring?: {
enabled?: boolean | undefined;
threshold?: number | undefined;
format?: "text" | "json" | undefined;
} | undefined;
}>;
type PluginOptionsFromSchema = z.infer<typeof PluginOptionsSchema>;
/**
* 构建统计信息
*/
interface BuildStats {
/** 处理文件数量 */
processedFiles: number;
/** 原始大小 */
originalSize: number;
/** 处理后大小 */
processedSize: number;
/** 压缩率 */
compressionRatio: number;
/** 构建时间 */
buildTime: number;
/** 处理的类名数量 */
totalClasses: number;
/** 缓存命中率 */
cacheHitRate: number;
/** 平均处理时间 */
averageProcessTime: number;
}
interface BuildStats {
processedFiles: number;
totalSize: number;
originalSize: number;
buildTime: number;
totalTime: number;
cacheHitRate: number;
totalClasses: number;
averageProcessTime: number;
}
/**
* 超越 weapp-tailwindcss 的 Vite 插件
*
* 核心优势：
* 1. 零配置开箱即用
* 2. 智能类名检测和自动 safelist
* 3. 更强大的主题系统
* 4. 运行时动态切换
* 5. 详细的性能分析
* 6. 更好的错误处理和调试体验
* 7. 支持 TailwindCSS v3/v4 自动检测
*/
declare function createVitePlugin(options?: Partial<PluginOptionsFromSchema>): Plugin;
/**
* 超越 weapp-tailwindcss 的 Webpack 插件
*
* 核心优势：
* 1. 零配置开箱即用
* 2. 智能类名检测和自动 safelist
* 3. 更强大的主题系统
* 4. 运行时动态切换
* 5. 详细的性能分析
* 6. 更好的错误处理和调试体验
* 7. 支持 TailwindCSS v3/v4 自动检测
*/
declare function createWebpackPlugin(options?: PluginOptions): any;
/**
* 超越 weapp-tailwindcss 的微信小程序类名转义工具
*
* 核心优势：
* 1. 更全面的特殊字符处理
* 2. 更智能的转义策略
* 3. 更好的性能优化
* 4. 支持更多类名模式
* 5. 更好的错误处理
* 6. 详细的调试信息
*/
declare function escapeWeappClass(className: string): string;
/**
* 批量转义类名
*/
declare function escapeWeappClasses(classNames: string[]): string[];
/**
* 转义类名字符串（空格分隔）
*/
declare function escapeWeappClassString(classString: string): string;
/**
* 超越 weapp-tailwindcss 的微信小程序 CSS 合法化工具
*
* 核心优势：
* 1. 更智能的 AST 解析和转换
* 2. 更全面的选择器处理
* 3. 更强大的属性值处理
* 4. 更好的错误恢复机制
* 5. 支持更多 CSS 特性
* 6. 性能优化和缓存
*/
declare function legalizeWeappCss(css: string): string;
type LogLevel = 'info' | 'warn' | 'error' | 'success' | 'debug';
declare class Logger {
private verbose;
constructor(verbose?: boolean);
info(...args: any[]): void;
warn(...args: any[]): void;
error(...args: any[]): void;
success(...args: any[]): void;
debug(...args: any[]): void;
log(level: LogLevel, ...args: any[]): void;
}
/**
* 超越 weapp-tailwindcss 的 TailwindCSS Taro 插件
*
* 核心优势：
* 1. 零配置开箱即用
* 2. 智能类名检测和自动 safelist
* 3. 更强大的主题系统
* 4. 运行时动态切换
* 5. 详细的性能分析
* 6. 更好的错误处理和调试体验
* 7. 支持 TailwindCSS v3/v4 自动检测
* 8. 更全面的微信小程序兼容性
* 9. 更智能的类名转义
* 10. 更强大的 CSS 合法化
*/
declare const defaultConfig: {
platform: "weapp";
enabled: boolean;
verbose: boolean;
autoDetectTailwindVersion: boolean;
enableSmartClassDetection: boolean;
enablePerformanceOptimization: boolean;
enableHotReload: boolean;
enableSourceMap: boolean;
enableBundleAnalysis: boolean;
enableRuntimeTheme: boolean;
enableClassNameCompression: boolean;
enableCssCompression: boolean;
enableCache: boolean;
cssSelectorReplacement: {
root: string;
universal: string;
};
cacheConfig: {
dir: string;
maxAge: number;
maxSize: number;
};
performanceMonitoring: {
enabled: boolean;
threshold: number;
format: "text";
};
debug: {
enabled: boolean;
level: "info";
outputFile: string;
};
};
declare const version = "2.0.0";
declare const pluginInfo: {
name: string;
version: string;
description: string;
author: string;
license: string;
repository: string;
homepage: string;
bugs: string;
keywords: string[];
engines: {
node: string;
};
peerDependencies: {
tailwindcss: string;
taro: string;
};
};
declare const compatibility: {
tailwindcss: string[];
taro: string[];
platforms: string[];
bundlers: string[];
node: string;
};
declare const features: {
core: string[];
performance: string[];
developerExperience: string[];
advanced: string[];
compatibility: string[];
};
declare const examples: {
basic: string;
advanced: string;
theme: string;
};
declare const faq: {
'\u5982\u4F55\u542F\u7528\u8BE6\u7EC6\u65E5\u5FD7\uFF1F': string;
'\u5982\u4F55\u4F18\u5316\u6784\u5EFA\u6027\u80FD\uFF1F': string;
'\u5982\u4F55\u652F\u6301\u8FD0\u884C\u65F6\u4E3B\u9898\u5207\u6362\uFF1F': string;
'\u5982\u4F55\u5904\u7406\u7279\u6B8A\u7C7B\u540D\uFF1F': string;
'\u5982\u4F55\u8C03\u8BD5\u6784\u5EFA\u95EE\u9898\uFF1F': string;
'\u5982\u4F55\u5206\u6790\u6784\u5EFA\u4EA7\u7269\uFF1F': string;
'\u5982\u4F55\u76D1\u63A7\u6027\u80FD\uFF1F': string;
};
declare const troubleshooting: {
构建失败: string[];
类名未生效: string[];
性能问题: string[];
兼容性问题: string[];
};
export { type BuildStats, type ClassTransformResult, type CssTransformResult, type DebugInfo, Logger, type PerformanceEvent, type PluginOptions, type PluginState, type RuntimeThemeConfig, type ThemeConfig, type VitePlugin, type WebpackPlugin, compatibility, createVitePlugin, createWebpackPlugin, defaultConfig, escapeWeappClass, escapeWeappClassString, escapeWeappClasses, examples, faq, features, legalizeWeappCss, pluginInfo, troubleshooting, version };