addon-styling
addon-styling copied to clipboard
[Bug] Sass functions provided to sass loader are getting removed
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.