This commit is contained in:
icssoa 2025-05-21 18:52:17 +08:00
parent c496af0566
commit 9cf476e603
7 changed files with 62 additions and 96 deletions

View File

@ -1,24 +1,2 @@
import type { Config } from "../types"; import type { Config } from "../types";
export declare function cool(options: Config.Options): (import("vite").Plugin<any> | Promise<import("vite").Plugin<any>> | { export declare function cool(options: Config.Options): (import("vite").Plugin<any> | Promise<import("vite").Plugin<any>> | import("vite").Plugin<any>[])[];
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;
}[])[];

View File

@ -44,6 +44,12 @@
svg: { svg: {
skipNames: ["base"], skipNames: ["base"],
}, },
tailwind: {
enable: true,
remUnit: 16,
remPrecision: 6,
rpxRatio: 2,
},
}; };
// 根目录 // 根目录
@ -1052,6 +1058,9 @@ if (typeof window !== 'undefined') {
"]": "-", "]": "-",
"(": "-", "(": "-",
")": "-", ")": "-",
"{": "-",
"}": "-",
$: "-v-",
"#": "-h-", "#": "-h-",
"!": "-i-", "!": "-i-",
"/": "-s-", "/": "-s-",
@ -1231,12 +1240,12 @@ if (typeof window !== 'undefined') {
* @param options 配置项 * @param options 配置项
* @returns PostCSS 插件对象 * @returns PostCSS 插件对象
*/ */
function postcssRemToRpx(options) { function postcssRemToRpx() {
return { return {
postcssPlugin: "vite-cool-uniappx-remToRpx", postcssPlugin: "vite-cool-uniappx-remToRpx",
prepare() { prepare() {
const handledSelectors = new Set(); 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; const factor = remUnit * rpxRatio;
return { return {
Rule(rule) { Rule(rule) {
@ -1307,16 +1316,8 @@ if (typeof window !== 'undefined') {
/** /**
* Vite 插件自动转换 .uvue 文件中的 Tailwind 类名为安全字符 * Vite 插件自动转换 .uvue 文件中的 Tailwind 类名为安全字符
* 并自动注入 rem rpx PostCSS 插件 * 并自动注入 rem rpx PostCSS 插件
* @param options 配置项
* @returns Vite 插件对象
*/ */
function tailwindTransformPlugin(options = {}) { function tailwindTransformPlugin() {
const merged = {
remUnit: 16,
remPrecision: 6,
rpxRatio: 2,
...options,
};
return { return {
name: "vite-cool-uniappx-tailwind", name: "vite-cool-uniappx-tailwind",
enforce: "pre", enforce: "pre",
@ -1324,7 +1325,7 @@ if (typeof window !== 'undefined') {
return { return {
css: { css: {
postcss: { postcss: {
plugins: [postcssRemToRpx(merged)], plugins: [postcssRemToRpx()],
}, },
}, },
}; };
@ -1368,9 +1369,11 @@ if (typeof window !== 'undefined') {
* @param options 配置项 * @param options 配置项
* @returns Vite 插件数组 * @returns Vite 插件数组
*/ */
function uniappX(options) { function uniappX() {
if (config.type == "uniapp-x") { if (config.type == "uniapp-x") {
return [tailwindTransformPlugin(options?.tailwind)]; if (config.tailwind.enable) {
return [tailwindTransformPlugin()];
}
} }
return []; return [];
} }
@ -1404,6 +1407,10 @@ if (typeof window !== 'undefined') {
lodash.merge(config.eps.mapping, mapping); lodash.merge(config.eps.mapping, mapping);
} }
} }
// tailwind
if (options.tailwind) {
lodash.assign(config.tailwind, options.tailwind);
}
return [base(), virtual(), uniappX(), demo(options.demo)]; return [base(), virtual(), uniappX(), demo(options.demo)];
} }

View File

@ -1,38 +1,7 @@
interface PostcssRemToRpxOptions { import type { Plugin } from "vite";
remUnit?: number;
remPrecision?: number;
rpxRatio?: number;
}
interface TailwindTransformOptions extends PostcssRemToRpxOptions {
}
/** /**
* uniappX Tailwind * uniappX Tailwind
* @param options * @param options
* @returns Vite * @returns Vite
*/ */
export declare function uniappX(options?: { export declare function uniappX(): Plugin<any>[];
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 {};

View File

@ -41,4 +41,10 @@ export const config: Config.Data = {
svg: { svg: {
skipNames: ["base"], skipNames: ["base"],
}, },
tailwind: {
enable: true,
remUnit: 16,
remPrecision: 6,
rpxRatio: 2,
},
}; };

View File

@ -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)]; return [base(), virtual(), uniappX(), demo(options.demo)];
} }

View File

@ -1,6 +1,8 @@
// @ts-ignore // @ts-ignore
import valueParser from "postcss-value-parser"; import valueParser from "postcss-value-parser";
import { config } from "../config"; import { config } from "../config";
import type { Plugin } from "vite";
import { Config } from "../../types";
/** /**
* Tailwind CSS * Tailwind CSS
@ -11,6 +13,9 @@ const TAILWIND_SAFE_CHAR_MAP: Record<string, string> = {
"]": "-", "]": "-",
"(": "-", "(": "-",
")": "-", ")": "-",
"{": "-",
"}": "-",
$: "-v-",
"#": "-h-", "#": "-h-",
"!": "-i-", "!": "-i-",
"/": "-s-", "/": "-s-",
@ -202,23 +207,17 @@ function rgbToRgba(value: string): string {
return value; return value;
} }
interface PostcssRemToRpxOptions {
remUnit?: number;
remPrecision?: number;
rpxRatio?: number;
}
/** /**
* PostCSS rem rpx Tailwind * PostCSS rem rpx Tailwind
* @param options * @param options
* @returns PostCSS * @returns PostCSS
*/ */
function postcssRemToRpx(options: PostcssRemToRpxOptions) { function postcssRemToRpx() {
return { return {
postcssPlugin: "vite-cool-uniappx-remToRpx", postcssPlugin: "vite-cool-uniappx-remToRpx",
prepare() { prepare() {
const handledSelectors = new Set<string>(); const handledSelectors = new Set<string>();
const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = options; const { remUnit = 16, remPrecision = 6, rpxRatio = 2 } = config.tailwind;
const factor = remUnit * rpxRatio; const factor = remUnit * rpxRatio;
return { return {
@ -289,37 +288,26 @@ function postcssRemToRpx(options: PostcssRemToRpxOptions) {
} }
postcssRemToRpx.postcss = true; postcssRemToRpx.postcss = true;
interface TailwindTransformOptions extends PostcssRemToRpxOptions {}
/** /**
* Vite .uvue Tailwind * Vite .uvue Tailwind
* rem rpx PostCSS * rem rpx PostCSS
* @param options
* @returns Vite
*/ */
function tailwindTransformPlugin(options: TailwindTransformOptions = {}) { function tailwindTransformPlugin() {
const merged: Required<TailwindTransformOptions> = {
remUnit: 16,
remPrecision: 6,
rpxRatio: 2,
...options,
};
return { return {
name: "vite-cool-uniappx-tailwind", name: "vite-cool-uniappx-tailwind",
enforce: "pre" as const, enforce: "pre",
config() { config() {
return { return {
css: { css: {
postcss: { postcss: {
plugins: [postcssRemToRpx(merged)], plugins: [postcssRemToRpx()],
}, },
}, },
}; };
}, },
transform(code: string, id: string) { transform(code, id) {
if (!id.includes(".uvue")) return null; if (!id.includes(".uvue")) return null;
let resultCode = code; let resultCode = code;
@ -353,7 +341,7 @@ function tailwindTransformPlugin(options: TailwindTransformOptions = {}) {
} }
return null; return null;
}, },
}; } as Plugin;
} }
/** /**
@ -361,9 +349,11 @@ function tailwindTransformPlugin(options: TailwindTransformOptions = {}) {
* @param options * @param options
* @returns Vite * @returns Vite
*/ */
export function uniappX(options?: { tailwind?: TailwindTransformOptions }) { export function uniappX() {
if (config.type == "uniapp-x") { if (config.type == "uniapp-x") {
return [tailwindTransformPlugin(options?.tailwind)]; if (config.tailwind.enable) {
return [tailwindTransformPlugin()];
}
} }
return []; return [];

View File

@ -106,6 +106,17 @@ export declare namespace Config {
// 跳过拼接模块名 // 跳过拼接模块名
skipNames?: string[]; skipNames?: string[];
}; };
// tailwind
tailwind?: {
// 是否开启tailwind
enable?: boolean;
// 根元素字体大小
remUnit?: number;
// 小数位数
remPrecision?: number;
// 转换比例
rpxRatio?: number;
};
} }
interface Data { interface Data {
type: Type; type: Type;