addon-styling icon indicating copy to clipboard operation
addon-styling copied to clipboard

[Bug] Sass functions provided to sass loader are getting removed

Open Nysosis opened this issue 1 year ago • 0 comments

Describe the bug

When providing custom sass functions to the sass-loader options, they are not ending up being provided to sass-loader after you process the options

Steps to reproduce the behavior

Using the following options:

{
	name: '@storybook/addon-styling',
	options: {
		sass: {
			sassOptions: { 
				functions: {
					'square-root($num, $unit)'(num, unit) {
						const sqrt = Math.sqrt(num.getValue());
				
						return new Sass.types.Number(sqrt, unit.getValue());
					}
				}, 
			},
		},
	},
},

Expected behavior

Expect to be able to use square-root from within my scss files, however it is not available.

Screenshots and/or logs

After some investigation, it appears that the polyfill for object spread that got put into node_modules\@storybook\addon-styling\dist\cjs\preset\scss\webpack.js seems to not be able to handle correctly applying the object properties.

I ammended my local version of this buildSassLoader within this file to look like

var buildSassLoader = function buildSassLoader(_ref3) {
	// .. default content
	const obj = {
		loader: "sass-loader",
		options: _objectSpread(_objectSpread(_objectSpread({
			sourceMap: true
		}, sassOptions), implementationOptions), additionalData)
	};
	require('fs').writeFileSync('./output.txt', JSON.stringify({
		src: Object.getOwnPropertyNames(sass.sassOptions.functions),
		dst: JSON.stringify(obj.options.sassOptions.sassOptions)
	}));
	return obj;
};

Checking the contents of output.txt, I'm given the following:

{
	"src": [
		"square-root($num, $unit)",
	],
	"dst": "{\"functions\":{}}"
}

So it's correctly found the functions property I provided where I called the library, but it ends up with none of the methods on it

Environment

  • OS: [w7]
  • Node.js version: [v12.22.0]
  • Typescript: 3.9.3
  • @storybook/addon-styling: 0.3.1

Additional context

Add any other context about the problem here.

Nysosis avatar Mar 17 '23 16:03 Nysosis