Initial thoughts for how we could enable separating these two CSS bundles in Codex:

• Move the styles needed for the CSS-only version (the "basic styles") of a component out of the .vue file, into a separate .less file (one for each component)
• Keep the styles that are only needed for the JS version (the "interactive styles") in the .vue file
• In the build process, build two(*) separate CSS files: one with the basic styles for all components, and one with the interactive styles. (Optionally, we could build another CSS file that combines both, for convenience). Publish all these files as part of the Codex package.
• If any CSS-only components are present on the page, load the basic styles as render-blocking styles
• If any JS-powered components are present, load the interactive styles as part of the JS bundle for those components (plus the basic styles if they haven't already been loaded)
• Optionally, we could express this relationship between the .vue file with the component code and the .less file with the basic styles by having the style block of the .vue file @import the .less file. However, we'd then have to map these imports to an empty string when building the interactive-only bundle, which would also not be super clear

(*) Really four, because we would build an LTR version and an RTL version of each

This would not solve for all components being bundled together, but that's a pre-existing issue independent of CSS-only components. We could explore solving that by splitting Codex into smaller bundles, kind of like what we did with codex-search (but ideally I'd like to avoid creating dozens of NPM packages; support for a build step in MW could solve this too)

@Catrope do you see any benefit in moving the styles into a completely separate package (Codex vue components would still contain their own supplemental styles as needed)? I guess we can try to do this in the main Codex package first and then see if we need a separate package for codex-styles / codex-css down the road.

What would all of this mean for users who are just using Codex Vue components with a build tool outside MediaWiki? Ideally they should be able to import a Vue component and get both the base and interactive styles without having to do anything else.

In T323180#8404078, @AnneT wrote:

What would all of this mean for users who are just using Codex Vue components with a build tool outside MediaWiki? Ideally they should be able to import a Vue component and get both the base and interactive styles without having to do anything else.

Users of Codex components outside of MediaWiki already need to load the Codex CSS file themselves (styles are output as a separate file in Vite library mode) from the /dist folder in the NPM package.

I was originally imaging a system like this:

• Separate codex-css package with its own build config (could use Vite or something else) – all the various LESS files would get compiled into a single stylesheet.
• Continue to build component override styles alongside the Codex JS in the main Codex workspace. These styles would need to be loaded in addition to the above stylesheet if the JS-enabled components were being used.

But maybe we can do this without needing a separate sub-package if we provide the appropriate Vite config.

In T323180#8403312, @egardner wrote:

@Catrope do you see any benefit in moving the styles into a completely separate package (Codex vue components would still contain their own supplemental styles as needed)? I guess we can try to do this in the main Codex package first and then see if we need a separate package for codex-styles / codex-css down the road.

I don't think there are major benefits to either approach. To me it's more about "is this conceptually a separate thing, and should we publish it to NPM as such". When CSS-only component mature we may well decide that they are, but maybe for now we can start out without a separate package?

OOUI splits its styles into a few groupings so that developers can ship a smaller style payload. We could consider doing something similar for Codex styles as well. However, I'm wondering if there is another way we could do this, similar to how we handle Codex Icons in MediaWiki.
In MW we have a ResourceLoader PHP method called getIcons which can take arguments that specify which icons are needed. Only data for those icons is delivered to the browser. Usage looks like this:

{
	"name": "resources/icons.json",
	"callback": "MediaWiki\\ResourceLoader\\CodexModule::getIcons",
	"callbackParam": [
		"cdxIconAlert",
		"cdxIconCheck",
		"cdxIconClose",
		"cdxIconError"
	]
}

Could we do something similar for Codex styles, with some kind of getStyles method?

{
	"name": "resources/codex.css",
	"callback": "MediaWiki\\ResourceLoader\\CodexModule::getStyles",
	"callbackParam": [
		"cdxButton",
		"cdxIcon",
		"cdxSelect"
	]
}

Styles for the desired components would then get concatenated into a single CSS file via PHP.

Change 865840 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] [PoC, Do not merge] Example codex-buttons package

https://gerrit.wikimedia.org/r/865840