feat: add ut

eryue0220 · Jan 2, 2024 · b13689e · b13689e
1 parent 6046d9e
commit b13689e
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 12 deletions.
diff --git a/examples/vite/vite.config.js b/examples/vite/vite.config.js
@@ -3,6 +3,6 @@ import stylexVitePlugin from 'unplugin-stylex/vite'
 
 export default defineConfig({
   plugins: [
-    stylexVitePlugin({ dev: true, stylex: { filename: 'stylexxx.css' } }),
+    stylexVitePlugin({ dev: true, stylex: { filename: 'stylex-test.css' } }),
   ],
 })
diff --git a/src/index.ts b/src/index.ts
@@ -12,6 +12,7 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
   const options = getOptions(rawOptions)
   const filter = createFilter(options.include, options.exclude)
   const stylexRules = {}
+  let viteBuildConfig = null
 
   return {
     name: PLUGIN_NAME,
@@ -44,10 +45,30 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
 
     buildEnd() {
       const rules = Object.values(stylexRules).flat()
-      if (rules.length > 0) {
+      if (rules.length === 0) return
+
+      const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
+      const fileName = options.stylex.filename
+
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: 'asset',
+      })
+    },
+    vite: {
+      config(config) {
+        viteBuildConfig = config.build;
+      },
+      buildEnd() {
+        const rules = Object.values(stylexRules).flat()
+        if (!viteBuildConfig || rules.length === 0) return
+
         const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
+        const fileName = `${viteBuildConfig.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
+
         this.emitFile({
-          fileName: options.stylex.filename,
+          fileName,
           source: collectedCSS,
           type: 'asset',
         })

diff --git a/test/esbuild.test.ts b/test/esbuild.test.ts
diff --git a/test/fixtures/js/app.js b/test/fixtures/js/app.js
diff --git a/test/fixtures/js/button.js b/test/fixtures/js/button.js
diff --git a/test/fixtures/js/common.js b/test/fixtures/js/common.js
diff --git a/test/fixtures/ts/app.ts b/test/fixtures/ts/app.ts
diff --git a/test/fixtures/ts/button.ts b/test/fixtures/ts/button.ts
diff --git a/test/fixtures/ts/common.ts b/test/fixtures/ts/common.ts
diff --git a/test/rspack.test.ts b/test/rspack.test.ts
diff --git a/test/transformer.test.ts b/test/transformer.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { transformer } from '../src/core/transformer'
+
+[ 'javascript', 'typescript' ].forEach((name) => {
+  describe(name, () => {
+    it('basic', async () => {
+      const context = {
+        id: '',
+        source: '',
+        options: {
+          dev: true,
+          stylex: {},
+        },
+      }
+
+      const { code } = await transformer(context)
+      expect(code).toMatchSnapshot()
+    })
+
+    it('useCSSLayer', async () => {
+      const stylexOptions = {
+        useCSSLayer: true,
+      }
+
+      const context = {
+        id: '',
+        source: '',
+        options: {
+          dev: true,
+          stylex: stylexOptions,
+        },
+      }
+
+      const { code } = await transformer(context)
+      expect(code).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/vite.test.ts b/test/vite.test.ts