mirror of https://github.com/alibaba/ice.git
feat: support plugin of unocss (#6665)
* feat: support unocss * chore: update lock * docs: unocss docs * fix: remove unexpected commit * Update package.json
This commit is contained in:
ClarkXia
GitHub
parent
ddff555884
commit
d61d15f365
|
|
@ -0,0 +1,8 @@
|
|||
import { defineConfig } from '@ice/app';
|
||||
import Unocss from '@ice/plugin-unocss';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
plugins: [
|
||||
Unocss(),
|
||||
]
|
||||
}));
|
||||
|
|
@ -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:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { defineAppConfig } from 'ice';
|
||||
|
||||
export default defineAppConfig(() => ({}));
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default function Home() {
|
||||
return (
|
||||
<h1 className="text-3xl font-bold underline w-6em h-6em">
|
||||
Hello world!
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
|
@ -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(),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}));
|
||||
```
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "@ice/plugin-unocss",
|
||||
"version": "1.0.0",
|
||||
"description": "A plugin for enable unocss in your app based on `@ice/app`",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"rootDir": "src",
|
||||
"outDir": "esm"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
904
pnpm-lock.yaml
904
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: 使用原子化 CSS 能力
|
||||
order: 0701
|
||||
---
|
||||
|
||||
原子化 CSS 是一种 CSS 写法，它将 CSS 样式拆分成一个个独立的样式，每个样式只包含一个属性，比如：
|
||||
|
||||
```css
|
||||
/* 原子化 CSS */
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
通过原子化 CSS 能力，可以方便地支持响应式布局，以及减少 CSS 文件体积。
|
||||
|
||||
ice.js 官方提供了 `@ice/plugin-unocss` 插件，可以方便开发这一键开启原子化 CSS 能力。
|
||||
|
||||
## 开启插件
|
||||
|
||||
安装插件：
|
||||
|
||||
```bash
|
||||
$ npm i -D @ice/plugin-unocss
|
||||
```
|
||||
|
||||
在 `ice.config.mts` 中添加插件：
|
||||
|
||||
```ts title="ice.config.mts"
|
||||
import { defineConfig } from '@ice/app';
|
||||
import Unocss from '@ice/plugin-unocss';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
plugins: [
|
||||
Unocss(),
|
||||
]
|
||||
}));
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
为了方便开发者便捷使用，`@ice/plugin-unocss` 内置了默认的 [preset](https://unocss.dev/presets/uno)，开发者无需额外配置，可以通过插件配置项对内置配置进行覆盖：
|
||||
|
||||
```ts title="ice.config.mts"
|
||||
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(),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}));
|
||||
|
||||
```
|
||||
|
||||
插件配置能力，同 UnoCSS 配置能力保持一致，更多配置能力，请参考 [UnoCSS 配置文档](https://unocss.dev/guide/config-file)。
|
||||
|
||||
|
||||
|
|
@ -26,3 +26,7 @@ order: 2
|
|||
## [@ice/plugin-fusion](../advanced/fusion)
|
||||
|
||||
提供 fusion 组件样式按需加载及主题配置能力。
|
||||
|
||||
## [@ice/plugin-unocss](../advanced/unocss)
|
||||
|
||||
提供 UnoCSS 原子化 CSS 能力。
|
||||
|
|
|
|||
Loading…
Reference in New Issue