fix(app, protocol-designer, opentrons-ai-client, components): fix build issue with css module files (#18930)

* fix(app, protocol-designer, opentrons-ai-client, components): fix build issue with css module files

Author: koji

app/cssModuleSideEffect.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Plugin to make sure CSS modules do not get tree shaked out of the dist.
+ * see https://github.com/vitejs/vite/pull/16051
+ *
+ * @returns {Plugin} The Vite plugin object.
+ */
+
+export const cssModuleSideEffect = (): Plugin => {
+  return {
+    name: 'css-module-side-effectful',
+    enforce: 'post',
+    transform(_: string, id: string) {
+      if (id.includes('.module.')) {
+        return {
+          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
+        }
+      }
+    },
+  }
+}

app/vite.config.mts

@@ -1,12 +1,15 @@
 import path from 'path'
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import postCssImport from 'postcss-import'
+import lostCss from 'lost'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
+import postCssImport from 'postcss-import'
 import postCssPresetEnv from 'postcss-preset-env'
-import lostCss from 'lost'
+import { defineConfig } from 'vite'
+
 import { versionForProject } from '../scripts/git-version.mjs'
+import { cssModuleSideEffect } from './cssModuleSideEffect'
+
 import type { UserConfig } from 'vite'
 
 export default defineConfig(
@@ -19,7 +22,7 @@ export default defineConfig(
       build: {
         // Relative to the root
         outDir: 'dist',
-        sourcemap: true
+        sourcemap: true,
       },
       plugins: [
         react({
@@ -29,6 +32,7 @@ export default defineConfig(
             configFile: true,
           },
         }),
+        cssModuleSideEffect(),
       ],
       optimizeDeps: {
         esbuildOptions: {

components/cssModuleSideEffect.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Plugin to make sure CSS modules do not get tree shaked out of the dist.
+ * see https://github.com/vitejs/vite/pull/16051
+ *
+ * @returns {Plugin} The Vite plugin object.
+ */
+
+export const cssModuleSideEffect = (): Plugin => {
+  return {
+    name: 'css-module-side-effectful',
+    enforce: 'post',
+    transform(_: string, id: string) {
+      if (id.includes('.module.')) {
+        return {
+          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
+        }
+      }
+    },
+  }
+}

components/vite.config.mts

@@ -1,11 +1,13 @@
 import path from 'path'
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import postCssImport from 'postcss-import'
+import lostCss from 'lost'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
+import postCssImport from 'postcss-import'
 import postCssPresetEnv from 'postcss-preset-env'
-import lostCss from 'lost'
+import { defineConfig } from 'vite'
+
+import { cssModuleSideEffect } from './cssModuleSideEffect'
 
 export default defineConfig({
   build: {
@@ -31,6 +33,7 @@ export default defineConfig({
         configFile: true,
       },
     }),
+    cssModuleSideEffect(),
   ],
   optimizeDeps: {
     esbuildOptions: {

opentrons-ai-client/cssModuleSideEffect.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Plugin to make sure CSS modules do not get tree shaked out of the dist.
+ * see https://github.com/vitejs/vite/pull/16051
+ *
+ * @returns {Plugin} The Vite plugin object.
+ */
+
+export const cssModuleSideEffect = (): Plugin => {
+  return {
+    name: 'css-module-side-effectful',
+    enforce: 'post',
+    transform(_: string, id: string) {
+      if (id.includes('.module.')) {
+        return {
+          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
+        }
+      }
+    },
+  }
+}

opentrons-ai-client/vite.config.mts

@@ -7,6 +7,8 @@ import postCssImport from 'postcss-import'
 import postCssPresetEnv from 'postcss-preset-env'
 import { defineConfig } from 'vite'
 
+import { cssModuleSideEffect } from './cssModuleSideEffect'
+
 export default defineConfig({
   // this makes imports relative rather than absolute
   base: '',
@@ -22,6 +24,7 @@ export default defineConfig({
         configFile: true,
       },
     }),
+    cssModuleSideEffect(),
   ],
   optimizeDeps: {
     esbuildOptions: {

protocol-designer/cssModuleSideEffect.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Plugin to make sure CSS modules do not get tree shaked out of the dist.
+ * see https://github.com/vitejs/vite/pull/16051
+ *
+ * @returns {Plugin} The Vite plugin object.
+ */
+
+export const cssModuleSideEffect = (): Plugin => {
+  return {
+    name: 'css-module-side-effectful',
+    enforce: 'post',
+    transform(_: string, id: string) {
+      if (id.includes('.module.')) {
+        return {
+          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
+        }
+      }
+    },
+  }
+}

protocol-designer/vite.config.mts

@@ -9,6 +9,7 @@ import postCssPresetEnv from 'postcss-preset-env'
 import { defineConfig } from 'vite'
 
 import { versionForProject } from '../scripts/git-version.mjs'
+import { cssModuleSideEffect } from './cssModuleSideEffect'
 
 import type { UserConfig } from 'vite'
 
@@ -35,6 +36,7 @@ export default defineConfig(
             configFile: true,
           },
         }),
+        cssModuleSideEffect(),
         {
           name: 'markdown-loader',
           transform(code, id) {