callstack
Rollup plugin plays poorly with css bundlers in watch mode
Environment
I'm using the following relevant tech-stack:
- "@linaria/*": "^3.0.0-beta.1"
- "rollup": "^2.35.1"
- "rollup-plugin-css-only": "^3.1.0"
- "rollup-plugin-livereload": "^2.0.0"
- "react": "^17.0.1"
- nodejs: v15.5.0
- OS: Linux 5.9.14-arch1-1
Description
When running rollup in watch mode (rollup -c -w), changes to the css portion of the code are compiled with side-effects, causing inconsistent behavior. The problem is as follows:
- Linaria replaces the css with an import statement based on a generated filename, where a slug is based off the css content.
- CSS bundler plugins (css-only and postcss) cache the css content in the
transformhook, so the bundle can be assembled in thegenerateBundlehook. These caches are usually not emptied after bundle generation, since they can be used to skip unnecessary bundling steps in watch mode. - When the css content is changed, Linaria then generates a new filename for the inserted import statement, since the slug is based on the css content.
- The CSS bundler now gets the new content & filename, but has the old content still in cache, because it's key is the old filename. This causes the bundler to bundle both the old and the new content (and all subsequent changes).
This chain of events causes problems when css rules are modified in certain ways. Switching a value back and forth can cause the change to be silently ignored on the switch back. Removing a css class or attribute has no effect since it's still present in the bundle.
CSS Bundlers I could reproduce this with:
Notably, Anidetrix/rollup-plugin-styles does not have this problem, as it does all the bundling work in the generateBundle hook exclusively and does not keep a cache.
I realize this could be perceived as a problem of the bundler's caching logic. ~~However, since the @linaria/rollup plugin does not emit files anyway, rollup users need to explicitly emit them via a plugin and can thus make use of the assetFileNames output option to set hashes as needed.~~ (#638 is the reason for basing the slug on the content) In any case, an option to customize name generation would be very welcome.
Reproducible Demo
Fairly minimal demo is here: https://github.com/RianFuro/linaria-rollup-watch-repro
