domingues / rollup-plugin-css-chunks Goto Github PK
View Code? Open in Web Editor NEWRollup plugin to extract CSS into chunks
License: MIT License
Rollup plugin to extract CSS into chunks
License: MIT License
If I bump Sapper to 2.0.1 and then run npm install
followed by npm test
, I get:
TypeError: Cannot read property 'transformedByCSSChunks' of undefined
Hi, I just upgraded my sapper project from 0.28.0
to 0.29.1
, but this plugin produces an error on regex routes.
The error is: Invalid regular expression: /CSS_FILE_[id([0-9]+)].aed3241e.js/: Unmatched ')'
.
I debugged the npm run dev
command and could narrow it down to the RegEx in https://github.com/domingues/rollup-plugin-css-chunks/blob/master/index.ts#L168
The route is folder/[id([0-9]+)].svelte
.
Some of the variables just before the RexEx:
chunk.fileName
= [id([0-9]+)].aed3241e.js
chunk.name
= [id([0-9]+)]
css_file_name
= [id([0-9]+)]-f2980803.css
css_file_url
= [id([0-9]+)]-f2980803.css
I think the chunk.fileName
should be escaped.
Right now it's a little tricky to get started using this plugin because you need to write code that loads the css. One thing I would really love is an option to update the JS so that it injects the CSS for you, which would make it so that you don't have to update your app in order to use this plugin besides installing the plugin itself.
This is how webpack's style-loader works. It has a few different options such as injecting either code to write a style
tag with the CSS inlined or code to write a link
tag linking the the .css
file.
Whether I turn it on or off I don't see any difference, but I suspect I don't quite understand when it's being called or what it's doing.
Do you put an import statement in your JS and then it translates it to a CSS import statement? Does it prevent the CSS from being concatenated into a single CSS chunk that case? Will it act on all CSS modules in the chunk or only some?
I tried to use Tailwind with sapper and came down to this plugin, trying to fix some issues.
My "journey" so far:
sveltejs/svelte#5745
sveltejs/sapper#1660
sveltejs/sapper#1665 (comment)
tldr:
As this plugin changes chunk code without augmentChunkHash
, imported css file code changes will not change the chunk's hash. This is a major problem for caching environments as they will potentially miss css changes. It terms of sapper it breaks also the dev environment as the css changes aren't properly applied. I could already fix it on sapper level (sveltejs/sapper#1665) but realised that it might could and/or should also be solved in this plugin.
I was recently working on @rollup/plugin-typescript
and noticed that they have a good setup for testing Rollup plugins. It might be useful to do something similar here: https://github.com/rollup/plugins/tree/master/packages/typescript
The readme says "Use rollup-plugin-extract-bundle-tree to extract dependencies between JS and CSS chunks." Does that mean that you need to use rollup-plugin-extract-bundle-tree
to use this plugin or is it optional?
I'm also wondering how the CSS gets included in the document. Is there something that updates the JS to include a style
or link
tag into the document or is it the user's responsibility to somehow load the CSS?
Currently this package is hard to use in TypeScript apps because type definitions are neither included in it nor available as @types/rollup-plugin-css-chunks
package in npm.
TypeScript definitions can be auto-generated using a declaration: true
option in tsconfig.json
. I can submit a PR with all the necessary stuff for this if you want.
I've been trying to diagnose the root cause of this issue, which has a net result of including way too much unused CSS in a sapper app (from modules which are installed but not used after treeshaking), but also slightly more concerning, the building of empty js modules whose contents have been extracted to the top-level but still exist due to the way we determine if modules are required or not:
and as @benmccann has helpfully pointed out (a few days, before I actually understood what he was saying!) I've managed to debug down to the following line:
https://github.com/domingues/rollup-plugin-css-chunks/blob/master/index.ts#L90
Switching no-treeshake
to false
appears to fix the issue.
So before opening a PR to do this, I guess the important question is, why is it currently set to no-treeshake
, and will setting it to false
cause any issues?
I tried to use the new version, but got:
Error: Cannot find module 'url-join'
I think url-join
probably needs to be in dependencies
instead of devDependencies
I was wondering if you'd be open to having the plugin be in TypeScript? I potentially would be able to help with it, but wouldn't want to spend time on it if you're not interested in making that change. I find it really helpful personally, which is why I ask
When I run with the latest version of Rollup, I get the message:
A plugin is directly adding properties to the bundle object in the "generateBundle" hook. This is deprecated and will be removed in a future Rollup version, please use "this.emitFile" instead.
This is partly an issue due to how Sapper extracts css so maybe better solved there (cc @benmccann)? I've been trying to write a rollup plugin that also transforms and concats individual css imported by JS. Something like css-modules and Sass (@tivac). The issue i've run into is there is no way to avoid having rollup-plugin-css-chunks re bundle css files i've already bundled together.
consider: files pre processed files in a chunk: A.mcss, B.mcss, C.mcss
which get built into a single built.css
. At the moment there is no mechanism to to have this plugin include built.css
with all the other css files in the chunk and pass them them on to sapper. It gets specific to Sapper in that their splitting plugin looks in chunk.imports
for files to include, however I can't add built.css
to chunk.imports because css-chunks will turn it into a css @import
which is unnecessary, and i can't insert my plugin after it b/c Sapper adds it.
I realize that a bunch of this is sapper specific, but my guess is the ultimate solution is probably here. Perhaps defining an interface via plugin meta
to communicate new files (and the chunk they belong in)?
My project needs postcss plugin tool, and stylus.
I try to use rollup-plugin-css-chunks
and rollup-plugin-postcss
. it did not work
Since version ^2.x it isn't possible to access chunk related imported .css
modules. This is most likely because of this change: 3632de4#diff-dcdc3e0b3362edb8fec2a51d3fa51f8fb8af8f70247e06d9887fa934834c9122L90
Following rollup/rollup#3655 moduleSideEffects: 'no-treeshake'
seems to be needed to prevent rollup to tree-shake non js code.
Was that done on purpose? With this change it's impossible to use further css plugins that rely on .css
modules to be listed in chunk.modules
Edit:
Just discovered that it's related to: #7
Actually it's again relevant the context of sapper: sveltejs/sapper#1665 (comment)
Following the technique presented in https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html, a library can have both cjs & mjs outputs.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.