Place custom properties after nesting

[jhpratt]

Straight from its documentation:

This pairs very well with postcss-nested or postcss-nesting, adding support for nested rules. For either, you must put the plugin before postcss-css-variables in the plugin stack so that the & references are expanded first (postcss-css-variables doesn't understand them).

May seem trivial, but it prevents media queries from working inside :root.

[MoOx]

We don't have postcss-css-variables (as this plugin isn't safe). If you find a broken use case, please share the example. Even better if you are brave: make a PR with a failing example, will make it easier to fix :)

[jhpratt]

Whoops, somehow mixed the two up.

Here's a reduced test case:

gulpfile.js

const gulp = require('gulp');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');

gulp.task('default', () => {
    return gulp.src('test.pcss')
        .pipe(postcss([require('postcss-cssnext')]))
        .pipe(concat('test.css'))
        .pipe(gulp.dest('.'));
});

test.pcss

:root {
  --black: #222;

  @media (width < 800px) {
    --black: #000;
  }
}

body {
  color: var(--black);
}

expected output

body {
  color: #222;
}
@media (max-width: 799px) {
  body {
    color: #000;
  }
}

actual output

@media (max-width: 799px) {
  :root {
    --black: #000;
  }
}

body {
  color: #222;
}

and a package.json for good measure

{
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^7.0.0",
    "postcss-cssnext": "^3.0.2"
  }
}

[MoOx]

Don't think that custom props are currently resolving in MQs so making a change won't help until this is resolved #115

[MoOx]

postcss-cssnext has been deprecated in favor of postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/