Start using @wordpress/components

[ashfame]

In our pairing session, we made this change to load CSS files (ours and one coming from @wordpress/components) via JS so that we can start using components from @wordpress/components. This also has other benefits in general such as splitting css files for different components.

In this PR, only buttons are being handled. Here is the screen recording of how it looks now:

Screen.Recording.2024-11-15.at.17.13.02.mov

[psrpinto]

Tested and it works 👌

To provide some extra context concerning the bundling process, in addition to what @ashfame mentions in the PR description:

In this PR we made webpack do the following:

• Understand import 'style.css'; statements in JS/TS files, so that it compiles a list of all paths that should be bundled.
• Bundle all style paths into a single built file, which is then referenced from the HTML.
• Preprocess styles, which means we can use SASS, if we feel the need. For now we can keep using plain CSS, and use SASS when/if relevant.

This unlocks the possibility of splitting app.css into multiple files. At the moment, app.css contains the styles of everything, but we can now split it into "components", for example, breadcrumbs.css and buttons.css. I think ideally, app.css would be renamed to e.g. layout.css, and would only contain global styles, that should be applied to all elements. Everything else that is currently in app.css would be extracted to specific files, for example buttons.css.

Additionally, at the moment, we still have custom styles for buttons, in addition to the styles that come from @wordpress/components. These custom styles should be removed, or at least cleaned up so that they only specify things we want to override.

We can address these issues in future PRs.