Unexpected behaviour with ampersand parent selectors inside of mixin

[ajlond123]

There seems to be an issue with using ampersand parent selectors inside of mixins. Please see examples below.

Mixin

@define-mixin themify $theme {
    &.theme-$(theme) {
        @mixin-content;
    }

    .theme-$(theme) & {
        @mixin-content;
    }
}

Input

.test {
    background-color: pink;
    color: blue;
    width: 150px;
    height: 150px;

    @add-mixin themify dark {
        background-color: black;
        color: white;
    };
}

Output

.test {
    background-color: pink;
    color: blue;
    width: 150px;
    height: 150px;

    .theme-dark & {
        background-color: black;
        color: white;
    }
}

.test.theme-dark {
    background-color: black;
    color: white;
}

Expected Output

.test {
    background-color: pink;
    color: blue;
    width: 150px;
    height: 150px;
}

.theme-dark .test {
    background-color: black;
    color: white;
}

.test.theme-dark {
    background-color: black;
    color: white;
}

[ai]

Show me your PostCSS config

[ajlond123]

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-extend'),
        require('postcss-cssnext')({
            browsers: ['last 2 versions', '> 5%'],
            features: {
                customProperties : {
                    warnings: false
                }
            },
            warnForDuplicates: false
        }),
        require('postcss-short-color'),
        require('postcss-pxtorem')({
            propWhiteList: ['font-size', 'letter-spacing', 'line-height'],
            mediaQuery: 0
        }),
        require('lost'),
        require('mdcss')
    ]
};

[ai]

You don’t have postcss-nested plugin to support .theme-dark &. postcss-nesting is postcss-cssnext has different API.

[ajlond123]

Thanks!