Only the first @apply gets the styles

[enjikaka]

:root {
  --gridify-media-information: {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    transform: translateY(40vw);
  }
}

.type--video .media-information {
   @apply --gridify-media-information;
}

@media (orientation: portrait) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1/1) {
   .type--album .media-information {
      @apply --gridify-media-information;
   }
}

produces;

.type--video .media-information {
   position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    transform: translateY(40vw);
  }
}

@media (orientation: portrait) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1/1) {
.type--album .media-information {}
}

[pascalduez]

Hi @enjikaka,

what version of postcss-apply are you using?
The latest 0.8.0 fixes some issues with nested declarations.

No warning in console/shell?
postcss-reporter is nice to have in your pipeline.

[enjikaka]

@pascalduez Using cssnext, it seems to be at 0.3.0 :(

Didn't get any warnings or errors no. Just an empty block.

[pascalduez]

It's most likely that postcss-apply will be removed from cssnext, so I doubt it will be upgraded.

You can just override it: npm i postcss-apply@latest -D.

[pascalduez]

@enjikaka You might be interested to know that custom property sets and the @apply rule are not in good shape, at the spec level: https://github.com/pascalduez/postcss-apply#web-platform-status

[jarodtaylor]

You might be interested to know that custom property sets and the @apply rule are not in good shape, at the spec level: https://github.com/pascalduez/postcss-apply#web-platform-status

That makes me sad, @pascalduez :(

It's so useful.

[ZeroCho]

@pascalduez I'm sad, too 😢 Is there any replacement for this among postcss plugins? postcss-loader@2 already does not support @apply feature... Or maybe any features that support mixins for cssnext?

[pascalduez]

@ZeroCho I don't think there's a new spec reproducing the "mixin" kind of behaviour, the promoted one is now tight to custom elements and the shadow DOM... Crawl those links in the Readme, there's a ton of infos.

There's a postcss-mixin plugin, which replicates Sass like mixins.

[ZeroCho]

@pascalduez Thank you! Actually I already read all those links you provided, I felt that shadow DOM and ::part things were weird, so that's why I asked you about the things between @apply and shadow DOM.

I'll try postcss-mixin! Thank you again! 😄