domingues / rollup-plugin-css-chunks Goto Github PK

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:

sveltejs/sapper#1564

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.