-
-
Notifications
You must be signed in to change notification settings - Fork 42
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tree Shakeable Injector #122
Comments
Hi @garand, If your mean class exports - at the time, object treeshaking is not yet supported by rollup (see here for details), but there are alternative solutions for this:
If you are talking about stripping unused CSS - consider code splitting using dynamic imports or manual chunks, or try PurgeCSS.
Please inform me Hope it helps! |
Looking through the provided plugin again, I think I now understand what this accomplishes. By the way, it is not connected to injector, but to generated embedding code. Shouldn't be too hard to implement actually, so I'll try. Also, I think using object getters/setters would be a better approach, don't you think? It would not cause any breaking changes and will keep syntax clean. UPDATE 1: Seems this will also require an additional option since with this approach CSS won't be injected at all, even the global one, unless classes are referenced inside code. Also it probably won't be compatible with named exports unless they are wrapped in individual functions. So if anyone knows a better solution I'm all ears! |
Hi again @garand, This feature is available now, in version 3.10.0! To enable it use styles({ mode: ["inject", {treeshakeable: true}] }) I gave myself a week to come up with something better, but in the end getter-based approach seems like the best compromise for now. Also, to inject global styles without using any classes, use it like so: import styles from "./style.css"
styles.inject() Let me know if that works for you! |
@Anidetrix This is awesome! I'll try it out right now. Do I need to run |
@garand Use If you use any class, like so: import styles from "./style.css"
console.log(styles.anyClassName) CSS will be injected automatically. |
Great! I don't see 3.10.0 yet, is that still being deployed? Also... all of a sudden I am getting this error recently:
Not sure what would be causing it. This is my postcss.config.js. That config is working fine in other projects and all of the dependencies are installed. module.exports = {
plugins: [
require('postcss-import'),
require('postcss-edgie'),
require('tailwindcss'),
require('postcss-preset-env')({ stage: 0 }),
require('autoprefixer'),
],
} I can create a separate issue if needed. |
Yes
This was also fixed in 3.10.0 |
3.10.0 is up if you haven't seen yet, hope this is what you were looking for! |
Already installed and trying it now. I'll let you know if it's doing what I expect! |
Seems to be working just great so far. Will make additional issues later if I discover any functionality that is missing. Thanks for the hard work. 🙌 |
@Anidetrix For that PostCSS plugin issue... it came up again, I cleared out |
@garand I believe this should not be the case since code for that isn't particularly complex, probably package manager just messed up. But if the issue will appear on a regular basis I can investigate more thoroughly. |
Okay, sounds good. I'll let you know if it keeps coming up. Appreciate the quick responses! |
Hey! Love the project, working great for me. However I'd like to be able to tree-shake my styles with my components. For instance, if I had 10 components, all 10 groups of styles would be injected even if only 3 components are used on a page.
I like the approach here where
Becomes
Out of the box that package doesn't work with rollup-plugin-styles. I'm trying to experiment with a custom injector to do it, but no luck just yet.
Is this something you'd consider adding as a built in option?
The text was updated successfully, but these errors were encountered: