Update @wordpress/scripts to use PostCSS 8

[andrewstaffell]

Many PostCSS plugins are now requiring PostCSS 8, and so resources using @wordpress/scripts are failling to npm run build with latest module versions, throwing errors like:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.

I think it's enough to bump the version of postcss-loader in @wordpress/scripts to >= 4.0.3.

[ocean90]

To make sure we can use PostCSS 8 we have to wait a bit I think

• @storybook/core requires postcss-loader@3, see also Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin storybookjs/storybook#12668.
• @wordpress/postcss-themes has a hard requirement on postcss@7. This should probably be changed to peerDependencies, see also https://evilmartians.com/chronicles/postcss-8-plugin-migration.
• postcss-custom-properties, used by @wordpress/postcss-themes has also a hard requirement on postcss@7. Open pull request at Support PostCSS 8 postcss/postcss-custom-properties#229.

[andrewstaffell]

Thanks for the update @ocean90. Is there any known workaround for this issue in the meantime? As it stands resources are failing to compile with @wordpress/scripts... and plugins like postcss-import are pretty basic and hard to avoid. I tried npm shrinkwrap around the time I filed the issue but without success.

[ocean90]

Don't update plugins which require PostCSS 8. 🙈
I'm not aware of any workarounds but what I'd try is to use npm package alias and a custom webpack config. Something like npm install postcss-loader-4@npm:postcss-loader@4 and loader: require.resolve( 'postcss-loader-4' ).

[gziolo]

https://www.npmjs.com/package/postcss-custom-properties v11 is now listing PostCSS v8 as a peer dependency 🎉

Storybook merged a PR on their end as well but it’s still part of the alpha release line: storybookjs/storybook#13640

[shivapoudel]

@gziolo Any updates regarding PostCSS v8 implementation?

[gziolo]

We could give it a try and find a way to make Storybook work with PostCSS 7 and everything else with PostCSS 8.

[gziolo]

#27821 is now updated and everything seems to work with PostCSS v8. The only caveat is that we have Strorybook set to the prerelease version: v6.2.0-rc.2, but it works so personally think it's a good trade-off.

[gziolo]

Reverted in #30320 by @noisysocks due to issues with wp-scripts start in Gutenberg. It was also reported in #27821 (comment) by @stokesman.

[gziolo]

Another attempt in #30347.

[interglobalmedia]

Hi, POSTCSS 8.3.0 is not working for me. Have no errors, but when I updated all npm packages yesterday including webpack to 5.38.1, my styles are not being added to the head in html. So No styling and no JS that depends on the styles to work. No errors in the console, though.