Comments (13)
Hi again @garand,
This feature is available now, in version 3.10.0! To enable it use treeshakeable
option:
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!
from rollup-plugin-styles.
Great! I don't see 3.10.0 yet, is that still being deployed?
Yes
[!] (plugin styles) Error: Unable to load PostCSS plugin
0
This was also fixed in 3.10.0
from rollup-plugin-styles.
Already installed and trying it now. I'll let you know if it's doing what I expect!
from rollup-plugin-styles.
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. 🙌
from rollup-plugin-styles.
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:
- Use named exports
or - Use rollup-plugin-terser
If you are talking about stripping unused CSS - consider code splitting using dynamic imports or manual chunks, or try PurgeCSS.
As of injecting only parts of styles - does it even make sense since the CSS is already bundled inside JS loaded into browser? (EDIT: See the comment below)
Please inform me if you have an argument about why it should be different or if I got something wrong.
Hope it helps!
from rollup-plugin-styles.
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!
from rollup-plugin-styles.
@Anidetrix This is awesome! I'll try it out right now. Do I need to run .inject()
or can I call it like I referenced in the initial issue comment?
from rollup-plugin-styles.
@garand Use .inject()
only if you don't use any classes from the file and you still want it to be injected.
If you use any class, like so:
import styles from "./style.css"
console.log(styles.anyClassName)
CSS will be injected automatically.
from rollup-plugin-styles.
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:
[!] (plugin styles) Error: Unable to load PostCSS plugin `0`
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.
from rollup-plugin-styles.
3.10.0 is up if you haven't seen yet, hope this is what you were looking for!
from rollup-plugin-styles.
@Anidetrix For that PostCSS plugin issue... it came up again, I cleared out node_modules
, installed again, and then it built fine... Any ideas? Seems to come up periodically.
from rollup-plugin-styles.
@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.
from rollup-plugin-styles.
Okay, sounds good. I'll let you know if it keeps coming up. Appreciate the quick responses!
from rollup-plugin-styles.
Related Issues (20)
- Unexpected code splitting, possible feature request
- Support Parcel CSS as alternative to cssnano HOT 3
- Support importing style with query string HOT 1
- Scss @charset failing
- Separate css and .min.css files
- Is there a way to pass a style nonce property when the code injects the styles?
- Test fail due to cssnano
- [Feat request] customlize the image inline function
- Is it possible to use globs to import sass files?
- Prevent to add hash to referenced files inside CSS HOT 1
- Support for rollup v3 HOT 15
- CSS Injection into Server Side render (SSR) HOT 3
- [!] (plugin styles) Error: EACCES: permission denied, open '/.config/postcssrc' HOT 1
- Updating styles affects js file hash
- I would like to be able to freely define the export path.
- support lightningcss as an alternative to cssnano
- CSS input, emit raw output to file (no ES parsing)
- scss nesting not working with vue scoped style
- Hello, May I know if this project `rollup-plugin-styles` is still maintained? HOT 2
- Is it possible to import css file to js with preserveModules option enabled? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rollup-plugin-styles.