Compile CSS with Vite
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.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Run make setup
to update dependencies (you can ignore the warning from Python/yamllint, known issue, shouldn't impact anything here) -
Start the Hugo dev server: make view
-
In another terminal, start Vite in watch mode: yarn run dev
-
Make a CSS change (e.g, edit .placeholder
inthemes/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/) -
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 fromgl-bg-theme-indigo-900
togl-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
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.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #63 (closed)
Edited by Sarah German