Enable defining custom properties under selectors other than :root

[kimamula]

Currently, custom properties can be defined only under the :root selector.

https://github.com/pascalduez/postcss-apply/blob/2510e6b719799daf3f4daae6d40b10c6cbb8037c/src/visitor.js#L93-L105

However, I think defining custom properties under selectors other than :root should be possible according to the spec.

http://tabatkins.github.io/specs/css-apply-rule/

[pascalduez]

Hi @kimamula,

the Readme says:

Refers to postcss-custom-properties for DOMless limitations.

This is a wanted limitation, since that without a DOM, it's not possible to achieve this behaviour (scope, cascade, inheritance).

[kimamula]

Well, at least, the following can be achieved without any information of DOM.

.foo {
  --some-properties: {
    width: 100%;
  }
  .bar {
    @apply --some-properties;
  }
}

The similar behavior has been already implemented in postcss-css-variables.

[pascalduez]

Then what's the difference with?

:root {
  --some-properties: {
    width: 100%;
  }
}

.foo {
  .bar {
    @apply --some-properties;
  }
}

It would be missleading to allow such behaviour, not to mention the preserve option. There was already heated discussions between postcss-custom-properties and postcss-css-variables on this topic. So not going to reproduce that here. postcss-apply is aimed at following postcss-custom-properties.

Also you might already know that the @apply specification will probably be abandoned.

[kimamula]

Fair enough, thanks.