(7.6.6) - SassError: Invalid CSS after "...arginleft: math": expected expression (e.g. 1px, bold), was ".div($toastr-width "

[jrmarqueshd]

Hello everyone!

For those who are having this error and want to solve it quickly:

In your package.json, change the version of the react-redux-toastr library from 7.6.6 to 7.6.5, the result should look something like this:

package.json file

"dependencies": {
...
   - react-redux-toastr: "^7.6.6",
   + react-redux-toastr: "7.6.5",
...
}

Note that, it is also necessary to remove any flags that have the package version together, as this will prevent the library from updating during the npm install and npm run build time.

After that, delete the node_modules folder and/or run an npm install && npm run build.

For those responsible for the library:

Today, I noticed a bug happening inside react-redux-toastr/src/styles/index.scss, I use that file to style my notifications and import it into my styles root file.

I use the node-sass@6.0.1 package and I have a main.scss file where I call all the .scss styles from my application. I do the same for the styles that are inside node_modules/react-redux-toastr/src/styles/index.scss.

When the application runs normally, the problem occurs in the npm run build, where it displays the error:

SassError: Invalid CSS after "...arginleft: math": expected expression (eg 1px, bold), was ".div($toastr- width "
        on line 41 of node_modules/react-redux-toastr/src/styles/index.scss

My versions are:

node: 14.18.1
react: 17.0.2
react-redux-toastr: 7.6.6
node-sass: 6.0.1

I hope I helped in some way!

[apoorvclp]

Please solve this issue and make it backward compatible, blocking our execution.

For temporary solution -:

Go to - node_modules/react-redux-toastr/src/styles/index.scss

Instead of using math.div use division(/) or multiplication() i.e. css/2 or css0.5, such as

"margin-left: -($toastr-width / 2);"

[kkh975]

+1

[diegoddox]

Hi guys, I believe next week there will be time for me to have a look at this issue.

[jimbglenn]

This is a pretty critical error for our apps as well.

[diegoddox]

After looking at it, I can see that this was caused by a fix made for another issue, I made the mistake of changing the minor but it's actually a breaking change since the node-sass was deprecated and sass was added as the new dependencies.

My advice is that if possible upgrade sass or rollback to v7.6.4

[uxtx]

Hi all - I created the commit for bumping the dev-deps to sass instead of the now deprecated node-sass. There were some outstanding issues this was related to (referenced in #269) where the sass division changes were throwing some loud and angry warnings across newer apps.

I agree with @diegoddox doubly, that pinning to an older release is probably a good idea for users still using node-sass. And the change over to the modern sass dependency probably warrants a major version bump. Sorry for any issues!

@diegoddox -if there's any help i can provide on this please let me know!