less / less/less.js

LESS detects @apply as variable (ISSUE)

Open
#3,675 5 comments 0 reactions 1 assignee View on GitHub

@opike is already working on this.

Since May 11, 2023.

bug feature request good first issue up-for-grabs
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

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; }; }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.