From e991ba4e2ce9bd075b9b3a8fad744f6393b46a44 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 14 Jul 2022 14:20:25 +0800
Subject: [PATCH] fix(compile-class): compile timing and magic string
 conflicts, close #1256

---
 .../transformer-compile-class/src/index.ts    |  5 ++--
 packages/vite/package.json                    |  1 +
 packages/vite/src/index.ts                    |  4 ++--
 packages/vite/src/transformers.ts             | 24 +++++++++++++------
 pnpm-lock.yaml                                |  2 ++
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/transformer-compile-class/src/index.ts b/packages/transformer-compile-class/src/index.ts
index a404e05927..682a5f1fa0 100644
--- a/packages/transformer-compile-class/src/index.ts
+++ b/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(' '))
       }
diff --git a/packages/vite/package.json b/packages/vite/package.json
index c29498afa3..abd6d1b48f 100644
--- a/packages/vite/package.json
+++ b/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:*",
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index 1b9edaaa77..2e25eb4c87 100644
--- a/packages/vite/src/index.ts
+++ b/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),
   ]
 
diff --git a/packages/vite/src/transformers.ts b/packages/vite/src/transformers.ts
index e55df925f5..d92858f43c 100644
--- a/packages/vite/src/transformers.ts
+++ b/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,
       }
     }
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 816252be01..08b89b66a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -526,6 +526,7 @@ importers:
 
   packages/vite:
     specifiers:
+      '@ampproject/remapping': ^2.2.0
       '@rollup/pluginutils': ^4.2.1
       '@unocss/config': workspace:*
       '@unocss/core': workspace:*
@@ -536,6 +537,7 @@ importers:
       magic-string: ^0.26.2
       vite: 2.9.12
     dependencies:
+      '@ampproject/remapping': 2.2.0
       '@rollup/pluginutils': 4.2.1
       '@unocss/config': link:../config
       '@unocss/core': link:../core