-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
LESS detects @apply as variable (ISSUE) #3675
Comments
http://tabatkins.github.io/specs/css-apply-rule , I think it's a deprecated css spec draft? Did you use |
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. |
Hi - I'd like to take a stab at my first open source contribution. OK if I work on this? |
@opike Sure! |
To clarify is it just with the context of a css variable that the undefined variable should pass through as-is:
Or should it happen more generally? |
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; }; }
The text was updated successfully, but these errors were encountered: