Skip to content

Integrate new CSS compilation with webpack and vite

Lukas 'ai-pi' Eipert requested to merge gitlab-community/gitlab:leipert-embed-scss-new-compiler into master

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

  1. Make sure your GDK is up to date
  2. gdk config set gitlab.rails.new_css_pipeline true
  3. gdk reconfigure
  4. Restart gdk restart rails-web vite or gdk restart rails-web webpack
  5. You should CSS files compiled in app/assets/builds
  6. If you add body{color: red !important} to app/assets/builds/application.css and reload the page, then a few text bits should become red. This "proves" that the new gem cssbundling is used.
  7. If you now add body{color: blue !important} to app/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.

Merge request reports