Media queries inside mixin does not work with nesting

[AgentCosmic]

For example:

@define-mixin mine {
  @media (min-width: 300px) {
    color: red;
  }
}
.title {
  @mixin mine;
}

Will become:

.title {
  @media (min-width: 300px) {
    color: red;
  }
}

Instead of:

@media (min-width: 300px) {
  .title {
    color: red;
  }
}

I've tried this with postcss-nesting, postcss-nested, and postcss-present-env. Both produced the same results. However everything works fine with version 6. Just not with version 7.

[ai]

This is a problem of postcss-nested.

[Dozorengel]

I confirm this, I use tailwind and it completely ruins nested css with tailwind directives like @screen, it just cannot parse it properly. Downgraded to 5.0.3.

[oles]

I too can confirm this

.header {
    @custom-plugin {
        font-size: 200px;
    }

    font-weight: 900;
    letter-spacing: -2px;

    @media (--small-viewport) {
        @custom-plugin {
            font-size: 120px;
        }
    }
}

became

.header {
    @custom-plugin {
        font-size: 200px;
    }

    font-weight: 900;
    letter-spacing: -2px;
}

@media (max-width: 1439px) {
    @custom-plugin {
        .header {
            font-size: 120px;
        }
    }
}

on 5.0.5 rather than the expected

.header {
    @custom-plugin {
        font-size: 200px;
    }

    font-weight: 900;
    letter-spacing: -2px;
}    

@media (max-width: 1439px) {
    .header {
        @custom-plugin {
            font-size: 100px;
        }
    }
}

Tried to downgrade to 5.0.3 and then it worked as expected :tada:

[wederribas]

I'm facing the same issue. Here's my use case:

@define-mixin container $size {
  max-width: $size;
  margin-left: auto;
  margin-right: auto;
}

/* usage */
.my-custom-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;

  @media (min-width: $tablet-breakpoint) {
    @mixin container 1400px;
  }
}

becomes:

.my-custom-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 970px) {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

[SuruRane]

I am too facing this issue. @define-mixin content-breakpoint { @nest .-content-breakpoint-768 & { @media (--media-tablet) { @mixin-content; } } @nest .-content-breakpoint-800 & { @media (--media-md) { @mixin-content; } } @nest .-content-breakpoint-960 & { @media (--media-lg) { @mixin-content; } } @nest .-content-breakpoint-1024 & { @media (--media-desktop) { @mixin-content; } } }

`.filter-sidebar {

@mixin content-breakpoint {
    flex-basis: 216px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 16px;
    width: 216px;
}

@nest .-content-breakpoint-768 & {
    flex-basis: auto;
    margin-right: 0;
    width: 100%;

    @media (--media-lg) {
        flex-basis: 216px;
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 16px;
        width: 216px;   
    }

    & + .hm-container:not(.-no-sidebar)  {

        @media (--media-md) {
            width: calc(100% - 300px - 1rem);
            flex-basis: calc(100% - 300px - 1rem);
        }

        @media (--media-lg) {
            width: auto;
            flex-basis: auto;
        }
    }
}

}`

becomes .filter-sidebar{@nest .-content-breakpoint-768 &{@media (min-width:48em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-800 &{@media (min-width:50em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-960 &{@media (min-width:60em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-1024 &{@media (min-width:64em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}}

[maranomynet]

I believe this is fixed in the current version. I'm not running tailwind myself, but testing the input examples from @oles and @wederribas produces a seemingly sensible output (without any TailWind interpolation, though).