Merge pull request #20 from baiwusanyu-c/bwsy/next

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

Author: baiwusanyu-c

README.ZH-CN.md

@@ -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
@@ -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,
   ],
 })
 ```
@@ -63,7 +61,6 @@ export default defineConfig({
 
 ```ts
 // rollup.config.js
-import { resolve } from 'path'
 import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
 export default {
   plugins: [
@@ -127,6 +124,7 @@ export interface Options {
    * @default process.cwd()
    */
   rootDir?: string
+   
   /**
    * 需要转换的文件名后缀列表（目前只支持.vue）RegExp or glob
    */
@@ -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
 

README.md

@@ -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
 
@@ -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,
   ],
 })
 ```
@@ -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 */),
+   ],
 }
 ```
 
@@ -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
     */
@@ -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