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
Bug report
Actual Behavior
I'm trying to compile a Sass file that uses the
@supports
syntaxThe culprit is from the
@prime/view-components
package which is required by@primer/css
Error message:
Expected Behavior
The plugin should accept the
@supports
syntaxHow 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