fix(labware-library): fix labware-library css issue (#16502)

* fix(labware-library): fix labware-library css issue

labware-library/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
+        }
+      }
+    },
+  }
+}

labware-library/vite.config.mts

@@ -6,6 +6,7 @@ import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
+import { cssModuleSideEffect } from './cssModuleSideEffect'
 
 const testAliases: {} | { 'file-saver': string } =
   process.env.CYPRESS === '1'
@@ -37,6 +38,7 @@ export default defineConfig({
         configFile: true,
       },
     }),
+    cssModuleSideEffect(), // Note for treeshake
   ],
   optimizeDeps: {
     esbuildOptions: {