Selectors get destroyed by space removal

[timlg07]

If I use a selector like this:

.a:not(.b .a) {
  ...
}

The produced output is missing an important space:

.a:not(.b.a) {
  ...
}

This destroys the Descendant combinator used here. It now no longer matches an .a element that is not in .b, but only elements that do not have both classes .b and .a.

I tried escaping the space using .b \ .a which produced .b\ .a - which kept the space but adds a backslash.

Versions:

• sass 1.52.2
• gulp 4.0.2
• gulp-sass 5.1.0
• node 12.22.12

[voltaek]

I had initially suspected this was due to lack of Selectors Level 4 support for :not()'s new ability to support selector lists instead of just simple selectors, but after testing over on sassmeister.com your demo code appears to compile just fine, correctly maintaining the descendant combinator space. I would look elsewhere in your build pipeline for issues. Perhaps you're running a minifier that lacks Selectors Level 4 support for :not(), and thus strips out the space?

[timlg07]

Thanks for the response!
My first assumption was as well that it has to be the minifier. But I removed it, along with all other non necessary things, from the pipeline. The short version of the pipeline looks like this:

gulp.task("scss", function (done) {
    return gulp
        .src(themeBase + "/src/scss/main.scss")
        .pipe(bulkSass())
        .pipe(
            sass({
                includePaths: ['node_modules'],
                importer: jsonImporter(),
            })
        )
        .pipe(rename("all.css"))
        .pipe(gulp.dest(themeBase + "/css"))
        .pipe(browserSync.stream())
        .on("end", done)
})

and still produces the wrong output.

I will try to create a minimal working example showing the issue (if possible).

[Goodwine]

Do you experience this if you downgrade to dart-sass 1.52.1?

[timlg07]

@Goodwine yes, it's the same in 1.52.1. I think I was on that version initially but then upgraded to the latest one to see if the issue is still there.

I also tried node-sass which produces the same result.

For a public example, I quickly made a new branch of my gulp-boilerplate: https://github.com/timlg07/fullstack-gulp-boilerplate/tree/scss-not-selector

[nex3]

Since this doesn't reproduce with standalone Sass, it's presumably being caused by a tool elsewhere in your stack.