fix(vite): fix asset emit (#1926)

* fix(vite): fix asset emit * chore: rename plugin
unocss · Nov 29, 2022 · f48862b · f48862b
1 parent daba01c
commit f48862b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 12 deletions.
diff --git a/examples/vite-vue3/public/uno.svg b/examples/vite-vue3/public/uno.svg
diff --git a/examples/vite-vue3/src/App.vue b/examples/vite-vue3/src/App.vue
@@ -6,5 +6,6 @@
     </div>
     <div i-custom-icon />
     <div i-custom-multi-line-attr />
+    <div hidden class="bg-[url(../src/uno.svg)] bg-[url(/uno.svg)]" />
   </div>
 </template>
diff --git a/examples/vite-vue3/src/uno.svg b/examples/vite-vue3/src/uno.svg
diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts
@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import type { Plugin, ResolvedConfig } from 'vite'
 import type { GenerateResult, UnocssPluginContext } from '@unocss/core'
+import type { PluginContext } from 'rollup'
 import {
   HASH_PLACEHOLDER_RE, LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE,
   RESOLVED_ID_RE,
@@ -24,14 +25,14 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
   const cssPostPlugins = new Map<string | undefined, Plugin | undefined>()
   const cssPlugins = new Map<string | undefined, Plugin | undefined>()
 
-  async function applyCssTransform(css: string, id: string, dir: string | undefined) {
+  async function applyCssTransform(css: string, id: string, dir: string | undefined, ctx: PluginContext) {
     const {
       postcss = true,
     } = await getConfig()
     if (!cssPlugins.get(dir) || !postcss)
       return css
-    // @ts-expect-error no this context
-    const result = await cssPlugins.get(dir).transform(css, id)
+    // @ts-expect-error without this context absolute assets will throw an error
+    const result = await cssPlugins.get(dir).transform.call(ctx, css, id)
     if (!result)
       return css
     if (typeof result === 'string')
@@ -122,7 +123,7 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
 
         let { css } = await generateAll()
         const fakeCssId = `${chunk.fileName}-unocss-hash.css`
-        css = await applyCssTransform(css, fakeCssId, options.dir)
+        css = await applyCssTransform(css, fakeCssId, options.dir, this)
 
         const hash = getHash(css)
         const transformHandler = 'handler' in cssPost.transform!
@@ -145,6 +146,32 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
     {
       name: 'unocss:global:build:generate',
       apply: 'build',
+      async renderChunk(code, chunk, options) {
+        const cssPost = cssPostPlugins.get(options.dir)
+        if (!cssPost) {
+          this.warn('[unocss] failed to find vite:css-post plugin. It might be an internal bug of UnoCSS')
+          return null
+        }
+        const result = await generateAll()
+        const cssWithLayers = Array.from(vfsLayers).map(layer =>
+          `#--unocss-layer-start--${layer}--{start:${layer}} ${
+            layer === LAYER_MARK_ALL
+            ? result.getLayers(undefined, Array.from(vfsLayers))
+            : result.getLayer(layer) || ''
+          } #--unocss-layer-end--${layer}--{end:${layer}}`,
+        ).join('')
+
+        const fakeCssId = `${chunk.fileName}-unocss-hash.css`
+        const css = await applyCssTransform(cssWithLayers, fakeCssId, options.dir, this)
+        const transformHandler = 'handler' in cssPost.transform!
+          ? cssPost.transform.handler
+          : cssPost.transform!
+        await transformHandler.call({} as unknown as any, css, fakeCssId)
+      },
+    },
+    {
+      name: 'unocss:global:build:bundle',
+      apply: 'build',
       configResolved(config) {
         viteConfig = config
       },
@@ -164,34 +191,44 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
           return
         }
 
-        const result = await generateAll()
         let replaced = false
+        const getLayer = (layer: string, input: string, replace = false) => {
+          const re = new RegExp(`#--unocss-layer-start--${layer}--\\{start:${layer}\\}([\\s\\S]*?)#--unocss-layer-end--${layer}--\\{end:${layer}\\}`, 'g')
+          if (replace)
+            return input.replace(re, '')
+
+          const match = re.exec(input)
+          if (match)
+            return match[1]
+          return ''
+        }
 
         for (const file of files) {
           const chunk = bundle[file]
-
           if (chunk.type === 'asset' && typeof chunk.source === 'string') {
             const css = chunk.source
               .replace(HASH_PLACEHOLDER_RE, '')
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true
-              return layer === LAYER_MARK_ALL
-                ? result.getLayers(undefined, Array.from(vfsLayers))
-                : result.getLayer(layer) || ''
+              return getLayer(layer, css)
+            })
+            Array.from(vfsLayers).forEach((layer) => {
+              chunk.source = getLayer(layer, chunk.source as string, true)
             })
           }
           else if (chunk.type === 'chunk' && typeof chunk.code === 'string') {
             const js = chunk.code
               .replace(HASH_PLACEHOLDER_RE, '')
             chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true
-              const css = layer === LAYER_MARK_ALL
-                ? result.getLayers(undefined, Array.from(vfsLayers))
-                : result.getLayer(layer) || ''
+              const css = getLayer(layer, js)
               return css
                 .replace(/\n/g, '')
                 .replace(/(?<!\\)(['"])/g, '\\$1')
             })
+            Array.from(vfsLayers).forEach((layer) => {
+              chunk.code = getLayer(layer, chunk.code, true)
+            })
           }
         }