Module.css choice for Button component

[Arsikod]

Hi team, I have been studying recently primer codebase and was wondering what was the necessity behind using module.css for button /buttonBase styling?
It looks reasonable for me due to buttons nature. Button is probably most dynamic component that might have a lot of different variants and states.
I really like the way you approach styling with :where pseudo element and dynamic data-attributes.
So I tried to replicate the same styling with styled-components that you also use as a dependency, but it leads to creation of huge object and probably might add some runtime overhead due to dynamic runtime variables.
My main questions are:
1 - what was the reason to use module.css for styling buttons?
2 - do you guys see any problem in adding different tools for different usecases? like module.css for buttons, styled-components for inputs and @styled-system for others.

[lesliecdubs]

Hi @Arsikod 👋🏻 Our reasons for moving toward CSS Modules in Primer React are documented over in this architectural decision record: https://github.com/primer/react/blob/main/contributor-docs/adrs/adr-016-css.md.

For the performance reasons detailed in that document, and the importance of consistency in approach for library maintainers and contributors, we would prefer to stick with one tool for styling; I would say, though, that the decision to offer different tools for different use cases might make sense for other projects depending on the need.