perf!: 自动检测是否使用 Lightning CSS 来加快 css 处理

package.json

@@ -45,6 +45,7 @@
     "browserslist": "^4.22.2",
     "c8": "^8.0.1",
     "changelogen": "^0.5.5",
+    "consola": "^3.2.3",
     "cross-env": "^7.0.3",
     "defu": "^6.1.3",
     "echarts": "^5.4.3",
@@ -54,6 +55,7 @@
     "eslint-plugin-vue": "^9.19.2",
     "husky": "^8.0.3",
     "ityped": "^1.0.3",
+    "kolorist": "^1.8.0",
     "lightningcss": "^1.22.1",
     "lint-staged": "^15.2.0",
     "local-pkg": "^0.5.0",

presets/index.ts

@@ -44,7 +44,7 @@ import Jsx from '@vitejs/plugin-vue-jsx'
 import type { ComponentResolver } from 'unplugin-vue-components/types'
 
 // 内置插件
-import { Alias, Restart, Warmup } from './plugins'
+import { Alias, Restart, Warmup, Lightningcss } from './plugins'
 import { r } from './shared/path'
 import { defaultBuildTargets } from './shared/detect'
 
@@ -60,6 +60,10 @@ export default function () {
 		Legacy({
 			targets: defaultBuildTargets,
 		}),
+		/**
+		 * 智能启动 lightningcss
+		 */
+		Lightningcss(),
 		/**
 		 * 环境变量类型提示
 		 * https://github.com/dishait/vite-plugin-env-types

presets/plugins/index.ts

@@ -1,3 +1,4 @@
 export { Alias } from './alias'
 export { Warmup } from './warmup'
 export { Restart } from './restart'
+export { Lightningcss } from './lightningcss'

presets/plugins/lightningcss.ts

@@ -0,0 +1,54 @@
+import { existsSync } from 'fs'
+import { gray } from 'kolorist'
+import type { Plugin } from 'vite'
+import { createConsola } from 'consola'
+import { isPackageExists } from 'local-pkg'
+
+const name = 'vite-plugin-fire-lightningcss'
+
+const logger = createConsola().withTag('css')
+
+/**
+ * 智能开启 lightningcss (如果不使用预处理器，或者 postcss)
+ */
+export function Lightningcss(): Plugin {
+	const packages = ['less', 'sass', 'stylus']
+	return {
+		name,
+		config(config) {
+			config.css ??= {}
+			config.build ??= {}
+			const hasPreprocessor = packages.some((p) => isPackageExists(p))
+
+			const { postcss, modules, transformer } = config.css
+			const conflictConfiguration = [postcss, modules, transformer].some(
+				(c) => !isUndefined(c),
+			)
+
+			const hasPostcssConfigFile = [
+				'postcss.config.js',
+				'postcss.config.cts',
+				'postcss.config.ts',
+			].some((c) => existsSync(c))
+
+			// 如果有预处理器，冲突配置或者 postcss 配置文件则禁用
+			const disabled =
+				hasPreprocessor || conflictConfiguration || hasPostcssConfigFile
+			if (!disabled) {
+				const transformer = 'lightningcss'
+				config.css.transformer = transformer
+				let tip = `${transformer} ${gray(transformer)}`
+
+				if (isUndefined(config.build.cssMinify)) {
+					config.build.cssMinify = 'lightningcss'
+					tip = `${transformer} ${gray('(transformer + cssMinify)')}`
+				}
+				logger.success(tip)
+			}
+		},
+	}
+
+	function isUndefined(v: unknown): v is undefined {
+		return typeof v === 'undefined'
+	}
+}