fix(vite): respect rollupoptions specified output dir in lib mode (#2231

)Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Feb 22, 2023 · f15071c · f15071c
1 parent c2d0506
commit f15071c
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 3 deletions.
diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts
@@ -109,9 +109,33 @@ export function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>
         }
       },
       async configResolved(config) {
-        const distDir = resolve(config.root, config.build.outDir)
-        cssPostPlugins.set(distDir, config.plugins.find(i => i.name === 'vite:css-post'))
-        cssPlugins.set(distDir, config.plugins.find(i => i.name === 'vite:css'))
+        const distDirs = [
+          resolve(config.root, config.build.outDir),
+        ]
+
+        // for Vite lib more with rollupOptions.output, #2231
+        if (config.build.rollupOptions.output) {
+          const outputOptions = config.build.rollupOptions.output
+          if (Array.isArray(outputOptions)) {
+            distDirs.push(
+              ...outputOptions.map(option => option.dir).filter(Boolean) as string[],
+            )
+          }
+          else {
+            if (outputOptions.dir)
+              distDirs.push(outputOptions.dir)
+          }
+        }
+
+        const cssPostPlugin = config.plugins.find(i => i.name === 'vite:css-post')
+        const cssPlugin = config.plugins.find(i => i.name === 'vite:css')
+
+        if (cssPostPlugin)
+          distDirs.forEach(dir => cssPostPlugins.set(dir, cssPostPlugin))
+
+        if (cssPlugin)
+          distDirs.forEach(dir => cssPlugins.set(dir, cssPlugin))
+
         await ready
       },
       // we inject a hash to chunk before the dist hash calculation to make sure

diff --git a/test/fixtures.test.ts b/test/fixtures.test.ts
@@ -82,6 +82,38 @@ describe.concurrent('fixtures', () => {
     }
   })
 
+  it('vite lib rollupOptions', async () => {
+    const root = resolve(__dirname, 'fixtures/vite-lib-rollupoptions')
+    await fs.emptyDir(join(root, 'dist'))
+    await build({
+      root,
+      logLevel: 'warn',
+    })
+
+    const files = await fg(['dist/**/index.js'], { cwd: root, absolute: true })
+    expect(files).toHaveLength(2)
+
+    for (const path of files) {
+      const code = await fs.readFile(path, 'utf-8')
+      // basic
+      expect(code).contains('.text-red')
+      // transformer-variant-group
+      expect(code).contains('.text-sm')
+      // transformer-compile-class
+      expect(code).contains('.uno-tacwqa')
+      // transformer-directives
+      expect(code).not.contains('@apply')
+      expect(code).not.contains('--at-apply')
+      expect(code).contains('gap:.25rem')
+      expect(code).contains('gap:.5rem')
+
+      // transformer-variant-group
+      expect(code).contains('text-sm')
+      // transformer-compile-class
+      expect(code).contains('uno-tacwqa')
+    }
+  })
+
   it('vue cli 4', async () => {
     const root = resolve(__dirname, '../examples/vue-cli4')
     await fs.emptyDir(join(root, 'dist'))

diff --git a/test/fixtures/vite-lib-rollupoptions/index.html b/test/fixtures/vite-lib-rollupoptions/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <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-lib-rollupoptions/lib/main.css b/test/fixtures/vite-lib-rollupoptions/lib/main.css
@@ -0,0 +1,8 @@
+.foo {
+  @apply flex;
+  @apply gap-1;
+}
+
+.bar {
+  --at-apply: gap-2;
+}
diff --git a/test/fixtures/vite-lib-rollupoptions/lib/main.ts b/test/fixtures/vite-lib-rollupoptions/lib/main.ts
@@ -0,0 +1,19 @@
+import '@unocss/reset/tailwind.css'
+import './main.css'
+import 'uno.css'
+
+// @unocss-include
+const html = String.raw
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = html`
+  <div class="font-sans p4">
+    <p class="text-red">
+      Red
+    </p>
+    <p class=":uno: text-green text-xl">
+      Green Large
+    </p>
+    <p class="text-(blue sm)">
+      Blue Small
+    </p>
+  </div>
+`
diff --git a/test/fixtures/vite-lib-rollupoptions/package.json b/test/fixtures/vite-lib-rollupoptions/package.json
@@ -0,0 +1,8 @@
+{
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}
diff --git a/test/fixtures/vite-lib-rollupoptions/unocss.config.ts b/test/fixtures/vite-lib-rollupoptions/unocss.config.ts
@@ -0,0 +1,22 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetUno,
+  transformerCompileClass,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAttributify(),
+    presetUno(),
+    presetIcons(),
+  ],
+  transformers: [
+    transformerCompileClass(),
+    transformerVariantGroup(),
+    transformerDirectives(),
+  ],
+})
diff --git a/test/fixtures/vite-lib-rollupoptions/vite.config.ts b/test/fixtures/vite-lib-rollupoptions/vite.config.ts
@@ -0,0 +1,56 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import UnoCSS from '@unocss/vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'lib/main.ts'),
+      name: 'MyLib',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: [
+        {
+          dir: resolve(__dirname, 'dist/es'),
+          format: 'es',
+          entryFileNames: 'index.mjs',
+          assetFileNames: 'assets/mylib.css',
+          preserveModules: true,
+          preserveModulesRoot: resolve(__dirname, './'),
+        },
+        {
+          dir: resolve(__dirname, 'dist/cjs'),
+          format: 'cjs',
+          entryFileNames: 'index.cjs',
+          assetFileNames: 'assets/mylib.css',
+          preserveModules: true,
+          preserveModulesRoot: resolve(__dirname, './'),
+        },
+        {
+          globals: {
+            vue: 'Vue',
+          },
+          dir: resolve(__dirname, 'dist/umd'),
+          format: 'umd',
+          entryFileNames: 'index.js',
+          name: 'MyLib',
+        },
+        {
+          globals: {
+            vue: 'Vue',
+          },
+          dir: resolve(__dirname, 'dist/iife'),
+          format: 'iife',
+          entryFileNames: 'index.js',
+          name: 'MyLib',
+        },
+      ],
+    },
+    sourcemap: true,
+    cssCodeSplit: true,
+  },
+  plugins: [
+    UnoCSS(),
+  ],
+})