[spfx 1.22] Missing styling on several controls when upgrade to spfx 1.22

[wuxiaojun514]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.23 ]

I am not sure whether other people has the same problem or it is just my own environment issue.
I noticed that many 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 .

Observed Behavior

• TaxonomyPicker lost styling

• RichText lost styling

• FolderPicker lost styling

• Carousel lost styling

• Accordion lost styling

The accordion should be like this

My feeling is that, it looks like all controls which uses "module.scss" file as styling have this issue when upgrade to v1.22.1.

As I said, I am not sure whether it is my own environment issue or other people also have this issue.
Please comment if you can reproduce this problem.

Steps to Reproduce

1. Generate a new webpart spfx project via using latest m365-cli , to make sure it uses heft and spfx version is v1.22.1
2. Add the controls I mentioned (just copy those sample code in the https://pnp.github.io/sp-dev-fx-controls-react/controls )

[wuxiaojun514]

I found that it would append the additional hash on spfx dev control's module scss when do build with heft

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"
});

I don't know whether it is a bug on Heft

[nikolaiessel]

Copilot created a fix in my local project by adding a config/spfx-customize-webpack.js file:

module.exports = function customize(webpackConfig /*, taskSession, heftConfiguration, webpack */)
{
	// Ensure PnP SPFx controls' CSS module classnames are not rehashed by our loader
	// Their package ships pre-hashed classnames; rehashing appends a second suffix which breaks selectors.
	try
	{
		const isPnpControlsCss = (cssPath) => /node_modules[\\/]+@pnp[\\/]+spfx-controls-react[\\/]/i.test(cssPath);
		const visitRules = (rules) =>
		{
			if (!Array.isArray(rules)) return;
			for (const rule of rules)
			{
				if (rule.oneOf) visitRules(rule.oneOf);
				const uses = Array.isArray(rule.use) ? rule.use : (rule.loader ? [rule] : []);
				for (const use of uses)
				{
					const loader = use.loader || use;
					if (typeof loader === "string" && loader.includes("sp-css-loader"))
					{
						use.options = use.options || {};
						const prevGen = use.options.generateCssClassName;
						use.options.generateCssClassName = (existingClassName, cssFilePath, cssContent, production) =>
						{
							if (isPnpControlsCss(cssFilePath)) return existingClassName;
							return typeof prevGen === "function"
								? prevGen(existingClassName, cssFilePath, cssContent, production)
								: existingClassName;
						};
					}
				}
			}
		};
		if (webpackConfig.module && Array.isArray(webpackConfig.module.rules))
			visitRules(webpackConfig.module.rules);
	} catch (e)
	{
		// eslint-disable-next-line no-console
		console.warn("CSS loader customization failed:", e?.message ?? e);
	}

	return webpackConfig;
};

[wuxiaojun514]

Thanks @nikolaiessel for your work around. It seems the styling working now after I added this configuration!

Many thanks.

I already raised a bug SharePoint/sp-dev-docs#10603 at sp-dev-docs, hope Microsoft will fix it.

[wuxiaojun514]

Microsoft cannot reproduce it on their side.

Perhaps it is my environment issue...

[nikolaiessel]

@wuxiaojun514 not only yours: the code above I already needed myself before ;)

I just deleted full package-lock.json / dist / lib / limb-commonjs / node_modules / release / temp ... and it worked without the workaround above

[klukc7]

The solution is not working for me :/

[jimmywim]

@nikolaiessel 's workaround works for me. Noticed lost styling on the Web Part Title component in Edit Mode, we just see a native textarea. With the workaround in place, styling and functionality is restored.

EDIT: The issue returns if I remove the workaround, and reinstall dependencies and rebuild from a clean workspace.

[randellhodges]

@nikolaiessel Thank you for the workaround. It resolved my issues as well.

[Haiqi-Wu]

In my environment, the style was initially fine. One day, it suddenly became problematic, and I thought it was due to my code.

[nirav-raval]

For anyone experiencing this issue:

Go to your config folder and open the sass.json file. It should currently contain something like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}

Replace its contents with:

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
}

Then, as @nikolaiessel suggested, delete package-lock.json and the dist, lib, lib-commonjs, node_modules, release, and temp folders. Finally, run:

heft start --clean
heft build --production && heft package-solution --production

[diabhoil]

@nirav-raval that is sadly not working.

The workaround @nikolaiessel posted above is working. I can confirm that the generated class names for some controls have doubled hashes.