Replies: 1 comment
-
Aside from what you already mentioned, you could have two separate Cosmos setups targetting each app subdirectory. It's not ideal as you won't be able browse app vs admin fixtures together. Another solution, albeit hacky and untested, is to create a UI plugin that hijacks the |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
This might be specific to the webpack plugin but I would like to use React Cosmos in a project with multiple entrypoints.
For example, suppose there is an app with entrypoints
admin.js
anduser.js
. Now suppose you're using a CSS approach like Tailwind where you have a base CSS file that includes your@config
and@layer
directives and common styles and suppose you have a different base CSS file for each entrypoint:admin.css
anduser.css
. (Tailwind 3.2 added support for multiple configuration files for a given project making this approach more practical.)With the webpack configuration, if you have fixtures for both admin and user components then a user imports file is generated including them all in a single webpack entrypoint. As a result you can easily end up in a situation where the styles from both
admin.css
anduser.css
get merged into one file or included in the same document (depending on whether you're usingstyle-loader
orMiniCssExtractPlugin
etc.). That can be problematic because the styles may clash or simply cause, e.g., an admin component to be rendered with base styles from the user entrypoint.One way that would allow me to work around this for now is simply to make the webpack plugin merge any existing
entry
from the user webpack with the one generated by React cosmos. That way I could cause the CSS files to be generated by defining them as entries in their own right and then reference them by name in the template file and use some JS to drop the<style>
elements that don't apply to a given component. It wouldn't support HMR or allow having, say, different SVG fragments defined in the template for each entrypoint but it would probably work for now.A better solution would probably involve defining different groups for components such that each group becomes a separate webpack entrypoint and each entrypoint can have a separate HTML template file too.
Beta Was this translation helpful? Give feedback.
All reactions