AngeloCastro9
commented
1 year ago I have the same issue
Closed gabrieloureiro closed 1 year ago
AngeloCastro9
commented
1 year ago I have the same issue
lucastorress
commented
1 year ago I have the same issue. 😢
askoufis
commented
1 year ago I think your issue is that your react and web packages are not being bundled correctly. They're using tsup, which uses esbuild for bundling packages, so you'll need to use the vanilla extract esbuild plugin in order to properly extract the generated CSS for the bundle.
I added a tsup.config.ts to both your web and react packages in your reproduction and storybook started working correctly.
// tsup.config.ts
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin'
import { defineConfig } from 'tsup'
export default defineConfig({
esbuildPlugins: [vanillaExtractPlugin()],
})
gabrieloureiro
commented
1 year ago You are a genius man @askoufis. Thank you so much, now i can work at Design system.
gabrieloureiro
commented
1 year ago The problem now is that when I change the style, it doesn't change anything =/
gabrieloureiro
commented
1 year ago Nothing from this file (Text.css.ts) are changing the styles.
I've tried reproduce this outside from monorepo and its work:
askoufis
commented
1 year ago The built packages contain separate js and css files, but the js files do not import the css files, so when storybook imports your component, it doesn't load the CSS.
I'm guessing it works outside your monorepo because your story is using the source code of the component, rather than the compiled package code.
Some options to get this to work depend on how you want to distribute your package. You could distribute your package as plain typescript (i.e. don't use tsup), so consumers would end up compiling it on their end.
You could also just use tsc to compile your files to javascript (and minify them with something else if you want). Haven't tried this approach myself.
Getting the tsup/esbuild to work is a bit of effort, there's an old discord message about it.
Alternatively, another bundler like rollup might do a better job of this. Here's some examples of this being done:
If you need more help on this, feel free to ask in the discord. There's lots of helpful people there.
Going to close this issue as it's not actually an issue with the library itself.
askoufis
commented
1 year ago If you don't mind having to import a separate CSS file, you can make it an entrypoint of your package, like this person did, so you don't have to import from your-package/dist, and instead import from your-package/css or something.
gabrieloureiro
commented
1 year ago Hi @askoufis.
My code is finally working, you can see here.
First add this properties in your package.json of project that use tsup to compile the sprinkles, css, tokens etc.
"exports": {
".": {
"types": "./dist/index.d.ts",
"require": "./dist/index.js",
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"import": "./dist/index.mjs"
},
"./*": {
"types": "./dist/*.d.ts",
"require": "./dist/*.js",
"main": "./dist/*.js",
"module": "./dist/*.mjs",
"import": "./dist/*.mjs"
},
"./dist/index.css": {
"import": "./dist/index.css",
"require": "./dist/index.css"
}Storybook:
Basically I've create a alias on resolve property inside my .storybook/main.js
resolve: {
alias: [
{
find: '@loureiro/react',
replacement: path.resolve(__dirname, '../../react'),
},
{
find: '@loureiro/css',
replacement: path.resolve(__dirname, '../../web/dist/index.css'),
},
{
find: '@loureiro/web',
replacement: path.resolve(__dirname, '../../web'),
},
],
}So in the each file with stories that use vanilla-exract, you must import you new alias (from previous step) that contains the css . Example: import '@loureiro/css'
Describe the bug
I've tried to run the storybook using vite, webpack4 and webpack5., but all of them are returning error.
I'm using npm and turbo repo to manage the monorepo.
My objective is create a design-system using vanilla-extract.
To reproduce access the below link and run the commands from README.md
Reproduction
https://github.com/gabrieloureiro/monorepo-storybook-vanilla-extract
System Info