itwinui-css causes sass compile fails in react-app when using latest "sass" instead of node-sass

MichaelBelousov commented 2 years ago

Environment

Package version(s): 0.33.1
Operating System: Windows 10
Browser name and version: N/A

Minimal Viable Reproduction

clone and try compiling this: https://github.com/MichaelBelousov/itwinui-css-compile-fail-mvr sorry for not using a sandbox, at first I thought it wouldn't work. It might, but I think this is ok as well as an MVR, let me know if not

Steps to reproduce

install the latest "sass" instead of "node-sass"
use the latest itwinui-css in the app

Actual behavior

Build does the following:

using @itwin/itwinui-css@0.33.1 with sass@1.42.1 (instead of node-sass!)

Failed to compile.

./src/frontend/components/Header.module.scss (../common/temp/node_modules/@bentley/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!../common/temp/node_modules/postcss-loader/src??postcss!../common/temp/node_modules/@bentley/react-scripts/node_modules/fast-sass-loader/lib??ref--6-oneOf-6-3!./src/frontend/components/Header.module.scss)
Error: Top-level selectors may not contain the parent selector "&".
     ╷
5460 │   &.iui-notification-#{$status} {
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
  src\frontend\components\Header.module.scss 5460:3  root stylesheet

seems to be related to this issue: https://github.com/sass/sass/issues/1873

Expected behavior

for itwinui-css to succeed at compiling

mayank99 commented 2 years ago

Hi, thanks for the report. We just released 0.35.0 which should fix this. Can you give it a try?

MichaelBelousov commented 2 years ago

works in the mvr, but our large application also depends on @itwin/itwinui-react which has a dependency on @itwin/itwinui-css@^0.33.1 which is not semver compatible with the new 0.35.0 version due to how semver treats the 0 major version. Can @itwin/itwinui-react also be bumped with a new version that has a semver range that will pick up the new @itwin/itwinui-css@0.35.0?

The reason we nee that is because our application had a bug when our dependencies were dragging in two different versions of itwinui-css (one we were directly depending on, and the transitive dependency from itwinui-react), so I updated to the newest version so the itwinui-css dep would be hoisted and we wouldn't get duplicate incompatible CSS causing bugs. But the latest version had the bug I reported here.

It's a bit of a mouthful, but can we get itwinui-react updated to consume this change as well?

by the way, thanks for the super fast turn around time @mayank99!

EDIT: should I open a new issue for this? I can't reopen this one

mayank99 commented 2 years ago

It's a bit of a mouthful, but can we get itwinui-react updated to consume this change as well?

iTwinUI-react will be updated to the latest css in its own cycle. It is released usually once a week so you can just wait for that

iTwin / iTwinUI