SPFx 1.21 - SCSS/CSS Module hashes being applied twice, styling not working

[akarlsten]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Linux

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

• browser version: Latest Edge/Chrome (but the issue is visible in the files)
• SPFx version: 1.21.0 (Issue was also present in RC)
• Node.js version: 22

Describe the bug / error

We've been developing a new SPFx solution and went ahead and started with the 1.21 RC (and since yesterday, the actual release version) - everything was working fine while serving in development, but when we tried to deploy it live in production none of our styles were being applied.

After some fiddling around we noticed that the generated minified css in the .js bundle (in /dist) had names like .app_{hash}_{hash} while the actual elements had classnames like .app_{hash}. In /lib everything looked like it should (with just .app_{hash} on both elements and css styles), which is presumably why everything looked good in development.

After some more rooting around we figured the first set of hashes was being applied by the sass step of the build chain, then later on the webpack step added another set of its own.

We've managed to work around it by setting the following in our gulpfile.js:

build.configureWebpack.mergeConfig({
  generateCssClassName: (name) => {
    return name
  },
...
})

Did we miss something or is this a bug?

Steps to reproduce

1. Bootstrap new 1.21 SPFx project.
2. Add some styles.
3. Styles should be visible while serving in development.
4. Bundle, package and deploy solution.
5. Styles not applied.

Expected behavior

The styles should be applied both in dev and prod!

[chr-sad]

We have the same issue - I hoped it was related with this issue #10053 and would be resolved in the GA version.

[Ashlesha-MSFT]

Hello @akarlsten,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@akarlsten,
I able to see the styles after the deployment, using SPFx 1.21.

Are there special circumstances in which styling is not working, please give me some reference code in this case.

[chr-sad]

@Ashlesha-MSFT please see the latest comment of @thechriskent in this ticket #10053 (comment), which is the exact steps to reproduce this issue. Did you use *.module.scss files to style your sample webpart?

[Ashlesha-MSFT]

@akarlsten,
We were able to reproduce the issue, and we are investigating it. We have logged this as a bug, and our engineering team will look into it.
Thank you for your patience!

[VesaJuvonen]

SharePoint Framework 1.21.1 is now out to address this one. If you could confirm that the issue is fixed for you, that would be awesome - thanks for reporting this and sharing issues which we should address 🙏🧡

Release notes for 1.21.1 at https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.21.1

[Ashlesha-MSFT]

@akarlsten,
I can confirm the fix using 1.21.1

As the issue is resolved
Can we please go ahead and close issue.
Please help us by filling below feedback form https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR4mTPG34N0xHuJATbbeqmGlUMTJVMzY0TlAwNThWWlVCNFY4MExFNjNTUC4u

[VesaJuvonen]

Closing the issue as it was also confirmed to be fixed in the duplicate issue.

Thanks for everyone for reporting this and we do apologize inconvenience this might have caused.

Please keep on flagging any issues as previously, so that we can start resolving them as fast as possible 🙏👍