feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

packages/design-system/vite.config.ts

@@ -1,15 +1,15 @@
 /// <reference types="vitest" />
-
-import { extname, relative, resolve } from 'path'
+import { dirname, extname, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import fs from 'node:fs'
+
+import react from '@vitejs/plugin-react'
 import { glob } from 'glob'
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import dts from 'vite-plugin-dts'
 import { libInjectCss } from 'vite-plugin-lib-inject-css'
-import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
-import ensureDirectives from './plugins/rollup-plugin-ensure-directives'
-import fs from 'node:fs'
+// import ensureDirectives from './plugins/rollup-plugin-ensure-directives'
+import preserveDirectives from 'rollup-preserve-directives'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -18,26 +18,29 @@ export default defineConfig({
     libInjectCss(),
     dts({
       include: ['lib'],
-      exclude: ['node_modules', '**/*.test.ts', '**/*.stories.tsx'],
-      rollupTypes: true,
+      exclude: [
+        'node_modules',
+        '**/*.css',
+        '**/*.test.ts',
+        '**/*.stories.tsx',
+        'lib/tokens/*.mdx',
+        'lib/tokens/*.css',
+        'lib/tokens/*.tsx',
+      ],
+      // rollupTypes: true,
       bundledPackages: ['class-variance-authority', 'clsx'],
     }),
-    libAssetsPlugin({
-      name: '[name].[contenthash:8].[ext]',
-      limit: 1024 * 1,
-    }),
+    preserveDirectives(),
   ],
   build: {
+    cssCodeSplit: true,
     copyPublicDir: false,
     lib: {
-      entry: [
-        resolve(__dirname, 'lib/new.ts'),
-        resolve(__dirname, 'lib/current.ts'),
-      ],
+      entry: [resolve(__dirname, 'lib/index.ts')],
       formats: ['es'],
     },
     rollupOptions: {
-      plugins: [ensureDirectives()],
+      plugins: [],
       external: [
         'react',
         'react-dom',
@@ -78,39 +81,35 @@ export default defineConfig({
       },
       input: Object.fromEntries(
         glob
-          .sync(
-            [
-              'lib/new.ts',
-              'lib/current.ts',
-              'lib/style-new.css',
-              'lib/style-current.css',
-              'lib/components/**/*.{ts,tsx}',
-            ],
-            {
-              ignore: '**/*.stories.{ts,tsx}',
-            },
-          )
+          .sync(['lib/**/*.{ts,tsx,css}'], {
+            ignore: ['**/types.ts', '**/*.stories.{ts,tsx}', 'lib/tokens/*'],
+          })
           .map((file) => {
             return [
               // The name of the entry point
               // lib/nested/foo.ts becomes nested/foo
               relative(
                 'lib',
-                file.slice(0, file.length - extname(file).length),
+                file.slice(0, file.length - extname(file).length)
               ),
               // The absolute path to the entry file
               // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
               fileURLToPath(new URL(file, import.meta.url)),
             ]
-          }),
+          })
       ),
       output: {
-        assetFileNames: 'assets/[name][extname]',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.originalFileNames.length > 0) {
+            const originalFileName = assetInfo.originalFileNames[0]
+            if (originalFileName.indexOf('/components/') >= 0) {
+              return `${dirname(originalFileName).replace('lib/', '')}/[name]-[hash][extname]`
+            }
+          }
+          return `[name][extname]`
+        },
         entryFileNames: '[name].js',
       },
     },
   },
-  server: {
-    open: './example/index.html',
-  },
 })