[SPFX v1.22.1] Missing styling on some sp-dev-fx-controls-react controls, it seems due to heft build command would append additional hash on those control's styling

[wuxiaojun514]

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

• browser version
• SPFx version 1.22.1
• Node.js version v22.17.1
• etc

Describe the bug / error

I raised the same issue on pnp/sp-dev-fx-controls-react#2082.
But I feel it maybe related with heft toolchain, so I want to report here also.

I found several sp-dev-fx-controls-react controls (e.g. Accordion,Taxonomy Picker ,Carousel ,maybe more controls has this issue) have missing styling problem after I upgrade my spfx project to v1.22.1 .

• TaxonomyPicker lost styling

• RichText lost styling

• FolderPicker lost styling

• Carousel lost styling

• Accordion lost styling

The accordion should be like this

I noticed that these problematic controls have something in common, they use "module.scss" to manage its styling.

Then I did some deep dive and found that it would append some additional hash in those control's styling on bundled js in the dist folder.

For example, it should be like this for the accordion control's styling in the dist folder js , the classname is accordion_7388fbfa

_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(".accordion_7388fbfa{background:#fafafa}.accordion_7388fbfa>button{background:#f0f0f0;border:2px solid transparent;border-bottom:1px solid rgba(0,0,0,.2);color:rgba(0,0,0,.8);min-height:44px;outline:1px solid transparent;outline-offset:-3px;text-align:left;width:100%}.accordion_7388fbfa>button .ms-Button-label{font-weight:400}.accordion_7388fbfa>button:focus,.accordion_7388fbfa>button:hover{background:#f0f0f0;box-shadow:0 0 4px 2px rgba(0,0,0,.16);color:#000}.accordion_7388fbfa>button:focus{border:2px solid #000;outline-color:hsla(0,0%,100%,.6)}.accordion_7388fbfa .drawer_7388fbfa{background:#fafafa;font-size:15px;font-weight:400;line-height:20px;padding:24px 12px}.accordionChevron_7388fbfa{color:rgba(0,0,0,.8);font-size:16px;margin-left:-6px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9zcC1kZXYtZngtY29udHJvbHMtcmVhY3Qvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NyYy9jb250cm9scy9hY2NvcmRpb24vQWNjb3JkaW9uLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLG9CQUNFLGtCQUFBLENBRUEsMkJBS0Usa0JBQUEsQ0FJQSw0QkFBQSxDQUFBLHNDQUFBLENBSEEsb0JBQUEsQ0FMQSxlQUFBLENBRUEsNkJBQUEsQ0FDQSxtQkFBQSxDQUdBLGVBQUEsQ0FDQSxVQUNBLENBRUEsNENBQ0UsZUFBQSxDQUdGLGtFQUlFLGtCQUFBLENBRkEsc0NBQUEsQ0FDQSxVQUNBLENBR0YsaUNBR0UscUJBQUEsQ0FDQSxnQ0FBQSxDQUlKLHFDQUVFLGtCQUFBLENBRUEsY0FBQSxDQURBLGVBQUEsQ0FFQSxnQkFBQSxDQUpBLGlCQUlBLENBSUosMkJBR0Usb0JBQUEsQ0FGQSxjQUFBLENBQ0EsZ0JBQ0EiLCJmaWxlIjoiQWNjb3JkaW9uLm1vZHVsZS5jc3MifQ== */", true);
 
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
  accordion_7388fbfa: "accordion_7388fbfa",
  "ms-Button-label": "ms-Button-label",
  drawer_7388fbfa: "drawer_7388fbfa",
  accordionChevron_7388fbfa: "accordionChevron_7388fbfa"
});

However when in spfx 1.22 (heft) ,the js in dist folder would be like this:
The classname becomes accordion_7388fbfa_bb3a4b51， which has additional "_bb3a4b51", which causes missing styling issue

_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(".accordion_7388fbfa_bb3a4b51{background:#fafafa}.accordion_7388fbfa_bb3a4b51>button{background:#f0f0f0;border:2px solid transparent;border-bottom:1px solid rgba(0,0,0,.2);color:rgba(0,0,0,.8);min-height:44px;outline:1px solid transparent;outline-offset:-3px;text-align:left;width:100%}.accordion_7388fbfa_bb3a4b51>button .ms-Button-label_bb3a4b51{font-weight:400}.accordion_7388fbfa_bb3a4b51>button:focus,.accordion_7388fbfa_bb3a4b51>button:hover{background:#f0f0f0;box-shadow:0 0 4px 2px rgba(0,0,0,.16);color:#000}.accordion_7388fbfa_bb3a4b51>button:focus{border:2px solid #000;outline-color:hsla(0,0%,100%,.6)}.accordion_7388fbfa_bb3a4b51 .drawer_7388fbfa_bb3a4b51{background:#fafafa;font-size:15px;font-weight:400;line-height:20px;padding:24px 12px}.accordionChevron_7388fbfa_bb3a4b51{color:rgba(0,0,0,.8);font-size:16px;margin-left:-6px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9zcC1kZXYtZngtY29udHJvbHMtcmVhY3Qvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NyYy9jb250cm9scy9hY2NvcmRpb24vQWNjb3JkaW9uLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLDZCQUNFLGtCQUFBLENBRUEsb0NBS0Usa0JBQUEsQ0FJQSw0QkFBQSxDQUFBLHNDQUFBLENBSEEsb0JBQUEsQ0FMQSxlQUFBLENBRUEsNkJBQUEsQ0FDQSxtQkFBQSxDQUdBLGVBQUEsQ0FDQSxVQUNBLENBRUEsOERBQ0UsZUFBQSxDQUdGLG9GQUlFLGtCQUFBLENBRkEsc0NBQUEsQ0FDQSxVQUNBLENBR0YsMENBR0UscUJBQUEsQ0FDQSxnQ0FBQSxDQUlKLHVEQUVFLGtCQUFBLENBRUEsY0FBQSxDQURBLGVBQUEsQ0FFQSxnQkFBQSxDQUpBLGlCQUlBLENBSUosb0NBR0Usb0JBQUEsQ0FGQSxjQUFBLENBQ0EsZ0JBQ0EiLCJmaWxlIjoiQWNjb3JkaW9uLm1vZHVsZS5jc3MifQ== */", true);

// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
  accordion_7388fbfa: "accordion_7388fbfa_bb3a4b51",
  "ms-Button-label": "ms-Button-label_bb3a4b51",
  drawer_7388fbfa: "drawer_7388fbfa_bb3a4b51",
  accordionChevron_7388fbfa: "accordionChevron_7388fbfa_bb3a4b51"
});

The styling looks fine once I updated the related element's classname with this additional hash.

[You can see in this screenshot I changed one and keep another as original]

I just use the default heft configuration. I wonder whether other people can reproduce it?

Steps to reproduce

1. Generate a new spfx webpart project with lastest m365 cli , make sure it is in 1.22.1 version
2. Add some sp-dev-fx-controls-react controls I mentioned in the above (e.g. Accordion,Taxonomy Picker ,Carousel, you can just try the sample code mentioned in sp-dev-fx-controls-react documentations.)
3. Run Heft Start and check the output of your webpart whether it has missing styling issue or not

Expected behavior

The controls you used should keep the same styling in v1.22.1 as before

[Ashlesha-MSFT]

Hello @wuxiaojun514
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.

[Ashlesha-MSFT]

@wuxiaojun514,
I attempted to reproduce the styling issue with sp-dev-fx-controls-react controls in the local workbench, but all controls (Accordion, TaxonomyPicker, Carousel, RichText, FolderPicker) are displaying with expected behavior and proper styling.

I'm currently using "@pnp/spfx-controls-react": "^3.23.0" in the SPFx v1.22.1 project. Hash suffixes are present in the DOM, but both HTML classes and CSS rules have matching suffixes, so styling works correctly.

Could you provide more context about the specific version, environment, or conditions where you observed this issue?