Multiple entrypoint support

[birtles]

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 and user.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 and user.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 and user.css get merged into one file or included in the same document (depending on whether you're using style-loader or MiniCssExtractPlugin 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.