Nested mixins

[JosefJezek]

Could you add support for nested mixins?

--paper-font-common-base: {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
};

--paper-font-common-nowrap: {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
};

--paper-font-title: {
  @apply --paper-font-common-base;
  @apply --paper-font-common-nowrap;

  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
};

.Skeleton-drawerTitle {
  @apply --paper-font-title;
}

Bad output

.Skeleton-drawerTitle {
  @apply --paper-font-common-base;
  @apply --paper-font-common-nowrap;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

[pascalduez]

Hi,

while this looks a useful idea at a first glance, I'm not sure it would be part of the "spec", hard to predict at that point. But we could ask.

Nonetheless the scope of this plugin is clearly to follow the "spec" as much as possible.

If you need Sass like mixins behaviour, then there's other plugins for it.

[JosefJezek]

I need use mixins from Polymer elements. Could you create fork postcss-polymer-apply with this feature?

[pascalduez]

Let's ask directly.

Hi @tabatkins, do you think it could be part of the future spec to be able to use the @apply rule in custom properties sets declaration ? Aka nesting or composition.

Thanks in advance.

[wprater]

the polymer iron flexbox component seems to do this. so it's probably part of "spec" ;)

[tabatkins]

The @apply rule is treated identically to var() inside of a custom property value. So yeah, nesting should work.

[JosefJezek]

@tabatkins Thank you :+1:

[pascalduez]

@tabatkins Thanks!

So I'll implement this behavior in the current plugin.

[JosefJezek]

@pascalduez Please implement this behavior...

[pascalduez]

@JosefJezek Actually, this is already possible. I just added a couple of tests

Bear in mind your custom properties sets have to be declared in a :root rule-set, which is not the case in your example.