@wordpress/scripts: Script built with npm run build is slightly different depending on the order of SCSS imports

[mrleemon]

I'm developing a block and I'm using the latest @wordpress/scripts package (12.5.0) to build it. I have been fiddling with it and I found a weird issue: the resulting build/index.js script is slightly different depending on the order of the SCSS imports.

With the following order:

// Order 1
import './editor.scss';
import './style.scss';

the beginning of the generated build/index.js is (see the 3):
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{3:function(e,t,r){}}])......

But, if I change the order to:

// Order 2
import './style.scss';
import './editor.scss';

the beginning of the generated build/index.js changes to (see the 2):
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{2:function(e,t,r){}}])......

These differences wouldn't matter to me if the block wouldn't fail when running alongside other third-party block plugins active (e.g. Jetpack) depending of the SCSS import order I use. If I use order 2, my block works seamlessly with Jetpack active, but if I build my block using order 1, I get a blank screen when editing any page/post with Jetpack active.

My question is, why are there differences in the generated build/index.js when using one SCSS import order over the other? Shouldn't it be the same?

Thanks in advance

[gziolo]

Thank you for your helpful report. This issue looks very similar to what was reported in #23607, #24321, and #27969. It should be fixed with #27985 and there is now a new version of @wordpress/scripts available that contains this patch. I'm closing this issue as well hoping that it's resolved. If it isn't the case we can always reopen 😄