Skip to content
This repository has been archived by the owner on Mar 6, 2024. It is now read-only.

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

Open
Nysosis opened this issue Mar 17, 2023 · 0 comments
Open

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

Nysosis opened this issue Mar 17, 2023 · 0 comments
Labels
bug Something isn't working Needs triage New issue that needs some investigation from the maintainers

Comments

@Nysosis
Copy link

Nysosis commented Mar 17, 2023

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 Nysosis added the bug Something isn't working label Mar 17, 2023
@ShaunEvening ShaunEvening added the Needs triage New issue that needs some investigation from the maintainers label Jun 27, 2023
@ShaunEvening ShaunEvening moved this to Needs triage in Styling addon backlog Jun 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working Needs triage New issue that needs some investigation from the maintainers
Projects
Status: Needs triage
Development

No branches or pull requests

2 participants