Try: React 19 <link /> for components

[tyxla]

What?

As we experiment with React 19, this PR attempts to use <link /> for component styles.

For more info, see:

• https://react.dev/blog/2024/04/25/react-19#support-for-stylesheets
• https://react.dev/reference/react-dom/components/link

Why?

Currently @wordpress/component styles are a monolithic stylesheet. This approach will allow us to have separate CSS files per component, and to load each of the stylesheets actually when the component is to be rendered.

How?

For the experiment, we're refactoring ButtonGroup's stylesheet from SCSS to CSS. In production, we'd either have CSS modules or have a pre-processing step from SASS to separate CSS files.

We're then loading the stylesheet by using <link /> directly in the ButtonGroup component.

Testing Instructions

• Insert a Buttons block and a couple of buttons in it.
• Select one of the Button blocks.
• Open inspector controls of the block
• Verify the stylesheet gets loaded and the width controls look well

Testing Instructions for Keyboard

Same

Screenshots or screencast