RG-2791 Alias imported active to prevent its collisions with :active

[Aleksei Berezkin (aleksei-berezkin)]

In the prebuilt style.css, :active pseudo-class is wrongly rewritten to :ring-button-active for button groups.

The problem occurs because button-group.css imports active from button.css:

@value button, active, flat from ../button/button.css;

This makes active a local imported symbol. In the CSS Modules: Values, symbol replacement is token-based and applies not only to class names, but also to selector and at-rule tokens. As a result, :active can be rewritten incorrectly. This is a known behavior limitation; see e.g. css-modules/postcss-modules-values#4.

This PR introduces the workaround, which is simply to import the symbol under an alias:

@value button, active as buttonActive ...;

and then use that alias instead of .active in class selectors. This keeps :active untouched.

The same workaround was also applied to header.css, which imports active from link.css. That file has not shown errors so far, but the alias was added for consistency and to prevent similar collisions in the future.

[Copilot]

Pull request overview

This PR addresses a CSS Modules @value token-collision issue where importing a symbol named active can inadvertently rewrite the :active pseudo-class due to token-based replacement. The fix aliases the imported active symbol in affected stylesheets, preserving correct :active behavior while keeping class selectors functionally equivalent.

Changes:

• Aliased imported active in button-group.css to buttonActive and updated selectors to use the alias.
• Aliased imported active in header.css to linkActive and updated selectors to use the alias.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/header/header.css	Aliases imported active to linkActive and updates selectors to avoid :active token collisions.
src/button-group/button-group.css	Aliases imported active to buttonActive and updates selectors to prevent unintended :active rewriting.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.