SASS compiliation errors in latest version

[sam98brown]

Hi

Upgrading to version 3 of the NPM package is causing issues in our project. I'm getting these SASS errors:

   ERROR in ./src/sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Function hsl is missing argument $saturation.
            on line 7 of /Users/sambrown/Local Sites/obpmulti/app/public/wp-content/themes/ob/src/sass/main.scss
    >>   background: hsl(0 0% 20% / 100%);

Downgrading to v2.2.2 fixes it - it looks like those rules used to use hsla() instead of hsl(). Changing the rules to hsla() does fix it.

Any idea what's going wrong here?

[hadl]

Must be a Sass issue.

I am using V1.50.1 (dart-sass) and everything works fine

[sam98brown]

Guessing it's an issue with using node-sass rather than dart-sass

[ConduciveMammal]

@sam98brown this is indeed a Sass issue. You can workaround it by using interpolation for those values.

So instead of hsl(0 0% 20% / 100%), use: #{'hsl(0 0% 20% / 100%)'}

[andrewhawkes]

Having this issue with Node-SASS. Just having to make my own version of the file as I can't see a workaround.

[ConduciveMammal]

@andrewhawkes see my comment above, that has a workaround using Interpolation.

[desandro]

Thanks for reporting this issue. I'm going to revert the legacy format for hsl and hsla colors to resolve this issue.

[everyonesbuddy]

@sam98brown this is indeed a Sass issue. You can workaround it by using interpolation for those values.

So instead of hsl(0 0% 20% / 100%), use: #{'hsl(0 0% 20% / 100%)'}

This fixed the issue for me