LESS detects @apply as variable (ISSUE)

[RuslanKim]

I have a CSS code in Polymer3 component:

paper-textarea { --iron-autogrow-textarea: { @apply --app-font-monospace; }; }

When LESS compiles it, this block gets an error paper-textarea { --iron-autogrow-textarea: { ^ Variable @apply is undefined Error in D:\Projects\Teamatical\Website\src\Teamatical.Website\ClientApp\components-admin\fragments\dev-image-url.ts.css (line 13, column 27) Error: paper-textarea { --iron-autogrow-textarea: { ^ Variable @apply is undefined

I'm using Polymer3 and @apply function should be skipped somehow, for an example you could add an option for LESS compiler that @apply should be skipped (for other processors if any). Actually this extension adheres to the CSS @apply rule proposal: http://tabatkins.github.io/specs/css-apply-rule/

Reproduce: put portion of LESS file in to compiler (https://lesscss.org/less-preview/): :host { display: block; max-width: var(--app-page-width); } :host([should-show-tabs]) header { display: none; } paper-textarea { --iron-autogrow-textarea: { @apply --app-font-monospace; }; }

[iChenLei]

This specification has been abandoned, due to being generally a bad idea. The reasoning is explained in this blog post. It is not expected to be revived.

http://tabatkins.github.io/specs/css-apply-rule , I think it's a deprecated css spec draft?

Did you use tailwindcss in your project ?

https://tailwindcss.com/docs/functions-and-directives#apply

[matthew-dean]

Less should theoretically be more forgiving with at-rules and output unknown at-rules as-is.

The problem here is that Less will eagerly try to convert what looks like variables in custom properties into their values. What probably should happen is that Less tries to evaluate the var, and if it doesn't succeed, just fails gracefully and outputs it as-is.

[opike]

Hi - I'd like to take a stab at my first open source contribution. OK if I work on this?

[matthew-dean]

@opike Sure!

[opike]

To clarify is it just with the context of a css variable that the undefined variable should pass through as-is:

paper-textarea {
    --iron-autogrow-textarea: { 
          @apply --app-font-monospace; 
    }; 
}

Or should it happen more generally?