Not working with nested media queries

[spacedawwwg]

Using postcss-extend-rule and postcss-nesting together but coming across an issue where @extend definitions nested media queries are being stripped.

.foo {
    color: red
}

.bar {
    color: blue;

    @media (min-width: 768px) {
        @extend .red;
    }
}

I would expect

.foo {
    color: red
}

.bar {
    color: blue;
}

@media (min-width: 768px) {
    .bar {
        color: red;
    }
}

[edward-simpson]

I am also experiencing this issue:

%font--gillsans-medium {
    font-family: 'GillSansMTStd-Medium', sans-serif;
}

.navigation {
    &__link {
        @postcss-extend %font--mrseaves-roman;

        @media (--from-tablet) {
            @postcss-extend %font--gillsans-medium;
            // Other CSS rules here
        }
    }
}

The override font extension is being stripped out from inside the media query, however all the other CSS rules, including mixins, are working correctly

[jonathantneal]

Yes, I noticed this bug, and I don’t like it either. I think the plugin should be re-written to accept the context of the rule being extended.

[aacoelho]

I'm having the same problem, did anyone find a way to overcome this?

[edward-simpson]

Only way I found was to stop using postcss-extend (moved my font declarations into mixins)

[nisancigokmen]

Thank you, I would also like to voluntarily participate in the organization and provide assistance :) have a good work.

[42tte]

Works on my machine™ I have postcss-extend-rule come before postcss-nested & postcss-custom-media