Problem
When testing this patch, a proof-of-concept of a code-splitting solution that allows features to load only the individual components they need (and their dependencies), this visual regression occurred in the Vector search box:
The misalignment and apparent double-border of the search input and button happen because we expect styles written for the SearchInput component targeting its internal button to overrides styles that appear in the Button component. However, with this new system, the Button styles are apparently being loaded after the SearchInput styles, and both styles are applied to selectors with the same specificity, so the Button styles win out.
Potential solutions
Requirements
- We should aim to load styles in the same order in all contexts (main Codex bundle, in MediaWiki, on the docs site)
- We should probably rely on build tooling rather than coding standards/patterns
Option 1: Always load styles alphabetically
The SearchInput button styles previously worked somewhat accidentally because we were loading styles in alphabetical order, and SearchInput comes after Button. We could ensure that ResourceLoader always loads styles alphabetically to match what's happening on the docs site and in the main bundle.
This is arbitrary, though, and should likely only be done as a stop-gap solution until we can implement a longer-term one.
Option 2: Load styles in dependency order
In all contexts, we would need to load styles in dependency order, i.e. load dependencies before dependents. If SearchInput requires Button, then Button styles should be loaded first so that SearchInput styles can override them.
This would require appropriate control of style order in all contexts.
Option 3: Make component style overrides more specific
For all components that require and style other components, we would need to increase the specificity of the selectors. E.g. for the SearchInput end button, instead of the status quo:
.cdx-search-input {
&__end-button {
// override styles
}
}We would do something like this:
.cdx-search-input {
.cdx-search-input__end-button {
// override styles
}
}This would enable us to load components in any order, but would require Codex developers to follow this pattern, which they could easily forget to do.
Acceptance criteria
- Agree on requirements
- Determine the path forward and open a new task for it