alibaba · ClarkXia · Nov 29, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 21, 2023
diff --git a/examples/with-unocss/ice.config.mts b/examples/with-unocss/ice.config.mts
@@ -0,0 +1,8 @@
+import { defineConfig } from '@ice/app';
+import Unocss from '@ice/plugin-unocss';
+
+export default defineConfig(() => ({
+  plugins: [
+    Unocss(),
+  ]
+}));
diff --git a/examples/with-unocss/package.json b/examples/with-unocss/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@examples/with-unocss",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "dependencies": {
+    "@ice/runtime": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@ice/app": "workspace:*",
+    "@ice/plugin-unocss": "workspace:*"
+  }
+}
diff --git a/examples/with-unocss/src/app.ts b/examples/with-unocss/src/app.ts
@@ -0,0 +1,3 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig(() => ({}));
diff --git a/examples/with-unocss/src/document.tsx b/examples/with-unocss/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="with-web-worker" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-unocss/src/pages/index.tsx b/examples/with-unocss/src/pages/index.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <h1 className="text-3xl font-bold underline w-6em h-6em">
+      Hello world!
+    </h1>
+  );
+}
diff --git a/packages/plugin-unocss/README.md b/packages/plugin-unocss/README.md
@@ -0,0 +1,76 @@
+# @ice/plugin-unocss
+
+A plugin for enable unocss in your app based on `@ice/app`.
+
+
+## Usage
+
+Install `@ice/plugin-unocss`:
+
+```bash
+$ npm install @ice/plugin-unocss --save-dev
+```
+
+Configure it in `ice.config.mts`:
+
+```ts
+import { defineConfig } from '@ice/app';
+import Unocss from '@ice/plugin-unocss';
+
+export default defineConfig(() => ({
+  plugins: [
+    Unocss(),
+  ]
+}));
+```
+
+## Plugin Options
+
+Plugin options is as same as [UnoCSS ConfigFle](https://unocss.dev/guide/config-file).
+
+Plugin has a default preset `@unocss/preset-uno` for UnoCSS. You can pass options of presets to override the default preset:
+
+```ts
+import { defineConfig } from '@ice/app';
+import Unocss from '@ice/plugin-unocss';
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup
+} from 'unocss';
+
+export default defineConfig(() => ({
+  plugins: [
+    Unocss({
+      shortcuts: [
+        // ...
+      ],
+      theme: {
+        colors: {
+          // ...
+        }
+      },
+      presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons(),
+        presetTypography(),
+        presetWebFonts({
+          fonts: {
+            // ...
+          },
+        }),
+      ],
+      transformers: [
+        transformerDirectives(),
+        transformerVariantGroup(),
+      ],
+    }),
+  ],
+}));
+```
diff --git a/packages/plugin-unocss/package.json b/packages/plugin-unocss/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@ice/plugin-unocss",
+  "version": "1.0.0",
+  "description": "",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.js",
+      "default": "./esm/index.js"
+    }
+  },
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "files": [
+    "esm",
+    "!esm/**/*.map",
+    "*.d.ts"
+  ],
+  "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"
+  },
+  "devDependencies": {
+    "@ice/app": "workspace:^",
+    "@nuxt/schema": "^3.8.1"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/alibaba/ice/tree/master/packages/plugin-unocss"
+  },
+  "scripts": {
+    "watch": "tsc -w --sourceMap",
+    "build": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/plugin-unocss/src/index.ts b/packages/plugin-unocss/src/index.ts
@@ -0,0 +1,34 @@
+import type { Plugin } from '@ice/app/types';
+import UnocssWebpackPlugin from '@unocss/webpack';
+import type { UserConfig } from '@unocss/core';
+import { presetUno } from 'unocss';
+
+const PLUGIN_NAME = '@ice/plugin-unocss';
+
+const plugin: Plugin<UserConfig> = (options) => ({
+  name: PLUGIN_NAME,
+  setup: ({ generator, onGetConfig }) => {
+    // Import uno.css in entry, when uno mode is global or dist-chunk.
+    generator.addEntryImportAhead({
+      source: 'uno.css',
+    });
+
+    // Register webpack plugin of unocss.
+    const unoConfig: UserConfig = options || {
+      presets: [
+        // Add default preset if option is null.
+        presetUno(),
+      ],
+    };
+    onGetConfig((config) => {
+      config.configureWebpack ??= [];
+      config.configureWebpack.push((webpackConfig) => {
+        // @ts-expect-error
+        webpackConfig.plugins.push(UnocssWebpackPlugin({}, unoConfig));
+        return webpackConfig;
+      });
+    });
+  },
+});
+
+export default plugin;
diff --git a/packages/plugin-unocss/tsconfig.json b/packages/plugin-unocss/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "rootDir": "src",
+    "outDir": "esm"
+  },
+  "include": ["src"]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { defineAppConfig } from 'ice';

		export default defineAppConfig(() => ({}));