libsass icon indicating copy to clipboard operation
libsass copied to clipboard

Incorrect handling of `not` in media query

Open YodasWs opened this issue 6 years ago • 4 comments

Not noticing at first a finer point about the not operator in a media query, I attempted the following:

input.scss

input {
  @media not (pointer: fine) {
    background: red;
  }
}

Actual results

libsass 3.5.0.beta.2

@media (pointer: fine) {
  input {
    background: red;
  }
}

:warning: Notice that libsass has removed the not operator! This is the exact opposite of what I wanted.

Expected result

From MDN:

If you use the not operator, you must specify an explicit media type.

So the correct media query is in fact this:

@media not screen and (pointer: fine) {

:information_source: I don't expect Sass or libsass to output the above, just an error would suffice.

version info:

$ node-sass --version
node-sass       4.5.3   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

YodasWs avatar Mar 09 '18 15:03 YodasWs

Duplicate of #2425

nschonni avatar Mar 09 '18 15:03 nschonni

Sorry, just rleated, I was mixing it up with one I saw in dart-sass recently

nschonni avatar Mar 09 '18 15:03 nschonni

Sass will not add media type for you. Without a type the CSS is invalid and result in a parser error. See dart-sass

Error: expected "{".
  @media not (pointer: fine) {
             ^
  test.scss 2:14  root stylesheet

xzyfer avatar Mar 28 '18 11:03 xzyfer

@xzyfer,

Yes, I would expect libsass to give an error on this.

I had originally filed a defect on sass and was told to report it here. node-sass with libsass does not throw an error but outputs the wrong CSS.

YodasWs avatar Mar 30 '18 18:03 YodasWs