SPFx 1.23.0-rc.1 hashes CSS classes from :global selectors inside .module.scss

[chr-sad]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

SPFx 1.23.0-rc.1, Node 22.22.2 LTS

Describe the bug / error

After upgrading to SPFx 1.23.0-rc.1, CSS classes that should stay global are being transformed into CSS module-scoped names.

In our SPFx Webpart we use a flexbox based grid system. The component itself has not been changed since many SPFx Versions and is stable since then.

The structure looks like:
gridComponent.module.scss which should use module-scoped names but includes mixins with :global(...) scoped classes:

`.gridClass {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
color: $ms-color-black;
outline: none !important;
position: relative;

//import grid...
@import 'sass-flexbox-grid/scss/main.module.scss';
...
}`

And mixins like:

:global(.row) { @include row(); }

Before SPFx 1.23.0-rc.1 the result was something like .gridClass_6e35b56f .row { ... } but now even the row output contains hashed class names like row_6e35b56f instead of row.

Downgrade to SPFx 1.22.2 resolves the issue.

Steps to reproduce

1. Use SPFx 1.23.0-rc.1.
2. Define utility selectors in a .module.scss file using :global(.row) style selectors.
3. Build/bundle project.
4. Inspect generated CSS/module output. See that classes are renamed to hashed variants instead of staying global.

Expected behavior

Selectors wrapped with :global(...) should remain un-hashed and emitted as plain global CSS classes.