Empty output when using with cssnano

Open
#111 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
tooling

Research direction

Reproduce the two PostCSS command variants using the supplied bug.css and the listed postcss, postcss-nested, and cssnano versions. Compare the combined pipeline with the working piped commands; done means the combined pipeline emits the same minified CSS output instead of empty output.

Written by the indexing model from the issue text.

Description

Something goes wrong when using postcss-nested with cssnano in the postcss pipeline.

> cat no-bug.css
#hello {
  &.world {
    background-color: red;
  }
}
> cat no-bug.css | npx postcss -u postcss-nested --no-map | npx postcss -u cssnano --no-map && echo
#hello.world{background-color:red}
> cat no-bug.css | npx postcss -u postcss-nested -u cssnano --no-map && echo
#hello.world{background-color:red}
> cat bug.css
#hello {
  &.world {
    background-color: red;
    .bug {
      background-color: red;
    }
  }
}
> cat bug.css | npx postcss -u postcss-nested --no-map | npx postcss -u cssnano --no-map && echo
#hello.world,#hello.world .bug{background-color:red}
> cat bug.css | npx postcss -u postcss-nested -u cssnano --no-map && echo

Note the last command produces no output, but the previous command works as expected.

To summarize, if I use raw output from postcss-nested and pass it to cssnano, then it works as expected; if I use both postcss-nested with cssnano in the postcss pipeline, then it produces no output from that buggy file.

"cssnano": "^4.1.10",
"postcss": "^8.2.2",
"postcss-nested": "^5.0.3",

Not sure if it's a bug in postcss-nested, but it has appeared after upgrading from postcss-nested 4.1.2 and postcss 7.0.0 (cssnano version hasn't changed)

Dominant language
JavaScript
Stars
1.2k
Forks
64
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-nested

All issues in postcss/postcss-nested

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.