Fix vite inline style issue

Author: owjs3901

.changeset/plenty-books-begin.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/vite-plugin": patch
+---
+
+Fix vite plugin hmr issue

packages/vite-plugin/src/__tests__/plugin.test.ts

@@ -39,6 +39,7 @@ describe('devupUIPlugin', () => {
       watchChange: expect.any(Function),
       enforce: 'pre',
       transform: expect.any(Function),
+      apply: expect.any(Function),
     })
     expect(existsSync).toHaveBeenCalledWith(devupPath)
     expect(getThemeInterface).toHaveBeenCalledWith(
@@ -107,6 +108,14 @@ describe('devupUIPlugin', () => {
     } as any)
     ;(plugin as any).transform('code', 'correct.ts')
     expect(writeFileSync).toBeCalledTimes(0)
+    ;(plugin as any).apply({}, { command: 'serve' })
+    vi.clearAllMocks()
+    vi.mocked(codeExtract).mockReturnValueOnce({
+      css: 'css code',
+      code: 'code',
+    } as any)
+    ;(plugin as any).transform('code', 'correct.ts')
+    expect(writeFileSync).toBeCalledTimes(1)
   })
   it('should not extract code', () => {
     const devupPath = 'devup.json'
@@ -130,6 +139,7 @@ describe('devupUIPlugin', () => {
       watchChange: expect.any(Function),
       enforce: 'pre',
       transform: expect.any(Function),
+      apply: expect.any(Function),
     })
     expect(existsSync).toHaveBeenCalledWith(devupPath)
     expect(getThemeInterface).toHaveBeenCalledWith(
@@ -168,6 +178,41 @@ describe('devupUIPlugin', () => {
       watchChange: expect.any(Function),
       enforce: 'pre',
       transform: expect.any(Function),
+      apply: expect.any(Function),
+    })
+    expect(existsSync).toHaveBeenCalledWith(devupPath)
+    expect(getThemeInterface).toHaveBeenCalledWith(
+      libPackage,
+      'DevupThemeColors',
+      'DevupThemeTypography',
+      'DevupTheme',
+    )
+    expect(readFileSync).toHaveBeenCalledWith(devupPath, 'utf-8')
+    expect(existsSync).toHaveBeenCalledWith(interfacePath)
+  })
+
+  it('should return true on apply', () => {
+    const devupPath = 'devup.json'
+    const interfacePath = '.df'
+    const cssFile = join(_dirname, 'devup-ui.css')
+    const libPackage = '@devup-ui/react'
+    vi.mocked(existsSync).mockReturnValueOnce(true).mockReturnValueOnce(false)
+    vi.mocked(getThemeInterface).mockReturnValue('interface code')
+    vi.mocked(readFileSync).mockReturnValueOnce('{"theme": {}}')
+    const options = {
+      package: libPackage,
+      cssFile,
+      devupPath,
+      interfacePath,
+    }
+    const plugin = DevupUI(options)
+    expect(plugin).toEqual({
+      name: 'devup-ui',
+      config: expect.any(Function),
+      watchChange: expect.any(Function),
+      enforce: 'pre',
+      transform: expect.any(Function),
+      apply: expect.any(Function),
     })
     expect(existsSync).toHaveBeenCalledWith(devupPath)
     expect(getThemeInterface).toHaveBeenCalledWith(
@@ -178,5 +223,6 @@ describe('devupUIPlugin', () => {
     )
     expect(readFileSync).toHaveBeenCalledWith(devupPath, 'utf-8')
     expect(existsSync).toHaveBeenCalledWith(interfacePath)
+    expect((plugin as any).apply({}, { command: 'build' })).toBe(true)
   })
 })

packages/vite-plugin/src/plugin.ts

@@ -59,6 +59,7 @@ export function DevupUI({
       console.error(error)
     }
   }
+  let command: null | 'build' | 'serve' = null
   return {
     name: 'devup-ui',
     config() {
@@ -70,6 +71,10 @@ export function DevupUI({
         },
       }
     },
+    apply(_, env) {
+      command = env.command
+      return true
+    },
     watchChange(id) {
       if (resolve(id) !== resolve(devupPath)) return
       if (existsSync(devupPath)) {
@@ -98,8 +103,9 @@ export function DevupUI({
         writeFileSync(cssFile, css, {
           encoding: 'utf-8',
         })
-        return {
-          code: `${retCode}
+        if (command === 'serve')
+          return {
+            code: `${retCode}
             const exists = !!document.getElementById('devup-ui');
             const style = document.getElementById('devup-ui') || document.createElement('style');
             style.id = 'devup-ui';
@@ -108,7 +114,7 @@ export function DevupUI({
             \`;
             if (!exists) document.head.appendChild(style);
           `,
-        }
+          }
       }
       return {
         code: retCode,