fix(pug): hmr, close #66

unocss · Nov 18, 2021 · 9f08b48 · 9f08b48
1 parent de4540a
commit 9f08b48
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@unocss/reset": "workspace:*",
     "@unocss/webpack": "workspace:*",
     "@unocss/vite": "workspace:*",
+    "@unocss/extractor-pug": "workspace:*",
     "@vitejs/plugin-vue": "^1.9.4",
     "@vueuse/core": "^6.7.4",
     "brotli-size": "^4.0.0",

diff --git a/packages/extractor-pug/src/index.ts b/packages/extractor-pug/src/index.ts
@@ -16,18 +16,13 @@ export default function extractorPug(): Extractor {
     name: 'pug',
     order: -1,
     async extract(ctx) {
-      if (ctx.id?.match(/\.vue$/) || ctx.id?.match(/\.vue\?vue/)) {
-        const matches = Array.from(ctx.code.matchAll(regexVueTemplate))
-        let tail = ''
-        for (const match of matches) {
-          if (match && match[1])
-            tail += `\n${await compile(match[1], ctx.id)}`
+      if (!ctx.id)
+        return
+      if (ctx.id.endsWith('.pug') || ctx.id.match(/\.vue\?vue&type=template/)) {
+        try {
+          ctx.code = await compile(ctx.code, ctx.id) || ctx.code
         }
-        if (tail)
-          ctx.code = `${ctx.code}\n\n${tail}`
-      }
-      else if (ctx.id?.endsWith('.pug')) {
-        ctx.code = await compile(ctx.code, ctx.id) || ctx.code
+        catch {}
       }
       return undefined
     },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/fixtures/vite-pug/index.html b/test/fixtures/vite-pug/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/test/fixtures/vite-pug/package.json b/test/fixtures/vite-pug/package.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --open",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "pug": "^3.0.0"
+  }
+}
diff --git a/test/fixtures/vite-pug/src/App.vue b/test/fixtures/vite-pug/src/App.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+.font-mono.text-4xl.text-red4 Hello
+</template>
diff --git a/test/fixtures/vite-pug/src/main.ts b/test/fixtures/vite-pug/src/main.ts
@@ -0,0 +1,7 @@
+import '@unocss/reset/tailwind.css'
+import 'uno.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/test/fixtures/vite-pug/vite.config.ts b/test/fixtures/vite-pug/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import Inspect from 'vite-plugin-inspect'
+import Unocss from '@unocss/vite'
+import { extractorSplit } from '@unocss/core'
+import extractorPug from '@unocss/extractor-pug'
+import presetUno from '@unocss/preset-uno'
+
+export default defineConfig({
+  plugins: [
+    Vue(),
+    Unocss({
+      presets: [
+        presetUno(),
+      ],
+      extractors: [
+        extractorSplit,
+        extractorPug(),
+      ],
+    }),
+    Inspect(),
+  ],
+})