Nesting isn't working with postcss-preset-env + postcss-cli

[johngeorgewright]

Hey there,

I'm struggling to get your preset to play nicely with postcss-cli. It doesn't want to do anything about nesting.

I installed your preset with the CLI:

npm i -D postcss-cli postcss-preset-env

Made a config file:

// postcss.config.js
module.exports = {
  map: true,
  plugins: {
    'postcss-preset-env': {}
  }
}

Copied part of your README example into a CSS file:

/* src/css/entry.css */
:root {
  --mainColor: #12345678;
}

a {
  color: rebeccapurple;

  &:hover {
    color: color-mod(var(--mainColor) alpha(80%));
  }
}

Ran the CLI:

postcss src/css/entry.css -o dist/css/app.css

Then when I take a look at the compiled file, the nesting hasn't changed:

/* dist/css/app.css */
:root {
  --mainColor: rgba(18, 52, 86, 0.47059);
}

a {
  color: #639;

  &:hover {
    color: rgba(18, 52, 86, 0.8);
    color: rgba(18, 52, 86, 0.8);
  }
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jc3MvZW50cnkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsdUNBQXVCO0NBQ3hCOztBQUVEO0VBQ0UsWUFBcUI7O0VBRXJCO0lBQ0UsNkJBQThDO0lBQTlDLDZCQUE4QztHQUMvQztDQUNGIiwiZmlsZSI6Im1vbC1hZHZlcnRzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIjpyb290IHtcbiAgLS1tYWluQ29sb3I6ICMxMjM0NTY3ODtcbn1cblxuYSB7XG4gIGNvbG9yOiByZWJlY2NhcHVycGxlO1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiBjb2xvci1tb2QodmFyKC0tbWFpbkNvbG9yKSBhbHBoYSg4MCUpKTtcbiAgfVxufVxuIl19 */

I've tried using the Browserslist config:

// postcss.config.js
module.exports = {
  map: true,
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions'
    }
  }
}

And I've also tried specifying just the nesting plugin:

// postcss.config.js
module.exports = {
  map: true,
  plugins: {
    'postcss-preset-env': {
      stage: false,
      features: [ 'css-nesting' ]
    }
  }
}

... Although the output changes when amending the config, there's no change to the nested output. Am I missing something obvious?

[jonathantneal]

Thanks for reaching out, and I’m sorry you’ve been frustrated. Nesting is a Stage 1 feature, so you would want the stage option set to 1.

Does doing this resolve your issue?

For what it’s worth, I know the default stage is not 1 and that nesting is a highly desirable feature, but it’s up to the CSSWG to progress the standard.

See https://jonathantneal.github.io/css-db/

[jonathantneal]

I see you edited your original comment, but could you throw your project or a reduced test up on GitHub if you are still having an issue?

[johngeorgewright]

Thanks for the help! Setting the staging to 1 is just what I needed. Thanks again.

[ChuksFestus]

how did you fix this... infact how do you setup? I'm new to postcss and postcss-preset-env and i've having issues making it work

heres my postcss.config.js

  plugins: [
    // require('postcss-import')({ ...options }),
  	require("postcss-preset-env")({
  		stage: 1,
  		features: {
    'nesting-rules': true
  }
  	})
    // require('postcss-url')({ url: 'copy', useHash: true })
  ]
}

what am i missing please

[christianmartinnies]

postcss.config.js:

module.exports = {
plugins: [
require("postcss-preset-env")({
/**
* Stage
* This is similar to ECMAScript proposals used in Babel.
* The stages represent the steps that each feature (or proposal)
* in CSS must go through to become a part of the CSS standard.
* It consists of the following stages:
*
* Stage 0: Aspirational - an idea or an early draft. Highly unstable and subject to change
* Stage 1: Experimental - also highly unstable and subject to change, but the proposal is recognized by the members of W3C.
* Stage 2: Allowable - also highly unstable and subject to change, but it’s actively being worked on.
* Stage 3: Embraced - stable and subject to little change. This feature will likely become a standard.
* Stage 4: Standardized - final working solution. supported by all major browsers.
* By setting a stage option, we are choosing groups of CSS features that we can be used when writing CSS:
*/
stage: 0,
}),
],
};

running "postcss src.css > target.css"

is what works on my side—after hours of investigating i realized, that staging is the exact opposite of my expectations. So my expectations were wrong. Not enough coffee… ;)

Hope, that helps?