feat: use postcss plugin to transform unocss (#6790)

alibaba · Feb 18, 2024 · e0b2eae · e0b2eae
1 parent 3ce4cb8
commit e0b2eae
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 900 deletions.
diff --git a/.changeset/yellow-donkeys-fetch.md b/.changeset/yellow-donkeys-fetch.md
@@ -0,0 +1,5 @@
+---
+'@ice/plugin-unocss': minor
+---
+
+fix: use postcss plugin to transform unocss
diff --git a/packages/plugin-unocss/package.json b/packages/plugin-unocss/package.json
@@ -16,18 +16,16 @@
   "files": [
     "esm",
     "!esm/**/*.map",
-    "*.d.ts"
+    "*.d.ts",
+    "uno.css"
   ],
   "dependencies": {
-    "@unocss/config": "^0.57.6",
-    "@unocss/core": "^0.57.6",
-    "@unocss/reset": "^0.57.6",
-    "@unocss/webpack": "^0.57.6",
-    "unocss": "^0.57.6"
+    "@unocss/preset-uno": "^0.58.5",
+    "@unocss/postcss": "^0.58.5"
   },
   "devDependencies": {
-    "@ice/app": "workspace:^",
-    "@nuxt/schema": "^3.8.1"
+    "@unocss/core": "^0.58.5",
+    "@ice/app": "workspace:^"
   },
   "repository": {
     "type": "http",

diff --git a/packages/plugin-unocss/src/index.ts b/packages/plugin-unocss/src/index.ts
@@ -1,10 +1,13 @@
+import * as path from 'path';
+import { fileURLToPath } from 'url';
 import type { Plugin } from '@ice/app/types';
-import UnocssWebpackPlugin from '@unocss/webpack';
 import type { UserConfig } from '@unocss/core';
-import { presetUno } from 'unocss';
+import presetUno from '@unocss/preset-uno';
 
 const PLUGIN_NAME = '@ice/plugin-unocss';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const plugin: Plugin<UserConfig> = (options) => ({
   name: PLUGIN_NAME,
   setup: ({ generator, onGetConfig }) => {
@@ -35,14 +38,15 @@ const plugin: Plugin<UserConfig> = (options) => ({
       ],
     };
     onGetConfig((config) => {
-      // Unocss is conflict with webpack 5 persistent caching.
-      config.enableCache = false;
-      config.configureWebpack ??= [];
-      config.configureWebpack.push((webpackConfig) => {
-        // @ts-expect-error
-        webpackConfig.plugins.push(UnocssWebpackPlugin({}, unoConfig));
-        return webpackConfig;
-      });
+      config.alias = {
+        ...config.alias,
+        'uno.css': path.join(__dirname, '../uno.css'),
+      };
+      config.postcss = {
+        plugins: [['@unocss/postcss', {
+          configOrPath: unoConfig,
+        }]],
+      };
     });
   },
 });

diff --git a/packages/plugin-unocss/uno.css b/packages/plugin-unocss/uno.css
@@ -0,0 +1 @@
+@unocss all;