Webpack 5 with sass (dart scss) gives warningns

[alon24]

I moved to webpack 5, sass (dart sass v 1.32.8) and getting these errors:

DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-20: null` at the root of the
stylesheet.
     ╷
5862 │   $yellow-20: #fdd13a !default !global;
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/client/styles/main.scss 5862:3  carbon--colors()
    src/client/styles/main.scss 6034:1  root stylesheet
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-30: null` at the root of the
stylesheet.
     ╷
5863 │   $yellow-30: #f1c21b !default !global;
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/client/styles/main.scss 5863:3  carbon--colors()
    src/client/styles/main.scss 6034:1  root stylesheet
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-40: null` at the root of the
stylesheet.

[emyarod]

thanks for reporting this, it seems the syntax is invalid with Dart Sass 2.x now. can you provide some more details on where you are seeing these warnings for easier testing and debugging or create a reduced test case in Code Sandbox?

[tay1orjones]

It's worth noting that Dart Sass 2.x isn't available, and it doesn't look like there's even a roadmap for it. In a recent comment from a maintainer they sound to be actively avoiding bumping to a new major. Latest is v1.32.8 right now.

We can/should update the syntax here but for now this is just a warning. If the --quiet-upstream flag becomes available it could be used to suppress this warning message.

[joshblack]

As we start suggesting that people migrate over to Dart Sass, I think the resolution on our end will be to update the output of @carbon/colors SCSS files to match this new practice (we did a similar push over in carbon-components like this)

[emyarod]

@joshblack are you referring to #8228?

[joshblack]

@emyarod definitely related, I think that one will get Storybook updated to use Dart Sass and we'll start seeing the warnings potentially from this issue as a result.

[emyarod]

what are the actionable items for this issue? I was under the impression that #7546 was part of the necessary updates to remove these warnings

[joshblack]

The updates to color in #7546 are unfortunately a breaking change 😞 (no more mixins). It will definitely be the preferred way going forward though and simplify this package a ton (just a flat file versus having to worry about mixins).

For this issue, I believe the change would be to update the colors build step to address the error that has been flagged (!global cannot assign to variables that have not been initialized). I think we could follow the suggestion from the warning and add the $<color>-<grade>: null; statements in the scss/mixins.scss file to address the issue.

[emyarod]

add the $<color>-<grade>: null; statements in the scss/mixins.scss file to address the issue.

unless I am misunderstanding, I believe this causes issues with custom color tokens in the components package

carbon-components:   formatted: 'Error: $color1: null is not a color.\n' +
carbon-components:     '   ╷\n' +
carbon-components:     '90 │     fallback: mix($carbon__yellow-30, $carbon__white-0, 15%),\n' +
carbon-components:     '   │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
carbon-components:     '   ╵\n' +
carbon-components:     '  scss/components/notification/_tokens.scss 90:15              @import\n' +
carbon-components:     '  scss/components/notification/_inline-notification.scss 19:9  root stylesheet',
carbon-components:   line: 90,
carbon-components:   column: 15,

would it be better if we assigned the same color values as the mixin rather than null?

[joshblack]

@emyarod oh totally, I think that would definitely work. It definitely seems redundant with the mixin which is why in the Sass module version (index.scss) that's totally what it does now lol.

[huineng]

there's a new one coming up in sass 1.33.0

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($step - 2, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

[joshblack]

Thanks for the heads up! Tracking over in: #8746