Skip to content

feat(breaking-change): use the new implementation strategy #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
baiwusanyu-c merged 16 commits into from
Mar 31, 2023
Merged

feat(breaking-change): use the new implementation strategy #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f87e89c
chore: temp commit
baiwusanyu-c Mar 29, 2023
0937ae7
chore: temp commit
baiwusanyu-c Mar 29, 2023
afb8b58
chore: temp commit
baiwusanyu-c Mar 29, 2023
70cffce
chore: temp commit
baiwusanyu-c Mar 29, 2023
00c73f6
update: delete preprocessor
baiwusanyu-c Mar 29, 2023
6fc4120
temp: temp commit
baiwusanyu-c Mar 29, 2023
738c6b3
update: dev server 功能完成
baiwusanyu-c Mar 30, 2023
2793216
update: dev server 功能完成
baiwusanyu-c Mar 30, 2023
9460a4f
update: how to inject css?
baiwusanyu-c Mar 30, 2023
6896a9e
update: dev server 功能完成
baiwusanyu-c Mar 30, 2023
a029f53
chore: temp commit
baiwusanyu-c Mar 30, 2023
56413b8
chore: temp commit
baiwusanyu-c Mar 30, 2023
805ae0f
update: 优化 server
baiwusanyu-c Mar 30, 2023
f277afd
chore: complete
baiwusanyu-c Mar 30, 2023
97024c0
fix: fix builde error
baiwusanyu-c Mar 31, 2023
4f1120a
docs: update README.md
baiwusanyu-c Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 21 additions & 101 deletions README.ZH-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,16 @@
## Feature

* 🧩 它是一个 vue 的功能扩展，让你能够在 css 文件中使用 v-bind
* 🌈 支持全平台打包工具构建
* 🌈 支持全平台打包工具构建（vite、webpack）
* ⛰ 支持 css, sass, scss, less, stylus
* ⚡ 轻量且快速

## Core Process
## Core Strategy
1.在使用开发服务器时，`unplugin-vue-cssvars`会从组件开始分析引用的css文件，
并在`@vitejs/plugin-vue` 的转换代码中进行注入样式
2.在打包时`unplugin-vue-cssvars`会从组件开始分析引用的css文件，并将其注入到
sfc 中，别担心会产生多余的代码，打包工具（例如 vite）会自动处理它。

```mermaid
graph LR
A[vite] -- plugin --> B((unplugin-vue-cssvars))
B -- 1.预处理项目中css文件 --> C(生成CSS Module Map获得包含 v-bind 的 css 代码等信息)
C --> D
B -- 2.基于步骤1与vue编译器 --> D(根据 SFC 组件信息获得其引用的 CSS Module)
D --> E
B -- 3.基于vue编译器 --> E(提取 SFC 组件变量)
E --> F
B -- 4.注入提升代码 --> F(匹配CSS Module 与 SFC 变量注入代码)
F --> G((vitejs/plugin-vue))
```

## Install
Expand All @@ -45,13 +38,18 @@ pnpm add unplugin-vue-cssvars -D

```ts
// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
viteVueCSSVars(/* options */) as PluginOption,
vue(),
viteVueCSSVars({
include: [/.vue/],
includeCompile: ['**/**.scss'],
server: false,
}) as PluginOption,
],
})
```
Expand All @@ -63,7 +61,6 @@ export default defineConfig({

```ts
// rollup.config.js
import { resolve } from 'path'
import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
export default {
plugins: [
Expand Down Expand Up @@ -127,6 +124,7 @@ export interface Options {
* @default process.cwd()
*/
rootDir?: string

/**
* 需要转换的文件名后缀列表（目前只支持.vue）RegExp or glob
*/
Expand All @@ -144,100 +142,22 @@ export interface Options {
*/
revoke?: boolean

/**
* 预处理器
* unplugin-vue-cssvars包没有集成预处理器，
* 当你想在预处理器文件中使用unplugin-vue-cssvars时，
* 请将预处理器传递给unplugin-vue-cssvars
* @property { sass | less | stylus }
*/
preprocessor?: PreProcessor

/**
* 选择需要处理编译的文件，默认是css
* 例如：如果你想要处理.scss文件，那么你可以传入 ['** /**.sass']
* @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
* @default ['** /**.css']
*/
includeCompile?: Array<string>

/**
* 标记是否为开发服务器使用
* 因为 unplugin-vue-cssvars uses 在开发服务器上和打包中使用了不同策略
* @default true
*/
server?: boolean
}
```
### 使用预处理器
`unplugin-vue-cssvars` 包没有集成预处理器， 当你想在预处理器文件中使用 `unplugin-vue-cssvars` 时， 请将预处理器传递给 `unplugin-vue-cssvars`

````typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
import sass from 'sass'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
viteVueCSSVars({
preprocessor: { sass },
includeCompile: ['**/**.css', '**/**.scss'],
}) as PluginOption,
],
})
````
在上面的例子中，如果你的项目使用了 `scss`，那么你需要配置 `preprocessor: { sass }`,
值得注意的是，你还需要配置 `includeCompile: ['**/**.css', '**/**.scss']`,
因为读取哪些文件（.sass 或 .less，还是 .styl）来使用 `unplugin-vue-cssvars` 完全由你来控制。

### 关于 revoke 详细说明
> 💡 正式版本以解决重复代码问题，正式版本不再需要设置

有如下两个文件 `App.vue` 和 `test.css`
````
<script setup lang="ts">
const color = 'red'
</script>

<template>
<div class="test">
TEST
</div>
</template>

<style scoped>
@import "./assets/test";
</style>

````
````
/** test.css **/
div {
color: v-bind(color);
}
````
当未使用 `unplugin-vue-cssvars` 使用 `vite` 构建后
````
/** test.css **/
div[data-v-2e7c9788] {
color: var(--8bcabd20);
}
````
其中 `color: var(--8bcabd20);` 的哈希并不会出现在组件打包产物中，因为 `vue` 不支持在文件中使用 `v-bind`。
当使用 `unplugin-vue-cssvars` 使用 `vite` 构建后（`minify: false`）
````
/** test.css **/
div[data-v-1dfefb04] {
color: var(--516b0d4a);
}

/* created by @unplugin-vue-cssvars */
/* <inject start> */
div[data-v-1dfefb04]{color:var(--516b0d4a)}
/* <inject end> */
````
可以看到通过 `unplugin-vue-cssvars` 会生成注入代码，并且依赖于 `@vue/compiler-dom`，其哈希值能够出现在组件打包产物中。
但是观察发现，这段代码是重复的。因此，开启 `revoke` 选项，将移除重复代码
````
/** test.css **/
div[data-v-1dfefb04] {
color: var(--516b0d4a);
}
````

## Tips

Expand Down
134 changes: 25 additions & 109 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,17 @@ English | [中文](https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/mas
## Feature

* 🧩 It is a function extension of vue
* 🌈 Compatible with multiple bundled platforms（vite、rollup、esbuild、webpack）
* 🌈 Compatible with multiple bundled platforms（vite、webpack）
* ⛰ Support css, sass, scss, less, stylus
* ⚡ light and fast

## Core Process
## Core Strategy

```mermaid
graph LR
A[vite] -- plugin --> B((unplugin-vue-cssvars))
B -- 1.Preprocess css files in the project --> C(Generate CSS Module Map to obtain information such as css code including v-bind)
C --> D
B -- 2.Based on step 1 with vue compiler --> D(Obtain the referenced CSS Module according to the SFC component information)
D --> E
B -- 3.Based on vue compiler --> E(Extract SFC component tags)
E --> F
B -- 4.inject code --> F(Match CSS Module and SFC variable injection code)
F --> G((vitejs/plugin-vue))
```
1.When using the development server,
`unplugin-vue-cssvars` will analyze the referenced css file from the component,
and inject styles in the transformation code of `@vitejs/plugin-vue`
2.When building, `unplugin-vue-cssvars` will analyze the referenced css file from the component and inject it into
sfc, don't worry about generating redundant code, packaging tools (such as vite) will automatically handle it.

## Install

Expand All @@ -45,13 +38,18 @@ pnpm add unplugin-vue-cssvars -D

```ts
// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
viteVueCSSVars(/* options */) as PluginOption,
vue(),
viteVueCSSVars({
include: [/.vue/],
includeCompile: ['**/**.scss'],
server: false,
}) as PluginOption,
],
})
```
Expand All @@ -63,12 +61,11 @@ export default defineConfig({

```ts
// rollup.config.js
import { resolve } from 'path'
import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
export default {
plugins: [
rollupVueCSSVars(/* options */),
],
plugins: [
rollupVueCSSVars(/* options */),
],
}
```

Expand Down Expand Up @@ -124,10 +121,10 @@ build({
export interface Options {
/**
* Provide path which will be transformed
*
* @default process.cwd()
*/
rootDir?: string

/**
* RegExp or glob to match files to be transformed
*/
Expand All @@ -144,103 +141,22 @@ export interface Options {
*/
revoke?: boolean

/**
* preprocessor
* the unplugin-vue-cssvars package does not integrate a preprocessor,
* when you want to use unplugin-vue-cssvars in the preprocessor file,
* please pass the preprocessor to unplugin-vue-cssvars
* @property { sass | less | stylus }
*/
preprocessor?: PreProcessor

/**
* Specify the file to be compiled, for example,
* if you want to compile scss, then you can pass in ['** /**.sass']
* @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
* @default ['** /**.css']
*/
includeCompile?: Array<string>

/**
* Flag whether to start with server at development time,
* because unplugin-vue-cssvars uses different strategies for building and server development
* @default true
*/
server?: boolean
}
```
### use preprocessor
the `unplugin-vue-cssvars` package does not integrate a preprocessor,
when you want to use `unplugin-vue-cssvars` in the preprocessor file,
please pass the preprocessor to `unplugin-vue-cssvars`

````typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
import sass from 'sass'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
viteVueCSSVars({
preprocessor: { sass },
includeCompile: ['**/**.css', '**/**.scss'],
}) as PluginOption,
],
})
````
In the above example, if your project uses `scss`, then you need to configure `preprocessor: { sass }`,
It is worth noting that you also need to configure `includeCompile: ['**/**.css', '**/**.scss']`,
Because it is entirely up to you to read which files (.sass or .less, or .styl) to use `unplugin-vue-cssvars`.

### Details about revoke
> 💡 v1.0.0 version to solve the problem of duplicate code, no longer need to set

Suppose there are two files `App.vue` and `test.css`
````
<script setup lang="ts">
const color = 'red'
</script>

<template>
<div class="test">
TEST
</div>
</template>

<style scoped>
@import "./assets/test";
</style>

````
````
/** test.css **/
div {
color: v-bind(color);
}
````
After building with `vite` when `unplugin-vue-cssvars` is not used
````
/** test.css **/
div[data-v-2e7c9788] {
color: var(--8bcabd20);
}
````
Among them, the hash of `color: var(--8bcabd20);` will not appear in the component packaging product, because `vue` does not support the use of `v-bind` in the file.
When built with `vite` using `unplugin-vue-cssvars` (`minify: false`)
````
/** test.css **/
div[data-v-1dfefb04] {
color: var(--516b0d4a);
}

/* created by @unplugin-vue-cssvars */
/* <inject start> */
div[data-v-1dfefb04]{color:var(--516b0d4a)}
/* <inject end> */
````
It can be seen that the code will be injected through `unplugin-vue-cssvars`, and it depends on `@vue/compiler-dom`, whose hash value can appear in the component packaging product.
But observation found that this code is repetitive.
Therefore, turning on the `revoke` option will remove duplicate code
````
/** test.css **/
div[data-v-1dfefb04] {
color: var(--516b0d4a);
}
````

## Tips

Expand Down
Loading