fix(compile-class): compile timing and magic string conflicts, close #…

…1256

packages/transformer-compile-class/src/index.ts

@@ -43,8 +43,8 @@ export default function transformerCompileClass(options: CompileClassOptions = {
 
   return {
     name: 'compile-class',
-    enforce: 'post',
-    async transform(s, _, { uno }) {
+    enforce: 'pre',
+    async transform(s, _, { uno, tokens }) {
       const matches = [...s.original.matchAll(regex)]
       if (!matches.length)
         return
@@ -68,6 +68,7 @@ export default function transformerCompileClass(options: CompileClassOptions = {
             uno.config.shortcuts.push([className, body, { layer: options.layer }])
           else
             uno.config.shortcuts.push([className, body])
+          tokens.add(className)
         }
         s.overwrite(start + 1, start + match[0].length - 1, replacements.join(' '))
       }

packages/vite/package.json

@@ -46,6 +46,7 @@
     "vite": "^2.9.0 || ^3.0.0-0"
   },
   "dependencies": {
+    "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
     "@unocss/config": "workspace:*",
     "@unocss/core": "workspace:*",

packages/vite/src/index.ts

@@ -10,7 +10,7 @@ import { SvelteScopedPlugin } from './modes/svelte-scoped'
 import { ShadowDomModuleModePlugin } from './modes/shadow-dom'
 import { ConfigHMRPlugin } from './config-hmr'
 import type { VitePluginConfig } from './types'
-import { initTransformerPlugins } from './transformers'
+import { createTransformerPlugins } from './transformers'
 import { createDevtoolsPlugin } from './devtool'
 
 export * from './types'
@@ -34,7 +34,7 @@ export default function UnocssPlugin<Theme extends {}>(
 
   const plugins = [
     ConfigHMRPlugin(ctx),
-    ...initTransformerPlugins(ctx),
+    ...createTransformerPlugins(ctx),
     ...createDevtoolsPlugin(ctx),
   ]
 

packages/vite/src/transformers.ts

@@ -1,17 +1,22 @@
 import type { Plugin } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
 import MagicString from 'magic-string'
+import type { EncodedSourceMap } from '@ampproject/remapping'
+import remapping from '@ampproject/remapping'
+import type { SourceMap } from 'rollup'
 import { IGNORE_COMMENT } from './integration'
 
-export function initTransformerPlugins(ctx: UnocssPluginContext): Plugin[] {
-  async function applyTransformers(code: string, id: string, enforce?: 'pre' | 'post') {
-    if (code.includes(IGNORE_COMMENT))
+export function createTransformerPlugins(ctx: UnocssPluginContext): Plugin[] {
+  async function applyTransformers(original: string, id: string, enforce?: 'pre' | 'post') {
+    if (original.includes(IGNORE_COMMENT))
       return
     const transformers = (ctx.uno.config.transformers || []).filter(i => i.enforce === enforce)
     if (!transformers.length)
       return
 
-    const s = new MagicString(code)
+    let code = original
+    let s = new MagicString(code)
+    const maps: EncodedSourceMap[] = []
     for (const t of transformers) {
       if (t.idFilter) {
         if (!t.idFilter(id))
@@ -21,13 +26,18 @@ export function initTransformerPlugins(ctx: UnocssPluginContext): Plugin[] {
         continue
       }
       await t.transform(s, id, ctx)
+      if (s.hasChanged()) {
+        code = s.toString()
+        maps.push(s.generateMap({ hires: true, source: id }) as EncodedSourceMap)
+        s = new MagicString(code)
+      }
     }
 
-    if (s.hasChanged()) {
+    if (code !== original) {
       ctx.affectedModules.add(id)
       return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true, source: id }),
+        code,
+        map: remapping(maps, () => null) as SourceMap,
       }
     }
   }