-
Hope all is well m8. For the last 6 months or so since VE came out I have been building and deploying a design system using VE to a bunch of teams at work. Making use of sprinkles and such to find some consistency. Its been great. However, as the component library grows, we are quickly reaching bundle size problems. Not really VE's fault, just a fact of growth really. As a result I am trying to split up the components into separate packages. Prior to this change all components and styles were getting bundled, and the consuming apps needed to just import the component they need and make sure to import the styles.css at the root of the application. However, for obvious reasons, I dont want to have to ship a giant style.css file as we continue to add more and more components. Therefore I am playing around with the model of shipping the raw .ts and .css.ts files in the packages and passing the transpilation off to the consuming app. I.e they need to download the VE plugin for their respective bundler and go from there. In testing this methodology I am running into a couple errors. Consider the following example: I am shipping a button component that has the following files, button.tsx and button.css.ts . The button.tsx does the import * as styles from "./button.css" like normal. However when I install this package in a consuming application and configure it with the VE plugin for vite, I am getting the following error:
Are you aware of a way to fix this? I assume it is because of the scope of the .css.ts import is in node_modules. But I haven't been able to figure out how to fix it. I came across this discussion where you mentioned that this is the preferred way for design system maintainers to distribute their VE code #102 Perhaps we should consider writing a guide informing people how to execute on this methodology? Has anyone in the discord been able to get this working ? |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 18 replies
-
So, I decided to attempt to create an example reproduction and couldnt figure out how to repro. So I assume there is a lot more complicated stuff going on in the repo I have at work. For those that find this and are curious. Have a look at these two repos:
The above is an example of a scaleable way to distrubute components that are styled with ve without having to bundle styles |
Beta Was this translation helpful? Give feedback.
-
Another thing I am noticing is that if your versions of vanilla-extract are not the same, you will run into this error as well. |
Beta Was this translation helpful? Give feedback.
-
I'm not sure about the issue with the Vite plugin, but I can share how my company's design system is approaching the issue of CSS bundle size. Consuming applications aren't set-up yet to compile VE CSS, so we are precompiling components' styles "in place". I started with their esbuild set-up guide, and modified it considerably to get this working. I treated each .css.js file as its own entry point. The build process had two processes: run esbuild against all of the .css.js files, then run esbuild again against the rest of the JS/TS files. In your output, you will now have Then it depends on how you expect the consuming application to bundle those discrete compiled CSS files. If the app uses Webpack or another compiler that supports importing CSS files, you could write a custom esbuild transformer to transform the imports for the VE CSS files into that style css import So it's a little complex, but I think it's possible. I was planning to write a blog post at some point that goes into this in greater detail. But here's a snippet in the meantime (not entirely complete, but hopefully gets the point across) await Promise.all([
/**
* Modular CSS Files
* We need to compile these first because they must be bundled
* (in order to compile @vanilla-extract out)
* But we don't want to bundle out any other library, so this step
* produces a css file, and the css.js file gets compiled to className hashes
*/
esbuild
.build({
entryPoints: cssEntryPoints,
bundle: true,
plugins: [vanillaExtractPlugin()],
}),
// Rest of the JS/TS files
esbuild
.build({
entryPoints: entryPoints.filter((path) => !path.includes('.css.ts')),
loader: {
'.js': 'jsx',
},
// plugin that injects the `import 'Component.css.css';` line
plugins: [inlineCssPlugin],
})
.catch((e) => {
console.error(e);
if (!watch) {
process.exit(1);
}
}),
]); |
Beta Was this translation helpful? Give feedback.
-
Thanks for the examples and different solutions raised here. I'd love to smooth over packaging of VE styles more but all the approaches here sounds pretty reasonable for different use-cases. Personally, I'm a fan of compiling the styles within the consuming application for the most part. However it can be difficult and limits your bundling/transpiling options at the package level. We're working on a tool for braid that will hopefully allow bundling and TS -> JS transpiling to happen ahead of time at the package level while still letting the styles be compiled to .css in the consuming application. |
Beta Was this translation helpful? Give feedback.
-
I'd prefer to build inside the design system first and only import js/css in my app. I think that's way cleaner as it doesn't require installing and managing VE in the apps. It should also be faster if you have multiple apps, because you only need to build the design system once. As far as I understand, VE already builds every .css.ts file separately, but the issue is that bundlers like Vite/Esbuild combine all css into one file. Is that right? Output that I want:
So I want to compile but not bundle the CSS. I tried a few combinations but none of them seem to work.
So maybe we can try A) making a VE rollup plugin or B) finding a way to tell Vite to not bundle CSS?
|
Beta Was this translation helpful? Give feedback.
So, I decided to attempt to create an example reproduction and couldnt figure out how to repro. So I assume there is a lot more complicated stuff going on in the repo I have at work. For those that find this and are curious. Have a look at these two repos:
The above is an example of a scaleable way to distrubute components that are styled with ve without having to bundle styles