Skip to content

Compile CSS with Vite

Sarah German requested to merge 63-tailwind-vite into main

What does this MR do and why?

Move CSS processing from Hugo to Vite.

Why:

  • Allows for rebuilding the Tailwind CSS bundle when templates (Hugo or Vue) change
  • JS processing already uses Vite
  • Lower the barrier to entry for contributors who are familiar with frontend but not Hugo

Closes #63 (closed)

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Run make setup to update dependencies (you can ignore the warning from Python/yamllint, known issue, shouldn't impact anything here)
  3. Start the Hugo dev server: make view
  4. In another terminal, start Vite in watch mode: yarn run dev
  5. Make a CSS change (e.g, edit .placeholder in themes/gitlab-docs/assets/css/main.css), save it, and verify you can see it take effect (.placeholder is visible on any internal page, like http://localhost:1313/integration/datadog/)
  6. Edit a template and add a Tailwind class we haven't used yet (e.g, edit themes/gitlab-docs/layouts/_default/baseof.html and change the navbar from gl-bg-theme-indigo-900 to gl-bg-theme-indigo-100). Save the change and verify you can see that take effect on the dev server

Note that these FE changes do not livereload in the browser. It'd be cooler if they did 😄 but we can perhaps add that later.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #63 (closed)

Edited by Sarah German

Merge request reports