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

tuono-labs · Feb 8, 2025 · 0f72506 · 0f72506
1 parent ebe1abe
commit 0f72506
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 55 deletions.
diff --git a/apps/documentation/src/routes/documentation/configuration.mdx b/apps/documentation/src/routes/documentation/configuration.mdx
@@ -45,6 +45,13 @@ Useful for configuring custom source alias paths during imports
   - `Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>`
 - [Vite documentation: resolve.alias](https://vite.dev/config/shared-options#resolve-alias)
 
+### `vite.css                           `
+
+Config object for managing CSS behavior and integration with preprocessors (e.g., Sass, Less, etc.)
+
+- Type: `CSSOptions`
+- [Vite documentation: css](https://vite.dev/config/shared-options#css-modules)
+
 ### `vite.optimizeDeps`
 
 Vite's dependency optimizer used only during dev

diff --git a/packages/tuono-fs-router-vite-plugin/package.json b/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",

diff --git a/packages/tuono-router/package.json b/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"
   }
 }
diff --git a/packages/tuono/package.json b/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": {

diff --git a/packages/tuono/src/build/config/normalize-config.spec.ts b/packages/tuono/src/build/config/normalize-config.spec.ts
@@ -16,15 +16,25 @@ 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: [],
+      },
     })
   })
 
   it('should return an empty config if invalid values are provided', () => {
     // @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,
+        }),
+      )
+    })
+  })
 })
diff --git a/packages/tuono/src/build/config/normalize-config.ts b/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 ?? [],
     },

diff --git a/packages/tuono/src/build/index.ts b/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: [

diff --git a/packages/tuono/src/config/types.ts b/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>
   }