WEB-2115 use custom identifier generation

vite.config.js

@@ -4,11 +4,23 @@ 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
+ */
+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`,