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.
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:
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.jsseems to not be able to handle correctly applying the object properties.I ammended my local version of this
buildSassLoaderwithin this file to look likeChecking the contents of
output.txt, I'm given the following:{ "src": [ "square-root($num, $unit)", ], "dst": "{\"functions\":{}}" }So it's correctly found the
functionsproperty I provided where I called the library, but it ends up with none of the methods on itEnvironment
Additional context
Add any other context about the problem here.