Closed warlo closed 3 years ago
Did you find a solution for this? I started experimenting with rollup-plugin-styles
and noticed this too.
I also saw there is a possibility to use treeshakeable
in the injector options:
styles({
mode: [
'inject',
{
'treeshakeable': true,
},
],
}),
Check the examples here: #122
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.
Hey!
A not too uncommon pattern is to re-export components in a index file for shared things like:
We do this to allow more compact imports like
import { ProgressIndicator, ProductCardSection } from "shared-components";
instead ofimport 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!