#2330 The "not" pseudo-selector (:not()) missing from compiled code

[Anonymous]

Originally created by: dennisbaskin

Hello,

I am experiencing a very strange problem that I could not pinpoint wether it's libsass or node-sass. But one thing I know for a fact is the different versions of node-sass where the bug (maybe feature?) was introduced. The difference was between versions 4.7.2 and 4.8.1.

I checked sassmeister and everything compiles correctly there. But when compiling via node I am seeing the following:

Example with v4.8.1

package.js:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "4.8.1"
  }
}

index.js:

const fs = require('fs')
const sass = require('node-sass')

sass.render({
  file: 'test.scss',
}, (error, result) => {
  if(error) return console.log(error)
  fs.writeFile('test-out.css', result.css, (err) => {
    if(!err) console.log(err)
  })
})

test.scss

.btn,
.button {
  &.disabled:not(&-default):not(&-outline),
  &:disabled:not(&-default):not(&-outline) {
    background: #fefefe !important;
    color: #111111 !important;
  }
}

And the following is the output I am getting:

.btn.disabled, .btn:disabled,
.button.disabled,
.button:disabled {
  background: #fefefe !important;
  color: #111111 !important; }

The above is also reproducible with latest master.

When I switch versions to 4.7.2 and below I get the expected output:

Example with v4.7.2

package.json:

  ...
  "devDependencies": {
    "node-sass": "4.7.2"
  }
  ...

output:

.btn.disabled:not(.btn-default,
.button-default, .btn-default,
.button-default):not(.btn-outline,
.button-outline, .btn-outline,
.button-outline), .btn:disabled:not(.btn-default,
.button-default, .btn-default,
.button-default):not(.btn-outline,
.button-outline, .btn-outline,
.button-outline),
.button.disabled:not(.btn-default,
.button-default, .btn-default,
.button-default):not(.btn-outline,
.button-outline, .btn-outline,
.button-outline),
.button:disabled:not(.btn-default,
.button-default, .btn-default,
.button-default):not(.btn-outline,
.button-outline, .btn-outline,
.button-outline) {
  background: #fefefe !important;
  color: #111111 !important; }

---

Check that the version of node-sass you're trying to install supports your version of Node by looking at the release page for that version https://github.com/sass/node-sass/releases

Verified above issue on MacOSX and Debian

Read the common workarounds in the TROUBLESHOOTING.md

The only thing I could gather that might help diagnose where this is occurring is the following:

# with version 4.7.2
$ node -p "require('node-sass').info"
node-sass   4.7.2   (Wrapper)   [JavaScript]
libsass     3.5.0.beta.2    (Sass Compiler) [C/C++]

# with version 4.8.1
$ node -p "require('node-sass').info"
node-sass   4.8.1   (Wrapper)   [JavaScript]
libsass     3.5.0   (Sass Compiler) [C/C++]

So my guess is that this could be libsass?

Search for duplicate or closed issues

I might just be horrible at searching GIT issues, but I was unable to find a matching problem.

Validate that it runs with both Ruby Sass and LibSass

Sassmeister works as expected

Prepare a reduced test case for any bugs

Please see above examples

Read the contributing guidelines

I have recreated and pinpointed the issue to specific versions and verified that it still exists in master.

When encountering a syntax, or compilation issue:

Open an issue on LibSass. You
may link it back here, but any change will be required there, not here

I have a feeling this is a libsass issue, but my examples are using node-sass. If nothing else I hope I can keep this issue for reference and open an issue with libsass if requested to do so.

• NPM version (npm -v): 5.6.0
• Node version (node -v): v8.10.0

• Node Process (node -p process.versions):

  { http_parser: '2.7.0',
  node: '8.10.0',
  v8: '6.2.414.50',
  uv: '1.19.1',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  modules: '57',
  nghttp2: '1.25.0',
  openssl: '1.0.2n',
  icu: '60.1',
  unicode: '10.0',
  cldr: '32.0',
  tz: '2017c' }

• Node Platform (node -p process.platform): darwin

• Node architecture (node -p process.arch): x64

• node-sass version (node -p "require('node-sass').info"):

  node-sass 4.8.1 (Wrapper) [JavaScript]
  libsass 3.5.0 (Sass Compiler) [C/C++]

(working version info mentione at top)

• npm node-sass versions (npm ls node-sass):

  test@1.0.0 /test
  └── node-sass@4.8.1

[Anonymous]

Originally posted by: nschonni

Can you try with 4.8.3, there was a libsass bump to fix some issues

[Anonymous]

Originally posted by: nschonni

I just tried on CodePen (which is supposed to be running 4.8.3) and got

.btn.disabled:not(.btn-default):not(
.button-default):not(.btn-outline):not(
.button-outline), .btn:disabled:not(.btn-default):not(
.button-default):not(.btn-outline):not(
.button-outline),
.button.disabled:not(.btn-default):not(
.button-default):not(.btn-outline):not(
.button-outline),
.button:disabled:not(.btn-default):not(
.button-default):not(.btn-outline):not(
.button-outline) {
  background: #fefefe !important;
  color: #111111 !important;
}

[Anonymous]

Originally posted by: dennisbaskin

Hi Nick,

Thanks for the quick reply. I just tried it with 4.8.3 as well with same results as in 4.8.1

I wonder if libsass changed something, or I am doing something completely wrong (Maybe I should stop writing my sass this way?).

To give you a bit more background, I found the issue through gulp-sass, but was able to recreate it through node-sass. I really don't think this helps any, but thought I'd mention it.

[Anonymous]

Originally posted by: xzyfer

Could you please compare against dart-sass? Sassmeister is very out of date.

npx dart-sass index.scss

Note: if you have npm >= 5 you'll have npx installed already

[Anonymous]

Originally posted by: dennisbaskin

$ npx dart-sass test.scss
npx: installed 1 in 1.124s
.btn.disabled:not(.btn-default,
.button-default):not(.btn-outline,
.button-outline), .btn:disabled:not(.btn-default,
.button-default):not(.btn-outline,
.button-outline),
.button.disabled:not(.btn-default,
.button-default):not(.btn-outline,
.button-outline),
.button:disabled:not(.btn-default,
.button-default):not(.btn-outline,
.button-outline) {
  background: #fefefe !important;
  color: #111111 !important;
}

Seems to be the correct output

I also put up a test repo here just in case: https://github.com/dennisbaskin/node-sass-no-not-example

[Anonymous]

Originally posted by: xzyfer

Thanks for the report, this is certainly a regression in LibSass. I'll create an upstream issue.

It appears, although noisier, the output us semantically identical so this should break any CSS.

[Anonymous]

Originally posted by: dennisbaskin

Thanks @xzyfer 😸

I didn't quite understand what you meant by the last sentence though. Were you comparing dart-sass to expected output, or the broken libsass?

Thanks again for the quick response!

[Anonymous]

Originally posted by: xzyfer

I just wanted to compare the output to an up to date version of Sass to cross check. Dart Sass is easier to install than Ruby Sass.

In this case. The LibSass output is wrong, but not broken. It does the right in so far as

.btn.disabled
:not(.btn-default, .button-default)

is the same as the following as far as the browser is concerned

.btn.disabled
:not(.btn-default, .button-default, .btn-default, .button-default)

The second one just has some duplication. So yes it's a bug, but it shouldn't not break anything as far as the browser is concerned.

[Anonymous]

Originally posted by: dennisbaskin

I see. @xzyfer the bug I am reporting does break the output though, and not just how the code is styled.

It comes out to be:

.btn.disabled, .btn:disabled,
.button.disabled,
.button:disabled {
  background: #fefefe !important;
  color: #111111 !important; }

As you can see it drops the :not()

I added an example here: https://github.com/dennisbaskin/node-sass-no-not-example

[Anonymous]

Originally posted by: xzyfer

Sorry I was looking at the 4.7.2 output. I can see the issue now.

[Anonymous]

Originally posted by: xzyfer

Created an upstream issue in https://github.com/sass/libsass/issues/2630

[Anonymous]

Originally posted by: dennisbaskin

Thank you :)

[Anonymous]

Originally posted by: admosity

Also noticed the output above for :not uses the selector list argument feature of :not which is introduced in css4, but not well supported yet. Maybe some folks running into this issue while using :not?

https://caniuse.com/#feat=css-not-sel-list