| AnneT | |
| Apr 6 2023, 2:35 PM |
| F36941958: Screenshot 2023-04-06 at 2.00.21 PM.png | |
| Apr 6 2023, 9:01 PM |
| F36941529: image.png | |
| Apr 6 2023, 2:35 PM |
We recently made a change to the syntax of the code that sets the mask-image rule for CSS-only icons within buttons, removing some unnecessary variable interpolation that didn't work with the PHP less compiler used in MediaWiki. However, this change broke the Less in the Vite sandbox (but not the Vitepress site):
As you can see in the screenshot, the @background-image-url variable is not getting parsed.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Update Codex from v0.9.0 to v0.9.1 | mediawiki/core | master | +2 K -1 K | |
| build: Update Vite, Vitepress, and related libraries | design/codex | main | +1 K -992 |
I spent some time digging into this – I was wondering why things were working in Vitepress (in codex-docs) but not in Vite itself (in codex core). Was there some Less or PostCSS config getting applied in Vitepress that we needed to use in Vite proper for correct variable interpolation here?
It turns out that the Codex Docs are already getting built with Vite 4 (which was released in December of last year; meanwhile Codex itself is still getting built with Vite 3.
I'm going to see if bumping Codex up to Vite 4 fixes the problem here (and doesn't break other things). We may want to consider upgrading everything to use Vite 4. However, from the Vite migration guide, I did see the following note (under Modern Browsers baseline change):
The modern browser build now targets safari14 by default for wider ES2020 compatibility (bumped from safari13). This means that modern builds can now use BigInt and that the nullish coalescing operator isn't transpiled anymore. If you need to support older browsers, you can add @vitejs/plugin-legacy as usual.
So if we upgrade Vite to v4, Codex may stop supporting Safari v13 and below; theoretically we are still supposed to support back to v10? Would be great to be able to dedicate some QA resources to testing Codex before and after a Vite upgrade in older Safari versions...
Confirming that the Less variable interpolation issue is fixed when we upgrade Codex to Vite 4.
Change 906663 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):
[design/codex@main] build: Update Vite, Vitepress, and related libraries
Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/97ecb286bb/wiki/Special:VueTest
Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/97ecb286bb/w/build/codex/docs
Change 906663 merged by jenkins-bot:
[design/codex@main] build: Update Vite, Vitepress, and related libraries
Change 911932 had a related patch set uploaded (by VolkerE; author: VolkerE):
[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1
Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9a9f20a61d/w
Change 911932 merged by jenkins-bot:
[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1
Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted: