Using Vanilla Extract in a component library with Vite.

[pxlmvr]

I'm building a library of reusable React components using Vite's library mode and I'm encountering some issues. Basically when I import my components in a consumer React app I'm missing the relative CSS files. The className generated by vanilla is there, but the browser does not find any stylesheet containing rules for that selector.

For example let's say this is my component:

import { buttonCss } from './styles.css'

const Button: React.FC = () => <button className={buttonCss}>Click me</button>

export default Button

And this is its styles.css.ts file:

import { style } from '@vanilla-extract/css'

export const buttonCss = style({
  height: 48,
  color: 'red',
})

The component is then exported by my lib/main.ts file:

export { default as Button } from '../src/components/test/Button'

When I build the project in the dist folder I can see the style.css file with the class and its associated properties. Only, it seems it's linked nowhere in the .es.js file outputted by the build process.

What am I doing wrong? 😐

This is my vite config:

import { defineConfig, loadEnv } from 'vite'
import { peerDependencies } from './package.json'
import { resolve } from 'path'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import dts from 'vite-plugin-dts'
import react from '@vitejs/plugin-react'

export default defineConfig(({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

  const baseUrl = process.env.VITE_BASE_URL || '/'

  return {
    base: baseUrl,
    plugins: [
      react(),
      vanillaExtractPlugin(),
      dts({
        exclude: ['**/stories.ts', '**/*.test.ts'],
        tsconfigPath: './tsconfig.app.json',
        rollupTypes: true,
      }),
    ],
    build: {
      copyPublicDir: false,
      lib: {
        entry: resolve(__dirname, 'lib/main.ts'),
        name: 'my-components',
        fileName: (format) => `my-components.${format}.js`,
        formats: ['es', 'cjs', 'umd'],
      },
      external: Object.keys(peerDependencies),
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        '@components': resolve(__dirname, './src/components'),
      },
    },
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: ['./src/setupTests.ts'],
    },
  }
})

[TitorTraveller]

I'm currently facing this exact situation, i'm using my component with the corresponding class generated but no styles are being applied. I don't know where exactly reference the generated css file to be able to apply the styles.

Did you find any solution for this?

[pxlmvr]

Hey! Sadly I could not find a solution. My solution was to completely ditch vanilla extract in favor of tailwind and it's been smooth sailing ever since.
Hope you find a way to make it work!

[TitorTraveller]

Thanks for your reply, i've been working around and i found this plugin https://github.com/emosheeep/vite-plugin-lib-inject-css to inject generated CSS file into compiled js file, it works perfect for Vite Library Mode. Now i can import components wherever i need them without manually importing css file into consumer app. Vanilla Extract working fine!