diff --git a/packages/vite-plugin/dist/index.d.ts b/packages/vite-plugin/dist/index.d.ts index 742068d..f20d679 100644 --- a/packages/vite-plugin/dist/index.d.ts +++ b/packages/vite-plugin/dist/index.d.ts @@ -1,24 +1,2 @@ import type { Config } from "../types"; -export declare function cool(options: Config.Options): (import("vite").Plugin | Promise> | { - name: string; - enforce: "pre"; - config(): { - css: { - postcss: { - plugins: { - postcssPlugin: string; - prepare(): { - Rule(rule: any): void; - Declaration(decl: any): void; - }; - }[]; - }; - }; - }; - transform(code: string, id: string): { - code: string; - map: { - mappings: string; - }; - } | null; -}[])[]; +export declare function cool(options: Config.Options): (import("vite").Plugin | Promise> | import("vite").Plugin[])[]; diff --git a/packages/vite-plugin/dist/index.js b/packages/vite-plugin/dist/index.js index 77cfd70..43bb900 100644 --- a/packages/vite-plugin/dist/index.js +++ b/packages/vite-plugin/dist/index.js @@ -44,6 +44,12 @@ svg: { skipNames: ["base"], }, + tailwind: { + enable: true, + remUnit: 16, + remPrecision: 6, + rpxRatio: 2, + }, }; // 根目录 @@ -1052,6 +1058,9 @@ if (typeof window !== 'undefined') { "]": "-", "(": "-", ")": "-", + "{": "-", + "}": "-", + $: "-v-", "#": "-h-", "!": "-i-", "/": "-s-", @@ -1231,12 +1240,12 @@ if (typeof window !== 'undefined') { * @param options 配置项 * @returns PostCSS 插件对象 */ - function postcssRemToRpx(options) { + function postcssRemToRpx() { return { postcssPlugin: "vite-cool-uniappx-remToRpx", prepare() { const handledSelectors = new Set(); - const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = options; + const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = config.tailwind; const factor = remUnit * rpxRatio; return { Rule(rule) { @@ -1307,16 +1316,8 @@ if (typeof window !== 'undefined') { /** * Vite 插件:自动转换 .uvue 文件中的 Tailwind 类名为安全字符 * 并自动注入 rem 转 rpx 的 PostCSS 插件 - * @param options 配置项 - * @returns Vite 插件对象 */ - function tailwindTransformPlugin(options = {}) { - const merged = { - remUnit: 16, - remPrecision: 6, - rpxRatio: 2, - ...options, - }; + function tailwindTransformPlugin() { return { name: "vite-cool-uniappx-tailwind", enforce: "pre", @@ -1324,7 +1325,7 @@ if (typeof window !== 'undefined') { return { css: { postcss: { - plugins: [postcssRemToRpx(merged)], + plugins: [postcssRemToRpx()], }, }, }; @@ -1368,9 +1369,11 @@ if (typeof window !== 'undefined') { * @param options 配置项 * @returns Vite 插件数组 */ - function uniappX(options) { + function uniappX() { if (config.type == "uniapp-x") { - return [tailwindTransformPlugin(options?.tailwind)]; + if (config.tailwind.enable) { + return [tailwindTransformPlugin()]; + } } return []; } @@ -1404,6 +1407,10 @@ if (typeof window !== 'undefined') { lodash.merge(config.eps.mapping, mapping); } } + // tailwind + if (options.tailwind) { + lodash.assign(config.tailwind, options.tailwind); + } return [base(), virtual(), uniappX(), demo(options.demo)]; } diff --git a/packages/vite-plugin/dist/uniapp-x/index.d.ts b/packages/vite-plugin/dist/uniapp-x/index.d.ts index b3ae37d..5ce28ee 100644 --- a/packages/vite-plugin/dist/uniapp-x/index.d.ts +++ b/packages/vite-plugin/dist/uniapp-x/index.d.ts @@ -1,38 +1,7 @@ -interface PostcssRemToRpxOptions { - remUnit?: number; - remPrecision?: number; - rpxRatio?: number; -} -interface TailwindTransformOptions extends PostcssRemToRpxOptions { -} +import type { Plugin } from "vite"; /** * uniappX 入口,自动注入 Tailwind 类名转换插件 * @param options 配置项 * @returns Vite 插件数组 */ -export declare function uniappX(options?: { - tailwind?: TailwindTransformOptions; -}): { - name: string; - enforce: "pre"; - config(): { - css: { - postcss: { - plugins: { - postcssPlugin: string; - prepare(): { - Rule(rule: any): void; - Declaration(decl: any): void; - }; - }[]; - }; - }; - }; - transform(code: string, id: string): { - code: string; - map: { - mappings: string; - }; - } | null; -}[]; -export {}; +export declare function uniappX(): Plugin[]; diff --git a/packages/vite-plugin/src/config.ts b/packages/vite-plugin/src/config.ts index 538f0b1..bcac32c 100644 --- a/packages/vite-plugin/src/config.ts +++ b/packages/vite-plugin/src/config.ts @@ -41,4 +41,10 @@ export const config: Config.Data = { svg: { skipNames: ["base"], }, + tailwind: { + enable: true, + remUnit: 16, + remPrecision: 6, + rpxRatio: 2, + }, }; diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 7a40894..8fabcbc 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -45,5 +45,10 @@ export function cool(options: Config.Options) { } } + // tailwind + if (options.tailwind) { + assign(config.tailwind, options.tailwind); + } + return [base(), virtual(), uniappX(), demo(options.demo)]; } diff --git a/packages/vite-plugin/src/uniapp-x/index.ts b/packages/vite-plugin/src/uniapp-x/index.ts index f4660ff..e694188 100644 --- a/packages/vite-plugin/src/uniapp-x/index.ts +++ b/packages/vite-plugin/src/uniapp-x/index.ts @@ -1,6 +1,8 @@ // @ts-ignore import valueParser from "postcss-value-parser"; import { config } from "../config"; +import type { Plugin } from "vite"; +import { Config } from "../../types"; /** * Tailwind CSS 特殊字符映射表 @@ -11,6 +13,9 @@ const TAILWIND_SAFE_CHAR_MAP: Record = { "]": "-", "(": "-", ")": "-", + "{": "-", + "}": "-", + $: "-v-", "#": "-h-", "!": "-i-", "/": "-s-", @@ -202,23 +207,17 @@ function rgbToRgba(value: string): string { return value; } -interface PostcssRemToRpxOptions { - remUnit?: number; - remPrecision?: number; - rpxRatio?: number; -} - /** * PostCSS 插件:将 rem 单位转换为 rpx,并处理 Tailwind 特殊字符 * @param options 配置项 * @returns PostCSS 插件对象 */ -function postcssRemToRpx(options: PostcssRemToRpxOptions) { +function postcssRemToRpx() { return { postcssPlugin: "vite-cool-uniappx-remToRpx", prepare() { const handledSelectors = new Set(); - const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = options; + const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = config.tailwind; const factor = remUnit * rpxRatio; return { @@ -289,37 +288,26 @@ function postcssRemToRpx(options: PostcssRemToRpxOptions) { } postcssRemToRpx.postcss = true; -interface TailwindTransformOptions extends PostcssRemToRpxOptions {} - /** * Vite 插件:自动转换 .uvue 文件中的 Tailwind 类名为安全字符 * 并自动注入 rem 转 rpx 的 PostCSS 插件 - * @param options 配置项 - * @returns Vite 插件对象 */ -function tailwindTransformPlugin(options: TailwindTransformOptions = {}) { - const merged: Required = { - remUnit: 16, - remPrecision: 6, - rpxRatio: 2, - ...options, - }; - +function tailwindTransformPlugin() { return { name: "vite-cool-uniappx-tailwind", - enforce: "pre" as const, + enforce: "pre", config() { return { css: { postcss: { - plugins: [postcssRemToRpx(merged)], + plugins: [postcssRemToRpx()], }, }, }; }, - transform(code: string, id: string) { + transform(code, id) { if (!id.includes(".uvue")) return null; let resultCode = code; @@ -353,7 +341,7 @@ function tailwindTransformPlugin(options: TailwindTransformOptions = {}) { } return null; }, - }; + } as Plugin; } /** @@ -361,9 +349,11 @@ function tailwindTransformPlugin(options: TailwindTransformOptions = {}) { * @param options 配置项 * @returns Vite 插件数组 */ -export function uniappX(options?: { tailwind?: TailwindTransformOptions }) { +export function uniappX() { if (config.type == "uniapp-x") { - return [tailwindTransformPlugin(options?.tailwind)]; + if (config.tailwind.enable) { + return [tailwindTransformPlugin()]; + } } return []; diff --git a/packages/vite-plugin/types/index.d.ts b/packages/vite-plugin/types/index.d.ts index d23111f..683c88a 100644 --- a/packages/vite-plugin/types/index.d.ts +++ b/packages/vite-plugin/types/index.d.ts @@ -106,6 +106,17 @@ export declare namespace Config { // 跳过拼接模块名 skipNames?: string[]; }; + // tailwind + tailwind?: { + // 是否开启tailwind + enable?: boolean; + // 根元素字体大小 + remUnit?: number; + // 小数位数 + remPrecision?: number; + // 转换比例 + rpxRatio?: number; + }; } interface Data { type: Type;