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

[loxK]

Description

I have a block that uses flexslider. It fails to build since @wordpress/scripts version 29.0.0

Could it be related to that commit #61121 ?

Step-by-step reproduction instructions

1. clone my test repo and install npm dependencies

mkdir test
cd test
git clone https://github.com/loxK/wordpress-scripts-test.git ./ -b font-dependency
npm i

2. build : npm run build

3. notice the errors importing the font referenced in the felxslider module :

ERROR in ./blocks/editor.scss (./blocks/editor.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./blocks/editor.scss) 5:36-89
Module not found: Error: Can't resolve 'fonts/flexslider-icon.eot' in '/home/www/user/Tests/wordpress-scripts-test/blocks'

4. downgrade to wordpress/scripts v28.6.0, and build :

npm i -D @wordpress/[email protected]
npm build

5. notice that there are no errors and taht fonts are in assets/blocks/fonts :

# ls assets/blocks/fonts 
flexslider-icon.0c4bb125.eot  flexslider-icon.b5aefbb7.woff  flexslider-icon.c6c9e9e5.ttf

Screenshots, screen recording, code snippet

A test repository to reproduce is available here : https://github.com/loxK/wordpress-scripts-test/tree/font-dependency

Environment info

• Node v20.18.0
• Ubuntu 24.04.1 LTS

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[loxK]

I can confirm that, using @wordpress/scripts version 29.0.0 and later, if I revert 34c075b by removing the line require( 'postcss-import' ) from the webpack config at node_modules/@wordpress/scripts/config/webpack.config.js, it builds correctly.

Should I submit a pull request to revert it ?

[gziolo]

It look like https://www.npmjs.com/package/postcss-import needs some additional configuration to keep working with fonts and svgs.

[gziolo]

A test repository to reproduce is available here : https://github.com/loxK/wordpress-scripts-test/tree/font-dependency

This was very helpful. I was able to play with it locally, and I fully understand the problem. The styles that get imported live inside node_modules/flexislider/ and after the styles get inlined the path to the fonts becomes relative to the current project, which obviously doesn't have these assets. I would be in favor of reverting these changes as proposed in #66503 (comment).

[benoitchantre]

Does it help to replace @import by @use?

@import is deprecated and will be removed in Dart Sass 3.
https://sass-lang.com/documentation/at-rules/import/

[loxK]

Does it help to replace @import by @use?

No

[gziolo]

I opened #66975 that reverts changes that introduced the issue.

[gziolo]

npm publishing with the new @wordpress/scripts version containing the big fix should finish in about 10 minutes.

[loxK]

Thanks