Skip to content

feat: Replace the gulp UI toolchain with Vite - #874

Merged
lfrancke merged 6 commits into
mainfrom
chore/ui-toolchain
Jul 16, 2026
Merged

feat: Replace the gulp UI toolchain with Vite#874
lfrancke merged 6 commits into
mainfrom
chore/ui-toolchain

Conversation

@lfrancke

@lfranckelfrancke commented Jul 10, 2026

Copy link
Copy Markdown
Member

Description

Review and merge #873 first

This PR does a bunch of "cleanup" and modernisation. The version of gulp we use has been EoL since 2019 or so. The upstream repo has not done any changes here in years so I finally decided to tackle it and bring it in line with our other frontend projects by using Vite etc.

  1. This minifies the SVGs and commits them - gulp would do it on every build
  2. It removes a whole bunch of leftovers from the original UI project (the docs and gitlab stuff)
  3. Adds a NOTICE file for license compliance
  4. Replaces gulp with Vite
  5. Some lints now triggered so some CSS has been changed that was invalid - shouldn't change anything

This can be split into multiple PRs if you like but those 67 changed files look scarier than it really is. There are maybe 5 files worth looking at.

The main file is build.mjs which takes everything the gulp plugins did and bundles it in one build file.

I had Claude build it using this version and the old gulp build and checked for differences: There are 0 diffs. In other words: This produces the same output as the old one.
I do plan more changes to improve on this later but for now I just wanted to switch the build system.

@lfrancke
lfranckeforce-pushed the chore/ui-toolchain branch from cceeea1 to a67c1e6CompareJuly 10, 2026 22:49
@lfranckelfrancke self-assigned this Jul 11, 2026
@lfranckelfrancke moved this to Development: Waiting for Review in Stackable EngineeringJul 11, 2026
@lfrancke
lfranckeforce-pushed the chore/ui-toolchain branch 2 times, most recently from 8658888 to 7aeb67eCompareJuly 15, 2026 10:08
@lfrancke
lfranckeforce-pushed the chore/ui-toolchain branch from 7aeb67e to ef25007CompareJuly 15, 2026 11:57
An error occurred while trying to automatically change base from chore/vendor-ui to mainJuly 15, 2026 12:07
gulp-imagemin minified these on every build; the minified versions are
committed so the build does not need an image pipeline.
The .gitlab-ci.yml and the docs/ component are inherited from
antora-ui-default and were never used here.
Minification strips embedded license header comments from the built
css/js, so the attributions (Font Awesome, highlight.js, Asciidoctor
Tabs, Octicons, the OFL fonts, and the MPL-2.0 upstream fork) live in
a NOTICE file. The build ships it in the UI bundle, which publishes it
on the site.
Vite is what stackable-apps and stackable-cockpit build with, and the
gulp pipeline was frozen: gulp-eslint/gulp-stylelint are unmaintained
and pinned eslint 6 / stylelint 13. Upstream antora-ui-default still
ships the same frozen toolchain, so there is no upstream modernisation
to converge with. Everything starts on the current majors: vite 8,
eslint 10, stylelint 17, archiver 8, Node 24.
- build.mjs produces the identical bundle layout: js entries are built
as self-contained classic scripts (one vite pass each), the css in a
separate pass, static directories are copied, NOTICE and LICENSE are
included, everything is zipped to build/ui-bundle.zip. Verified by
building the full site with both toolchains: every page is
byte-identical.
- The vendor bundle sources become ESM and reference the browser build
of @asciidoctor/tabs explicitly (vite does not honor the style and
browser package fields the way browserify/postcss-import did).
- CSS custom properties are no longer inlined at build time; every
supported browser handles var(), and the upcoming design-token work
needs them preserved.
- The standalone gulp preview is gone; render UI changes with real
content via 'make build-truly-local' or the deploy preview.
- The stylelint config accepts the inherited upstream css conventions
instead of reformatting everything right before the planned upstream
re-sync.
- package-lock.json is regenerated; @antora/* and pagefind are pinned
to their previously locked versions so the rendered site and search
assets stay identical (bumping those is Renovate's job).
- Node 24 in .nvmrc/engines/CI, matching stackable-apps. The root
.nvmrc also raises the Netlify build to Node 24.
background-color/min-width do not accept 'none'; browsers ignored the
declarations, so removing them does not change rendering. Also an
unused event parameter and a stale eslint-disable directive.
Scoped away from the inherited upstream src/ files until the planned
upstream re-sync, so the diff against antora-ui-default stays readable.
prettier --check runs as part of npm run lint (and therefore in CI).
knip is deliberately not added: handlebars templates and classic
browser scripts have no import graph, and most dependencies are
referenced from playbook YAML or css, so it would need to ignore
nearly everything to stay quiet.
@lfrancke
lfranckeforce-pushed the chore/ui-toolchain branch from ef25007 to 787fc7aCompareJuly 15, 2026 12:09
@lfrancke
lfrancke changed the base branch from chore/vendor-ui to mainJuly 15, 2026 12:10
@xeniapexeniape moved this from Development: Waiting for Review to Development: In Review in Stackable EngineeringJul 16, 2026
@lfrancke
lfrancke added this pull request to the merge queueJul 16, 2026
@lfranckelfrancke moved this from Development: In Review to Development: Done in Stackable EngineeringJul 16, 2026
Merged via the queue into main with commit 3aa7294Jul 16, 2026
8 checks passed
@lfrancke
lfrancke deleted the chore/ui-toolchain branch July 16, 2026 06:56
@lfranckelfrancke moved this from Development: Done to Done in Stackable EngineeringJul 16, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants

@lfrancke@xeniape