feat(VanillaExtract): Use custom identifier generation (#1299)

Prefix Vanilla Extract identifier names with Mistica version to avoid name collision in a module federation context --------- Co-authored-by: Pedro Ladaria <[email protected]>
Telefonica · Dec 4, 2024 · 8872f87 · 8872f87 · github-actions · Dec 4, 2024
1 parent e45e47c
commit 8872f87
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/vite.config.js b/vite.config.js
@@ -4,11 +4,24 @@ import react from '@vitejs/plugin-react';
 import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';
 import noBundlePlugin from 'vite-plugin-no-bundle';
 import preserveDirectivesPlugin from 'rollup-plugin-preserve-directives';
+import {version as packageVersion} from './package.json';
+
+/**
+ * Identifiers must start with a letter (not number) and can't contain dots
+ * Removing trailing zeros to reduce the size of the identifier
+ *
+ * 1.2.3 => v1_2_3
+ * 1.2.0 => v1_2
+ * 1.0.0 => v1
+ */
+const version = 'v' + packageVersion.replace(/(\.0)*$/, '').replace(/\./g, '_');
 
 export default defineConfig({
     plugins: [
         react(),
-        vanillaExtractPlugin(),
+        vanillaExtractPlugin({
+            identifiers: ({hash}) => `${version}_${hash}`,
+        }),
         noBundlePlugin({
             // Change .css.js files to something else so that they don't get re-processed by consumer apps using vanilla extract too
             fileNames: ({name}) => `${name.replace(/\.css$/, '.css-mistica')}.js`,