feat: add css key to vite config (#518)

packages/tuono-fs-router-vite-plugin/package.json

@@ -47,7 +47,7 @@
     "@babel/core": "^7.24.4",
     "@babel/types": "^7.24.0",
     "prettier": "^3.2.4",
-    "vite": "^5.2.12"
+    "vite": "^5.4.14"
   },
   "devDependencies": {
     "@tanstack/config": "0.7.13",

packages/tuono-router/package.json

@@ -56,7 +56,7 @@
     "@vitejs/plugin-react-swc": "3.7.2",
     "happy-dom": "16.8.1",
     "react": "19.0.0",
-    "vite": "5.4.12",
+    "vite": "5.4.14",
     "vitest": "2.1.9"
   }
 }

packages/tuono/package.json

@@ -100,7 +100,7 @@
     "fast-text-encoding": "^1.0.6",
     "tuono-fs-router-vite-plugin": "workspace:*",
     "tuono-router": "workspace:*",
-    "vite": "^5.2.12",
+    "vite": "^5.4.14",
     "web-streams-polyfill": "^4.0.0"
   },
   "devDependencies": {

packages/tuono/src/build/config/normalize-config.spec.ts

@@ -16,7 +16,12 @@ describe('normalizeConfig', () => {
 
     expect(normalizeConfig(config)).toStrictEqual({
       server: { host: 'localhost', port: 3000 },
-      vite: { alias: undefined, optimizeDeps: undefined, plugins: [] },
+      vite: {
+        alias: undefined,
+        css: undefined,
+        optimizeDeps: undefined,
+        plugins: [],
+      },
     })
   })
 
@@ -24,7 +29,12 @@ describe('normalizeConfig', () => {
     // @ts-expect-error testing invalid config
     expect(normalizeConfig({ invalid: true })).toStrictEqual({
       server: { host: 'localhost', port: 3000 },
-      vite: { alias: undefined, optimizeDeps: undefined, plugins: [] },
+      vite: {
+        alias: undefined,
+        css: undefined,
+        optimizeDeps: undefined,
+        plugins: [],
+      },
     })
   })
 
@@ -114,22 +124,40 @@ describe('normalizeConfig', () => {
         expect.objectContaining({
           vite: expect.objectContaining({
             alias: [
-              {
-                find: '1',
-                replacement: '@tabler/icons-react-fun',
-              },
-              {
-                find: '2',
-                replacement: path.join(PROCESS_CWD_MOCK, 'src'),
-              },
-              {
-                find: '3',
-                replacement: 'file://pluto',
-              },
+              { find: '1', replacement: '@tabler/icons-react-fun' },
+              { find: '2', replacement: path.join(PROCESS_CWD_MOCK, 'src') },
+              { find: '3', replacement: 'file://pluto' },
             ],
           }) as unknown,
         }),
       )
     })
   })
+
+  describe('vite - css config', () => {
+    it('should have css undefined if not provided', () => {
+      const config: TuonoConfig = {}
+
+      expect(normalizeConfig(config).vite).toHaveProperty('css', undefined)
+    })
+
+    it('should preserve the css configuration as provided by the user', () => {
+      const cssConfig = {
+        preprocessorOptions: {
+          scss: { additionalData: '$color: red;' },
+        },
+      }
+      const config: TuonoConfig = {
+        vite: { css: cssConfig },
+      }
+
+      expect(normalizeConfig(config)).toStrictEqual(
+        expect.objectContaining({
+          vite: expect.objectContaining({
+            css: cssConfig,
+          }) as unknown,
+        }),
+      )
+    })
+  })
 })

packages/tuono/src/build/config/normalize-config.ts

@@ -75,6 +75,7 @@ export const normalizeConfig = (config: TuonoConfig): InternalTuonoConfig => {
     },
     vite: {
       alias: normalizeViteAlias(config.vite?.alias),
+      css: config.vite?.css,
       optimizeDeps: config.vite?.optimizeDeps,
       plugins: config.vite?.plugins ?? [],
     },

packages/tuono/src/build/index.ts

@@ -50,6 +50,8 @@ function createBaseViteConfigFromTuonoConfig(
       alias: tuonoConfig.vite?.alias ?? {},
     },
 
+    css: tuonoConfig.vite?.css,
+
     optimizeDeps: tuonoConfig.vite?.optimizeDeps,
 
     plugins: [

packages/tuono/src/config/types.ts

@@ -1,4 +1,9 @@
-import type { AliasOptions, DepOptimizationOptions, PluginOption } from 'vite'
+import type {
+  AliasOptions,
+  DepOptimizationOptions,
+  PluginOption,
+  CSSOptions,
+} from 'vite'
 
 /**
  * @see http://tuono.dev/documentation/configuration
@@ -10,6 +15,7 @@ export interface TuonoConfig {
   }
   vite?: {
     alias?: AliasOptions
+    css?: CSSOptions
     optimizeDeps?: DepOptimizationOptions
     plugins?: Array<PluginOption>
   }