feat(Vanilla Extract): as a future replacement of jss

flow-defs/index.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 declare export { createUseStyles, getJss, ServerSideStyles } from "./jss";
+declare export { vars as skinVars } from "./skins/skin-contract.css";
 declare export { default as ThemeContext } from "./theme-context";
 declare export { default as ThemeContextProvider } from "./theme-context-provider";
 declare export { default as ScreenReaderOnly } from "./screen-reader-only";

src/index.tsx

@@ -15,6 +15,7 @@ export {
     ServerSideStyles,
 } from './jss';
 
+export {vars as skinVars} from './skins/skin-contract.css';
 export {default as ThemeContext} from './theme-context';
 export {default as ThemeContextProvider} from './theme-context-provider';
 export {default as ScreenReaderOnly} from './screen-reader-only';

vite.config.js

@@ -5,7 +5,14 @@ import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';
 import noBundlePlugin from 'vite-plugin-no-bundle';
 
 export default defineConfig({
-    plugins: [react(), vanillaExtractPlugin(), noBundlePlugin()],
+    plugins: [
+        react(),
+        vanillaExtractPlugin(),
+        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.vanilla')}.js`,
+        }),
+    ],
     publicDir: false,
     build: {
         lib: {