fix: delete excess injection code (#18)

Author: baiwusanyu-c

README.ZH-CN.md

@@ -1,5 +1,5 @@
 # unplugin-vue-cssvars
-🌀 一个 vue 的插件能够能让你在 css 文件中使用 CSSVars 特性
+🌀 一个 vue3 的插件能够能让你在 css 文件中使用 CSSVars 特性
 
 [English](https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/master/README.md) | 中文
 
@@ -146,6 +146,8 @@ export interface Options {
 }
 ```
 ### 关于 revoke 详细说明
+> 💡 正式版本以解决重复代码问题，正式版本不再需要设置
+
 有如下两个文件 `App.vue` 和 `test.css`
 ````
 <script setup lang="ts">
@@ -261,4 +263,4 @@ div[data-v-1dfefb04] {
 ## Thanks
 * [vue](https://github.com/vuejs/core)
 * [vite](https://github.com/vitejs/vite)
-* [unplugin](https://github.com/unjs/unplugin)
+* [unplugin](https://github.com/unjs/unplugin)

README.md

@@ -1,5 +1,5 @@
 # unplugin-vue-cssvars
-🌀 A vue plugin that allows you to use vue's CSSVars feature in css files
+🌀 A vue plugin that allows you to use vue3's CSSVars feature in css files
 
 English | [中文](https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/master/README.ZH-CN.md)
 
@@ -146,6 +146,8 @@ export interface Options {
 }
 ```
 ### 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">
@@ -266,4 +268,4 @@ if there is a variable conflict, `script setup` will take precedence
 ## Thanks
 * [vue](https://github.com/vuejs/core)
 * [vite](https://github.com/vitejs/vite)
-* [unplugin](https://github.com/unjs/unplugin)
+* [unplugin](https://github.com/unjs/unplugin)

packages/core/index.ts

@@ -7,7 +7,7 @@ import { createCSSModule } from './runtime/process-css'
 import { initOption } from './option'
 import { getVariable } from './parser'
 import { injectCSSVars } from './inject/inject-cssvars'
-import { revokeCSSVars } from './inject/revoke-cssvars'
+import { removeInjectImporter, revokeCSSVars } from './inject/revoke-cssvars'
 import type { IBundle, Options } from './types'
 
 import type { OutputOptions } from 'rollup'
@@ -21,37 +21,54 @@ const unplugin = createUnplugin<Options>(
     )
     // 预处理 css 文件
     const preProcessCSSRes = preProcessCSS(userOptions)
-    return [{
-      name: NAME,
-      enforce: 'pre',
+    return [
+      {
+        name: NAME,
+        enforce: 'pre',
 
-      transformInclude(id: string) {
-        return filter(id)
-      },
+        transformInclude(id: string) {
+          return filter(id)
+        },
 
-      async transform(code: string, id: string) {
-        try {
+        async transform(code: string, id: string) {
+          try {
           // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
-          if (id.endsWith('.vue')) {
-            const { descriptor } = parse(code)
-            const importCSSModule = createCSSModule(descriptor, id, preProcessCSSRes)
-            const variableName = getVariable(descriptor)
-            code = injectCSSVars(code, importCSSModule, variableName)
-            console.log(code)
+            if (id.endsWith('.vue')) {
+              const { descriptor } = parse(code)
+              const importCSSModule = createCSSModule(descriptor, id, preProcessCSSRes)
+              const variableName = getVariable(descriptor)
+              code = injectCSSVars(code, importCSSModule, variableName)
+            }
+            return code
+          } catch (err: unknown) {
+            this.error(`${name} ${err}`)
           }
-          return code
-        } catch (err: unknown) {
-          this.error(`${name} ${err}`)
-        }
+        },
       },
-    },
-    {
-      name: `${NAME}:revoke-inject`,
-      async writeBundle(options: OutputOptions, bundle: IBundle) {
-        if (userOptions.revoke)
-          await revokeCSSVars(options, bundle)
+      {
+        name: `${NAME}:revoke-inject`,
+        enforce: 'post',
+        transformInclude(id: string) {
+          return filter(id)
+        },
+
+        async transform(code: string, id: string) {
+          try {
+            // ⭐TODO: 只支持 .vue ? jsx, tsx, js, ts ？
+            if (id.endsWith('.vue'))
+              code = removeInjectImporter(code)
+
+            return code
+          } catch (err: unknown) {
+            this.error(`${name} ${err}`)
+          }
+        },
+        async writeBundle(options: OutputOptions, bundle: IBundle) {
+          if (userOptions.revoke)
+            await revokeCSSVars(options, bundle)
+        },
       },
-    }]
+    ]
   })
 
 export const viteVueCSSVars = unplugin.vite

packages/core/inject/__test__/__snapshots__/inject-cssvars.spec.ts.snap

@@ -2,13 +2,13 @@
 
 exports[`inject cssvars > injectCSSVars: basic 1`] = `
 "<style>.foo{ color: red }</style>
-<style scoped>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
+<style scoped unplugin-vue-cssvars>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
 </style>"
 `;
 
 exports[`inject cssvars > injectCSSVars: multiple value 1`] = `
 "<style>.foo{ color: red }</style>
-<style scoped>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.bar{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
+<style scoped unplugin-vue-cssvars>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.bar{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
 </style>"
 `;
 

packages/core/inject/__test__/inject-cssvars.spec.ts

@@ -17,7 +17,7 @@ describe('inject cssvars', () => {
         },
       },
     ]
-    expectContent = `${mockCode}\n<style scoped>${[...mockCSSModule[0].vBindCode.color]}\n</style>`
+    expectContent = `${mockCode}\n<style scoped unplugin-vue-cssvars>${[...mockCSSModule[0].vBindCode.color]}\n</style>`
   })
 
   test('injectCSSVars: basic', () => {
@@ -41,7 +41,7 @@ describe('inject cssvars', () => {
 
   test('injectCSSVars: multiple value', () => {
     vBindValue.add('\\n/* created by @unplugin-vue-cssvars */\\n/* <inject start> */\\n.bar{color:v-bind(color)}\\n/* <inject end> */\\n')
-    expectContent = `${mockCode}\n<style scoped>${[...mockCSSModule[0].vBindCode.color].join('')}\n</style>`
+    expectContent = `${mockCode}\n<style scoped unplugin-vue-cssvars>${[...mockCSSModule[0].vBindCode.color].join('')}\n</style>`
     const res = injectCSSVars(mockCode, mockCSSModule as any, mockVariableName as any)
     expect(res).toBe(expectContent)
     expect(res).matchSnapshot()

packages/core/inject/__test__/revoke-cssvars.spec.ts

@@ -3,7 +3,12 @@ import { cwd } from 'node:process'
 import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { pathExists, readFile, remove } from 'fs-extra'
 import MagicString from 'magic-string'
-import { deleteInjectCSS, findInjects, revokeCSSVars } from '../revoke-cssvars'
+import {
+  deleteInjectCSS,
+  findInjects,
+  removeInjectImporter,
+  revokeCSSVars,
+} from '../revoke-cssvars'
 describe('revoke css', () => {
   let mockText = ''
   const testFileDir = `${cwd()}/mock.css`
@@ -164,4 +169,32 @@ describe('revoke css', () => {
     const bufferRes2 = await readFile(testFileDir2)
     expect(bufferRes2.toString()).toBe(deleteRes)
   })
+
+  test('removeInjectImporter should remove lines matching unplugin-vue-cssvars=true', () => {
+    const input = `
+    import foo from 'bar';
+    // unplugin-vue-cssvars=true
+    import baz from 'qux';
+    const code = 'hello world';
+  `
+    const expectedOutput = `
+    import foo from 'bar';
+
+    import baz from 'qux';
+    const code = 'hello world';
+  `
+    expect(removeInjectImporter(input)).toEqual(expectedOutput)
+  })
+
+  test('removeInjectImporter should return original code if no lines match unplugin-vue-cssvars=true', () => {
+    const input = `
+    import foo from 'bar';
+    const code = 'hello world';
+  `
+    expect(removeInjectImporter(input)).toEqual(input)
+  })
+
+  test('removeInjectImporter should handle empty code string', () => {
+    expect(removeInjectImporter('')).toEqual('')
+  })
 })

packages/core/inject/inject-cssvars.ts

@@ -17,7 +17,7 @@ export const injectCSSVars = (
     }
   })
   if (injectCSSSet.length > 0)
-    code = `${code}\n<style scoped>${injectCSSSet.join('')}\n</style>`
+    code = `${code}\n<style scoped unplugin-vue-cssvars>${injectCSSSet.join('')}\n</style>`
 
   return code
 }

packages/core/inject/revoke-cssvars.ts

@@ -52,3 +52,5 @@ export function deleteInjectCSS(injectList: InjectStr, mgc: MagicString) {
   })
   return mgc.toString()
 }
+
+export const removeInjectImporter = (code: string) => code.replace(/^.*unplugin-vue-cssvars=true.*$/gm, '')

play/src/App.vue

@@ -6,7 +6,7 @@ const appAsd = () => 'red'
 const fooColor = appAsd()
 const appTheme2 = 'blue'
 const lessColor = 'greenyellow'
-const sassColor = '#94c9ff'
+const sassColor = ref('#94c9ff')
 const stylColor = '#fd1d7c'
 const appTheme3 = ref('red')
 const appTheme4 = reactive({ color: 'red' })
@@ -64,7 +64,7 @@ export default {
 </script> -->
 
 <template>
-  <div class="sass">
+  <div class="sass" @click="sassColor = 'red'">
     TEST
     <!--    <Comp /> -->
   </div>