You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a monorepo with a single .storybook folder at the root that services all the components individually and the overall repo. This means I can run npm run storybook from the root to see all stories for the entire repo or run that same configuration from a leaf package and only show stories for that single package.
I've just written a small Babel plugin that adds package version metadata to our components. This looks for <Component data-version/> in existing JSX and adds a package name and version identifier to the attribute. I've verified that this works in Cypress with no problems and that the built files produce the correct output. The configuration is duplicated across each component package in a .babelrc file that imports the plugin. There is no babel configuration at the root; it is only in leaf packages.
I have a separate plugin for PostCSS that transforms CSS files to include that version as a selector. This'll be important later.
Storybook behaves differently. If I don't include a babel entry in the main.js export, there seems to be no Babel transforming. The version identifiers are not added to the source. The PostCSS is correctly included in the leaf stories because it was already prebuilt. I have a separate issue getting the right package written in the root Storybook CSS, but I'll handle that separately.
The real head-scratcher is what happens if I include the babel entry. If I include exactly the following:
Everything gets transformed! It goes way too far in the opposite direction. Please look at how I have 0 references to the plugin I'm trying to use. It's adding a noop to the plugins, and suddenly, the version identifier is added to everything where data-version is found, including elements that aren't related to this particular package. What is weirder is even the CSS transforms. That is wildly unexpected because this is effectively written to do nothing.
So here are the questions:
How do I get Storybook to behave with this Babel plugin?
Why is it transforming the CSS when turning on the babel option that doesn't reference any CSS?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
I have a monorepo with a single
.storybook
folder at the root that services all the components individually and the overall repo. This means I can runnpm run storybook
from the root to see all stories for the entire repo or run that same configuration from a leaf package and only show stories for that single package.I've just written a small Babel plugin that adds package version metadata to our components. This looks for
<Component data-version/>
in existing JSX and adds a package name and version identifier to the attribute. I've verified that this works in Cypress with no problems and that the built files produce the correct output. The configuration is duplicated across each component package in a.babelrc
file that imports the plugin. There is no babel configuration at the root; it is only in leaf packages.I have a separate plugin for PostCSS that transforms CSS files to include that version as a selector. This'll be important later.
Storybook behaves differently. If I don't include a
babel
entry in themain.js
export, there seems to be no Babel transforming. The version identifiers are not added to the source. The PostCSS is correctly included in the leaf stories because it was already prebuilt. I have a separate issue getting the right package written in the root Storybook CSS, but I'll handle that separately.The real head-scratcher is what happens if I include the
babel
entry. If I include exactly the following:Everything gets transformed! It goes way too far in the opposite direction. Please look at how I have 0 references to the plugin I'm trying to use. It's adding a noop to the plugins, and suddenly, the version identifier is added to everything where
data-version
is found, including elements that aren't related to this particular package. What is weirder is even the CSS transforms. That is wildly unexpected because this is effectively written to do nothing.So here are the questions:
babel
option that doesn't reference any CSS?Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions