Issues with hsl function in webpack

[HaveSpacesuit]

After installing @itwin/itwinui-react 1.36.0 (which is using @itwin/itwinui-css 0.54.1), I get a build error related to these lines in the style/theme.scss file:

$iui-color-background-border--light-hc: hsl(0 0% 0% / 0.3);

$iui-color-background-border--dark-hc: hsl(0 0% 100% / 0.34);

The error I get:

viewStatus.scss has the following statement:

@import '~@itwin/itwinui-css/scss/index';

We build with webpack, and use style-loader 0.23.1, css-loader 3.6.0, and sass-loader 7.1.0. I've tried updating the sass-loader to version 10, which is the highest version which will support our version of webpack, but it is the same issue with a different wrapper:

I can tweak the file on local runs to use the hsla function such as hsla(0, 0%, 0%, .3) and remove problems.

[mayank99]

Thanks for creating this discussion.

viewStatus.scss has the following statement:

@import '~@itwin/itwinui-css/scss/index';

Is there any reason you are importing our scss rather than the compiled css we provide?

[HaveSpacesuit]

In that file, we are using it for a mixin like @include iui-text(small). Is there a better way to do that?

[mayank99]

Firstly, I would suggest trying to use our <Text> or <Small> react components as they are considered stable (1.0+) because itwinui-css is 0.X and we might make breaking changes.

But if you really need to use that mixin, then I think importing from @itwin/itwinui-css/scss/text/mixins should fix the error.

[HaveSpacesuit]

Thanks Mayank! Changing the import location did not help, but using the <Text> component worked great.