Integrate new CSS compilation with webpack and vite
What does this MR do and why?
Move CSS compilation to a lib file
By moving most of the CSS compilation to a lib file, we will be able to reuse it more easily in some other scripts.
Add Vite plugin for the new CSS compiler
This way we can reuse most of the logic. We only execute this when
setting USE_NEW_CSS_PIPELINE=true
in the environment.
Add simple compiler to nodemon
We only need it in dev mode, so no need to properly add it to webpack. We can simply hook into nodemon.
See #438278 (closed)
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
TBA
How to set up and validate locally
- Make sure your GDK is up to date
gdk config set gitlab.rails.new_css_pipeline true
gdk reconfigure
- Restart
gdk restart rails-web vite
orgdk restart rails-web webpack
- You should CSS files compiled in
app/assets/builds
- If you add
body{color: red !important}
toapp/assets/builds/application.css
and reload the page, then a few text bits should become red. This "proves" that the new gemcssbundling
is used. - If you now add
body{color: blue !important}
toapp/assets/stylesheets/application.scss
and reload the page, then a few text bits should become blue. This "proves" that vite/webpack started the new CSS compiler.