Bug 369277 - LessCSS syntax problem
Summary: LessCSS syntax problem
Status: RESOLVED FIXED
Alias: None
Product: frameworks-syntax-highlighting
Classification: Frameworks and Libraries
Component: syntax (show other bugs)
Version: unspecified
Platform: Compiled Sources Linux
: NOR normal
Target Milestone: ---
Assignee: KWrite Developers
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-09-24 10:06 UTC by Jaime Torres
Modified: 2017-08-19 14:03 UTC (History)
3 users (show)

See Also:
Latest Commit: https://commits.kde.org/syntax-highlighting/ca846fbda3185f1c13cb0e423631033d64c2ff7b
Version Fixed In:

Attachments
Add an attachment

Note You need to log in before you can comment on or make changes to this bug.
Description Jaime Torres 2016-09-24 10:06:13 UTC 
this simple css is not well parsed with the LESSCSS syntax after @screen-sm-min. It is well parsed with CSS or CleanCSS (for example).

.nav-justified {
  width: 100%;

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
    }
  }
}

Reproducible: Always

Steps to Reproduce:
create a new blank document, paste the css code and select the syntax.

Actual Results:  
@screen-sm-min) {
    > li {
      display: table-cell;
    }
  }
}
is underlined and in red
Comment 1 H.H. 2016-12-12 17:36:15 UTC 
I can confirm this. I have some expression like

@media (max-width: @width2) {
  height:auto;
  ..
}

and after the variable @width2 the syntax highlighting is broken.
Comment 2 Dominik Haumann 2017-02-12 19:20:08 UTC 
Many changes went into CSS and SCSS just today, see: https://git.reviewboard.kde.org/r/128925/

LESSCSS was once copied from CSS. So many of the changes should probably also be applied to less.xml.

Can one of you here do this? We would happily accept a patch.
Comment 3 H.H. 2017-02-12 20:41:20 UTC 
Sorry, but this bug is something less-specific, so I think it will not be fix by applying the changes from css. And I have to admit, that I looked once on the xml files, and did not catch it.
Comment 4 Thomas Holzeisen 2017-05-09 15:40:15 UTC 
Stumbled upon this as well. Media queries containing variables are getting highlighted as errors. Regular media queries containing just numbers do work fine.

Since there are no variables in regular CSS, this issue is LESS specific.
Comment 5 Grzegorz Szymaszek 2017-05-09 15:50:20 UTC 
@Thomas Holzeisen, I’m working on adapting current SCSS syntax definitions to Less. Most of the work is done, but I have to fix variable interpolation inside properties, for example `a { @{someStringLikeBackground}-color: red; }`.
Comment 6 Dominik Haumann 2017-07-23 09:35:54 UTC 
I seems this indeed is still an issue. While CSS and SCSS got huge updates to fix this, LessCSS still has this issue.

Can anyone look into this who is using LessCSS and provide a fix?

Maybe the changes done to SCSS and CSS can act as reference:
https://bugs.kde.org/show_bug.cgi?id=376005
Comment 7 Grzegorz Szymaszek 2017-07-23 09:40:51 UTC 
This bug is fixed in https://phabricator.kde.org/D5799
Comment 8 Grzegorz Szymaszek 2017-08-19 14:03:11 UTC 
Git commit ca846fbda3185f1c13cb0e423631033d64c2ff7b by Grzegorz Szymaszek.
Committed on 19/08/2017 at 08:35.
Pushed by gszymaszek into branch 'master'.

Rebased Less syntax highlighting on SCSS one

Differential Revision: https://phabricator.kde.org/D5799

A  +701  -0    autotests/input/highlight.less
M  +559  -191  data/syntax/less.xml

https://commits.kde.org/syntax-highlighting/ca846fbda3185f1c13cb0e423631033d64c2ff7b