Invalid CSS when using postcss-extend with postcss-nested, regardless of load order.

[Blindmikey]

Test postcss:

%testext { color: blue; }

.testrule
{
    &_subrule { @extend %testext; }
}

resulting css

&_subrule { color: blue; }

expected css

.testrule_subrule { color: blue; }

[Blindmikey]

A potential fix is to include the postcss-nested before postcss-extend. It also seems the warning about this in the documentation may no longer be needed: https://github.com/postcss/postcss-nested/issues/11

[Blindmikey]

This doesn't seem to completely fix the issue, as I still see this behavior: Test postcss:

%testext
{
    strong { color: blue; }
}

.testrule
{
    &_subrule { @extend %testext; }
}

resulting css

.testrule_subrule { strong{ color: blue; } }

expected css

.testrule_subrule strong { color: blue; }

Going back to loading postcss-extend before postcss-nested produces:

&_subrule{ strong{ color: blue; } }

[Blindmikey]

npm dependencies I'm using:

"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-dest": "^0.2.3",
"gulp-postcss": "^6.2.0",
"gulp-sourcemaps": "^1.6.0",
"postcss-extend": "^1.0.5",
"postcss-nesting": "^2.3.1",

[donnyburnside]

Sorry for the late addition but how did you get on with this @Blindmikey? I spotted you're including 'postcss-nesting' in your last reply. That could be a solution to your problem.

Anyway, i've just ran into this issue and managed to get both of your examples to compile with the following code (edit: i've cleaned it up slightly);

PostCSS

%testext1 { color: blue; }
%testext2 {
  strong { color: red; }
}

.test-extend {
  &-subrule-1 { @extend %testext1; }
  &-subrule-2 { @extend %testext2; }
}

Expected CSS

.test-extend-subrule-1 { color: blue; }
.test-extend-subrule-2 strong { color: red; }

Resulting CSS

.test-extend-subrule-1 { color: blue; }
.test-extend-subrule-2 strong { color: red; }

Plugin order

require('postcss-import'),
require('postcss-mixins'),
require('postcss-advanced-variables'),
require('postcss-nested'),
require('postcss-extend'),
require('autoprefixer')

Edit: Updated code to show both examples working.

[Blindmikey]

Ran into this issue again using postcss-cssnext, opted to load my own postcss plugins directly instead and this issue was resolved.