[Question] Automating Inject CSS into each entrypoints

[vctqs1anz]

Hi,

We're currently building a library using Vanilla Extract, and we'd like to update our approach. Specifically, we want to automatically import the generated *.css file into the entry point after bundling.

For example:

// Table.css.ts
import { globalStyle, style, styleVariants } from "@vanilla-extract/css";

export const tableHeaderStyle = style({
  fontWeight: '20px',
});

// index.ts
import * as styles from './Table.css.ts';

// Additional code using the styles

After building the project, we expect the following behavior:

Generated CSS File (e.g., index.css):

/* index.css */
.tableHeaderStyle_debugId { 
  font-weight: 20px;
}

Automatic Injection of CSS into the Entry Point (e.g., index.js):

// index.js
import './index.css';
// Additional code

Could you please guide us on how to achieve this auto-import and CSS injection after the build process?

[askoufis]

@vctqs1anz Hi! Sorry for not responding to this sooner. While I don't quite have a code example to provide, I'm sure it could be achieved with a bundler like rollup. Perhaps something involving preserveModules. This config could be a good example to start with.

If you've already resolved the issue, I'd love to know how you solved it.

[askoufis]

Actually, maybe this plugin is what you want: https://github.com/emosheeep/vite-plugin-lib-inject-css