Page MenuHomePhabricator

Split Codex styles into separate ResourceLoader modules
Closed, ResolvedPublic


In order to support Codex's CSS-only components in MediaWiki, as well as possible server-side rendering of Codex components in the farther future, we'll need to be able to load Codex's styles as render-blocking styles. ResourceLoader currently does not allow loading a module's styles as render-blocking styles unless the module only contains styles. The current @wikimedia/codex module contains both scripts and styles, so we'll need to move the styles into their own module, and make that new module a dependency of the @wikimedia/codex module. We have to do the same thing for @wikimedia/codex-search as well.

We also need to decide what to name the new styles-only modules. Note that these module names will not be used with require(), or in any client-side context, only on the server side when calling OutputPage::addModuleStyles(). Some ideas:

  1. @wikimedia/codex.styles and @wikimedia/codex-search.styles
  2. @wikimedia/codex/styles and @wikimedia/codex-search/styles
  3. codex-styles and codex-search-styles
  • Create new style-only modules for codex and codex-search
  • Remove styles from the existing @wikimedia/codex and @wikimedia/codex-search modules, and make them depend on the corresponding new style-only module

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Catrope triaged this task as High priority.Feb 24 2023, 3:29 AM
Catrope updated the task description. (Show Details)
Catrope moved this task from Inbox to Up Next on the Design-System-Team board.

I favor #3, because we don't need an NPM-compatible module name in this context, and I think #1 and #2 would be confusing because they pretend to be NPM-compatible but aren't. But that's not a strongly held opinion, and I'd love to hear other opinions or other naming suggestions.

Catrope changed the task status from Open to In Progress.Feb 27 2023, 5:41 PM

In terms of naming, I think codex-styles and codex-search-styles make the most sense. I can see the appeal of keeping the names consistent with the actual NPM packages, but I agree that we shouldn't use names that look NPM-compatible but aren't.

That said, we have considered renaming the @wikimedia/codex package to something like @wikimedia/codex-components (as part of repositioning Codex as the Wikimedia Design System), so codex-components-styles (or codex-component-styles?) might be more future-proof.

Change 902387 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Create separate ResourceLoader modules for Codex styles

  1. is the favorite from the options provided.

I'm with @AnneT at taking the chance to move 'codex-styles' to something different. It's harder to grasp on first sight what separates 'codex-styles' from 'codex-search-styles'. What are the boundaries? Do 'codex-styles' include search styles with newcomer eyes on?
'codex-component-styles' I'm not sure yet about, as patterns like Grid that should be encompassed there as well.

Side-note, 'codex-search-styles' might be confusing in future onboarding as a normal search isn't included, just TahS. But given it's special character and just one place to really use it, this seems more acceptable.

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:

Change 902387 merged by jenkins-bot:

[mediawiki/core@master] Create separate ResourceLoader modules for Codex styles

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted: