Problems with nested CSS in .css file imported from Scss

[t-kinoshita]

Recently CSS has native nesting, and in importing CSS with combinations of multiple nesting and @media from Scss I found a problem.

(it might be labelled as wontfix, as Sass @import is going to be deprecated...)

Reproduction

// test.scss
@import './test2';

/* test2.css */
.foo{
  .bar{
    @media screen{
      color: red;
    }
  }
}

$ npx sass test.scss

Expected result

@media screen{
  .foo .bar{
    color: red;
  }
}

Actual result

@media screen {
  .bar {
    color: red;
  }
}

Environment

$ uname -a
Linux DESKTOP-BR1RAQF 5.15.153.1-microsoft-standard-WSL2 #1 SMP Fri Mar 29 23:14:13 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

$ node -v
v12.22.9 # very old; but in newer Node this problem reproduced too

$ npm --version
8.5.1

$ npx sass --version
1.77.8

[pamelalozano16]

I tried reproducing the error and it compiled to the expected result:

$ npx sass test.scss
/* test2.css */
@media screen {
  .foo .bar {
    color: red;
  }
}

Environment:

$ npx sass --version
1.78.0 compiled with dart2js 3.5.2
$ node -v
v18.20.0
$ npm -v
8.19.4

Please update to the latest versions of Sass, Node.js, and npm, and let us know if the issue persists.