Scripts: Import CSS files before optimization

[benoitchantre]

What?

Import CSS files before the minification process.

Closes #61112.

Why?

Small performance improvement for people using CSS imports and the @wordpress/scripts package.

How?

postcss-import is run before cssnano

Testing Instructions

1. Scaffold a block
2. Rename your main stylesheet from .scss to .css
3. Create 2 CSS files
4. Import these files in the main stylesheet
5. Run npm run build
6. See that you have a resulting stylesheet that is minified (only one line instead of two)

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: benoitchantre <[email protected]>
Co-authored-by: gziolo <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[benoitchantre]

@gziolo A few tests have failed at npm install. Should I rebase and force push this PR?

Would you have some time to review it?

[gziolo]

It works as advertised in my testing. It will need a rebase to resolve conflicts with the latest changes in trunk.

It would be also nice to add an entry in the changelog file under ## Unreleased section:

### Enhancements

- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)).

[gziolo]

Thank you so much for taking it to the finish line.

[gziolo]

There is a new report that references this PR:

• Scripts: regression - fails to import fonts refered in imported css file from an external npm's dependency #66503

Is it possible that there is more work necessary to make this additional loader configured accordingly? At the moment, it uses the default config:

require( 'postcss-import' ),

[benoitchantre]

@gziolo I will not be able to find the required time to look for an additional configuration. The easiest path if nobody can jump on this would be to revert this commit.

[gziolo]

I opened a PR that reverts the changes: #66975.