webpack-contrib / sass-loader

Compiles Sass to CSS
MIT License
3.91k stars 431 forks source link

Errors on `@supports` syntax #1216

Closed wolfy1339 closed 4 months ago

wolfy1339 commented 4 months ago

Bug report

Actual Behavior

I'm trying to compile a Sass file that uses the @supports syntax

The culprit is from the @prime/view-components package which is required by @primer/css

@supports not selector(:popover-open) {
    [popover]:not(.\:popover-open) {
        display: none
    }
}

Error message:

ERROR in ./src/style.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Invalid CSS after "@supports not": expected "{", was "selector(:popover-o"
        on line 21 of node_modules/@primer/view-components/app/components/primer/alpha/dialog.css
        from line 1 of node_modules/@primer/css/overlay/overlay.scss
        from line 2 of node_modules/@primer/css/overlay/index.scss
        from line 26 of node_modules/@primer/css/core/index.scss
        from line 18 of node_modules/@primer/css/index.scss
        from line 1 of src/style.scss
>> @supports not selector(:popover-open) {

   ----------^

 @ ./src/main.js 3:0-22

webpack 5.93.0 compiled with 1 error and 1 warning in 9903 ms

Expected Behavior

The plugin should accept the @supports syntax

How Do We Reproduce?

I'm seeing this issue in https://github.com/probot/smee.io/tree/update-deps

The problematic file is https://github.com/primer/view_components/blob/main/app/components/primer/alpha/dialog.pcss#L24

Please paste the results of npx webpack-cli info here, and mention other relevant information

$ npx webpack-cli info

  System:
    OS: Linux 6.9 Fedora Linux 40 (KDE Plasma)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 9.52 GB / 30.99 GB
  Binaries:
    Node: 20.12.2 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm
  Browsers:
    Chrome: 126.0.6478.182
  Packages:
    babel-loader: ^9.0.0 => 9.1.3 
    copy-webpack-plugin: ^12.0.0 => 12.0.2 
    css-loader: ^7.0.0 => 7.1.2 
    html-webpack-plugin: ^5.6.0 => 5.6.0 
    postcss-loader: ^8.0.0 => 8.1.1 
    sass-loader: ^14.0.0 => 14.2.1 
    style-loader: ^4.0.0 => 4.0.0 
    webpack: ^5.0.0 => 5.93.0 
    webpack-cli: ^5.0.0 => 5.1.4 
wolfy1339 commented 4 months ago

This issue seems to be with node-sass