Re-exporting components grabs all styles

[warlo]

Hey!

A not too uncommon pattern is to re-export components in a index file for shared things like:

export { default as ProgressIndicator } from './progress-indicator';
export { default as ProductCardSection } from './productsection';

We do this to allow more compact imports like
import { ProgressIndicator, ProductCardSection } from "shared-components";
instead of
import ProgressIndicator from "shared-components/progress-indicator"; and so on.
However when only pieces of this re-exported file is imported, all styles from the all the other exported components seems to be dragged along. Would be nice to avoid processing the style imports from the files not explicitly imported!

[kelvinlouis]

Did you find a solution for this? I started experimenting with rollup-plugin-styles and noticed this too.

[kelvinlouis]

I also saw there is a possibility to use treeshakeable in the injector options:

styles({
  mode: [
    'inject',
    {
       'treeshakeable': true,
    },
  ],
}),

Check the examples here: #122

[Anidetrix]

Hi @hanswilw, @kelvinlouis,

CSS is automatically included even if only the parts of the file it's in are used since it's considered a necessary side effect because rollup cannot understand if it's needed or not by itself.

Although there are some ways to limit the used CSS:

I also saw there is a possibility to use treeshakeable in the injector options:

That's one way to do it, but it is limited to inject mode.

Another way is to use include/exclude options, e.g.:

If you had a component named indicator inside components directory and you wanted to exclude all its styles do:

styles({
  exclude: ["**/components/indicator/**"]
});

...or, on the opposite, if you wanted to include only its styles:

styles({
  include: ["**/components/indicator/**"]
});

Filtering is done using @rollup/pluginutils's createFilter, look in there for more information on allowed values.

Hope that's made it a little bit clearer.