Less fails to parse valid Custom Property values (ex: @apply polyfill)

[nicholas-brandt]

This code breaks:

paper-drawer-panel {
  --paper-drawer-panel-left-drawer: {
    background-color: red;
  };
}

The curly brackets in the property value break the parser.

I'd like LESS to support the @apply syntax, as used by Polymer.
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins

Also tried:

paper-drawer-panel {
  @ruleset: {
    prop: value;
  };
  --paper-drawer-panel-left-drawer: %(~"%d", @ruleset);
}

It didn't break the parser but delivered:

paper-drawer-panel {
  --paper-drawer-panel-left-drawer: ;
}

which is clearly not a desirable behavior.

[seven-phases-max]

I'm afraid non-CSS syntax support is beyond Less scope. So my -1.

Either way notice you can emit whatever code into the output with escaping. E.g.:

xpaper-drawer-panel {
  --paper-drawer-panel-left-drawer: ~"{background-color: red;}";
}

Or in more hackish multiline way:

paper-drawer-panel {
  -:~";--paper-drawer-panel-left-drawer: {";
    background-color: red;
    color: blue;
  -:~";}";
}

In a more complex situations it's also always possible to use @import (inline).

---

As for attempts like %(~"%d", @ruleset); - No, Less variables are not macros, they are not expanded regardless of context, and specifically for unnamed rulesets the only proper syntax is @ruleset() within a ruleset body and not as a property value.

[nicholas-brandt]

Well I agree with you that non-standard syntax should generally not be supported.

However this means that LESS in incompatible with Polymer in many cases.

Thanks for the reply anyway. 👍

[donny-dont]

Not sure if this makes a difference in your decision @seven-phases-max but there is an open spec for an @apply rule, http://tabatkins.github.io/specs/css-apply-rule/#issue-882293bd.

Also see Polymer/polymer#1373 as it sounds like something Google is going to really push through the process.

And SASS seems to be addressing this sass/sass#1128

[seven-phases-max]

@donny-dont Note I do not decide anything (I did not close the proposal) - I'm only a critic.

Well, Tab Atkins generated tens of CSS standard proposals (named "ideas") and while Google guys may push this into their browser even tomorrow, this is still too far from becoming even CSS draft thing (remember CSS vars not entering CSS world for about ten years?).

[donny-dont]

@seven-phases-max apologies for the implication. I just wanted to make a note that Polymer is pushing the mixin proposal and Chrome is likely to implement it once its shaped up which was something @Jamtis didn't really communicate.

I'm fairly new to using LESS is there any sort of plugin system for the parser in these sorts of scenarios? Something like an experimental flag you can turn on and off?

[seven-phases-max]

I'm reopening this to be able to redirect duplicate requests here.