feat: add test fixture

unocss · Aug 11, 2022 · 3896097 · 3896097
1 parent 4d4e559
commit 3896097
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 5 deletions.
diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'path'
-import type { Plugin } from 'vite'
+import type { Plugin, ResolvedConfig } from 'vite'
 import type { GenerateResult, UnocssPluginContext } from '@unocss/core'
 import {
   HASH_PLACEHOLDER_RE, LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE,
@@ -18,6 +18,7 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
   const vfsLayers = new Set<string>()
   const layerImporterMap = new Map<string, string>()
   let tasks: Promise<any>[] = []
+  let viteConfig: ResolvedConfig
 
   // use maps to differentiate multiple build. using outDir as key
   const cssPostPlugins = new Map<string | undefined, Plugin | undefined>()
@@ -143,6 +144,9 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
       apply(options, { command }) {
         return command === 'build' && !options.build?.ssr
       },
+      configResolved(config) {
+        viteConfig = config
+      },
       enforce: 'post',
       // rewrite the css placeholders
       async generateBundle(options, bundle) {
@@ -190,8 +194,14 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
           }
         }
 
-        if (!replaced)
-          this.error(new Error('[unocss] does not found CSS placeholder in the generated chunks,\nthis is likely an internal bug of unocss vite plugin'))
+        if (!replaced) {
+          let msg = '[unocss] does not found CSS placeholder in the generated chunks'
+          if (viteConfig.build.lib && checkJs)
+            msg += '\nIt seems you are building in library mode, it\'s recommanded to set `build.cssCodeSplit` to true.\nSee https://github.com/vitejs/vite/issues/1579'
+          else
+            msg += '\nThis is likely an internal bug of unocss vite plugin'
+          this.error(new Error(msg))
+        }
       },
     },
   ]

diff --git a/test/vite.test.ts → test/fixtures.test.ts b/test/vite.test.ts → test/fixtures.test.ts
@@ -4,8 +4,8 @@ import { describe, expect, it } from 'vitest'
 import fs from 'fs-extra'
 import fg from 'fast-glob'
 
-describe('vite', () => {
-  it('build', async () => {
+describe.concurrent('fixtures', () => {
+  it('vite client', async () => {
     const root = resolve(__dirname, 'fixtures/vite')
     await fs.emptyDir(join(root, 'dist'))
     await build({
@@ -41,4 +41,40 @@ describe('vite', () => {
     // transformer-compile-class
     expect(js).contains('uno-tacwqa')
   })
+
+  it('vite lib', async () => {
+    const root = resolve(__dirname, 'fixtures/vite-lib')
+    await fs.emptyDir(join(root, 'dist'))
+    await build({
+      root,
+      logLevel: 'warn',
+      build: {
+        sourcemap: true,
+      },
+    })
+
+    const files = await fg('dist/**/*.{umd,iife}.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')
+    }
+  })
 })
diff --git a/test/fixtures/vite-lib/index.html b/test/fixtures/vite-lib/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/lib/main.css b/test/fixtures/vite-lib/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/lib/main.ts b/test/fixtures/vite-lib/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/package.json b/test/fixtures/vite-lib/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/unocss.config.ts b/test/fixtures/vite-lib/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/vite.config.ts b/test/fixtures/vite-lib/vite.config.ts
@@ -0,0 +1,23 @@
+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',
+      fileName: 'my-lib',
+      formats: [
+        'cjs',
+        'es',
+        'iife',
+        'umd',
+      ],
+    },
+    cssCodeSplit: true,
+  },
+  plugins: [
+    UnoCSS(),
+  ],
+})