Cannot extend from nested placeholder

[henryruhs]

Hello,

I have a set of %rs-icon-xxx placeholders generated via grunt-webfont that need to be extended within nesting. It fails with postcss-nesting and postcss-nested. There were a couple of related issues on multiple sub-projects of PostCSS but it was never solved.

Placeholder:

%rs-icon-chevron-right
{
    content: '\3009';
    font-family: var(--rs-font-icon);
}

Nesting:

.rs-list-breadcrumb
{
    & .rs-item-divider
    {
        &:before
        {
            @extend %rs-icon-chevron-right;
        }
    }
}

Generated output:

&:before
{
    content: '\3009';
    font-family: 'icon default';
}

Wanted output:

.rs-list-breadcrumb .rs-item-divider:before
{
    content: '\3009';
    font-family: 'icon default';
}

Config:

require('postcss-custom-properties'),
require('postcss-custom-media'),
require('postcss-custom-selectors'),
require('postcss-extend'),
require('postcss-nesting'),
require('postcss-color-gray'),
require('postcss-color-function'),
require('autoprefixer')(
{
    browsers: 'last 2 versions',
    cascade: false
})

Thank you

[ai]

Could you try put postcss-extend after postcss-nested. Also I highly recommend to use PreCSS, because it has predefined plugins list with right order (on PostCSS website and README.md we promote only it)

[henryruhs]

The ordering fixed the issue, maybe it was too late yesterday - fixed it today within minutes... :-)

require('postcss-nesting'),
require('postcss-extend'),