Skip to content

Move CSS compilation to Vite Ruby

Stanislav Lashmanov requested to merge slashmanov/vite-dev-css into master

What does this MR do and why?

Move CSS compilation to Vite Ruby

The encompasses a few changes:

  1. extend the universal_stylesheet_link_tag and universal_path_to_stylesheet to serve styles directly from vite.
  2. use vite's native SCSS feature. This needs a lot of config changes.
  3. Use alias for @gitlab fonts: Otherwise we get files under public/assets/@gitlab. And who knows how well reverse proxies and such would handle built assets that have an at in the URL.

Implement our own Vite StylePlugin

Similar to our PageEntrypointsPlugin we implement virtual entry points for our styles which are resolved correctly depending on whether we load a style file in an EE or CE context.

Marry tailwind and our new style plugin

The idea is the following:

  1. We have a new entrypoint script for vite which makes sure that the css_in_js file exists before starting vite.
  2. We start tailwind process at the server start of vite
  3. If tailwind.css is required as an asset, we do not ship tailwind from app/assets/stylesheets/tailwind.css because it made vite watch all the HAML files and the whole universe. We ship it from app/assets/builds/tailwind.css instead, which is updated rather quickly with the new classes added. This also enables HMR for tailwind.

Once the tailwind migration has progressed far enough, we can remove 1.

How to set up and validate locally

This adds support for Hot Module Replacement for styles during development, no more page reloads to see CSS changes!

  1. Open any page
  2. Change some CSS on that page
  3. Look how fast it applies the change!
Edited by Stanislav Lashmanov

Merge request reports