Bug 335744 - Kate/KWrite CSS highlighting problems with media queries
Summary: Kate/KWrite CSS highlighting problems with media queries
Status: RESOLVED FIXED
Alias: None
Product: kate
Classification: Unclassified
Component: syntax (show other bugs)
Version: 3.13.1
Platform: Debian unstable Linux
: NOR normal (vote)
Target Milestone: ---
Assignee: KWrite Developers
URL:
Keywords:
: 344734 (view as bug list)
Depends on:
Blocks:
 
Reported: 2014-06-03 10:18 UTC by Wouter Van Hemel
Modified: 2015-09-23 15:11 UTC (History)
4 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments
Screenshot that shows the CSS media query highlighting problem (39.71 KB, image/png)
2014-06-03 10:20 UTC, Wouter Van Hemel
Details
the test case as text (521 bytes, text/css)
2014-06-03 13:42 UTC, Martin Walch
Details
proposal for a fix (1.13 KB, patch)
2014-06-03 13:48 UTC, Martin Walch
Details
behaviour with the syntax highlighting file of the KDE/4.12 branch (27.26 KB, image/png)
2014-06-03 14:08 UTC, Martin Walch
Details
This media query still causes an highlight error (34.66 KB, image/png)
2015-09-23 12:48 UTC, bojti
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Wouter Van Hemel 2014-06-03 10:18:09 UTC
Media queries with spaces between the keywords in parentheses mess up the highlighting.

If I remember correctly – though I might be wrong –  4.12 did this correctly, and the problems started occuring with the 4.13.x series.

Reproducible: Always

Steps to Reproduce:
1. Make a CSS file
2. Add a media query with parentheses

@media (max-width: 1120px) {

Actual Results:  
Everything after the space between "max-width:" and "1120px" is highlighted incorrectly.

Expected Results:  
I expect the code to be highlighted correctly, like it does when there's no whitespace.

http://www.w3.org/TR/css3-mediaqueries/

The W3C page on media queries specifies the possibility of whitespace (S*) in that location:

expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
Comment 1 Wouter Van Hemel 2014-06-03 10:20:55 UTC
Created attachment 86987 [details]
Screenshot that shows the CSS media query highlighting problem

This is a screenshot that shows what happens when there's whitespace within the media query's parentheses.
Comment 2 Martin Walch 2014-06-03 13:42:08 UTC
Created attachment 86991 [details]
the test case as text
Comment 3 Martin Walch 2014-06-03 13:48:59 UTC
Created attachment 86992 [details]
proposal for a fix

Just add DetectSpaces to MQEV context. This should accept the requested white space, but still refuse anything else, because all non-error rules in that context immediately switch to #pop.
Comment 4 Martin Walch 2014-06-03 14:08:32 UTC
Created attachment 86993 [details]
behaviour with the syntax highlighting file of the KDE/4.12 branch

As a side note: this is a screenshot of what shows up when using the syntax highlighting file from the 4.12 branch. As you can see, media queries are not implemented. However, the error treatment is different and only marks the part between the parenthesis as bad.
Comment 5 Martin Walch 2014-07-23 23:22:17 UTC
I just added the patch to the review board:

https://git.reviewboard.kde.org/r/119443/
Comment 6 Christoph Cullmann 2014-07-26 14:30:39 UTC
Git commit ee46a9d09134a06c4c567feb1e458a00e3698c1d by Christoph Cullmann.
Committed on 26/07/2014 at 14:29.
Pushed by cullmann into branch 'master'.

fix bug #335744: Kate/KWrite CSS highlighting problems with media queries

Easy fix: add <DetectSpaces/> to MQEV context of css.xml highlighting file

REVIEW: 119443

M  +1    -0    src/syntax/data/css.xml

http://commits.kde.org/ktexteditor/ee46a9d09134a06c4c567feb1e458a00e3698c1d
Comment 7 Christoph Cullmann 2014-07-26 14:32:45 UTC
Git commit 910071eb44d7f185e2d4ee556d9d4a2dc4bb6d06 by Christoph Cullmann.
Committed on 26/07/2014 at 14:32.
Pushed by cullmann into branch 'KDE/4.14'.

fix bug #335744: Kate/KWrite CSS highlighting problems with media queries

Easy fix: add <DetectSpaces/> to MQEV context of css.xml highlighting file

REVIEW: 119443

M  +1    -0    part/syntax/data/css.xml

http://commits.kde.org/kate/910071eb44d7f185e2d4ee556d9d4a2dc4bb6d06
Comment 8 alec hill 2015-03-12 14:10:34 UTC
Sorry if this is the wrong place to ask this, but I'm not sure where to ask...  How can I get this fix?

I tried doing "apt-get update" and "apt-get upgrade kate" but that didn't solve this.  Could I go into /usr/bin/kate and remove the files and then "git clone" the most recent branch that this fix was committed to?  If so where is that repository?
Comment 9 Martin Walch 2015-03-12 16:05:13 UTC
(In reply to alec hill from comment #8)
> Sorry if this is the wrong place to ask this, but I'm not sure where to
> ask...  How can I get this fix?

It is part of KDE Applications version 4.14.0 and higher. So, if you are using an older version (e. g. Kubuntu 14.04 and 14.10 ship with 4.13.x), you can update this on a per user basis by updating the highlighting files from withing Kate. Just run Kate and then navigate through the menu:

> Settings
> Configure Kate...
> Editor Component
> Open/Save
> Modes & Filetypes
> Download Highlighting Files...

Make sure the update for CSS is selected and install it. Afterwards restart Kate to actually use the new highlighting files.

> Could I go into /usr/bin/kate and remove the files and then
> "git clone" the most recent branch that this fix was committed to?  If so
> where is that repository?

This would break things. Cloning a git repository directly from the KDE project ("upstream") usually does not give you binaries, but the source code. To use it, you would have to compile it, which is a time consuming task and I recommend not to do this if you do not intend to become a developer.

If you insist on updating KDE you can check if your distribution offers some sort of backports (Kubuntu usually has them, but I cannot help you with that. However, you can refer to the documentation like e.g. https://help.ubuntu.com/community/Repositories/Kubuntu and you can ask the community for advice if you run into trouble).
Comment 10 alec hill 2015-03-12 16:36:59 UTC
Wow, THANK YOU!!!!

I went into Settings... and downloaded the new Highlight Files (CSS 2.10) ...and now the css within my media queries is highlighted properly :D
Comment 11 Martin Walch 2015-03-13 16:05:40 UTC
*** Bug 344734 has been marked as a duplicate of this bug. ***
Comment 12 bojti 2015-09-23 12:43:24 UTC
It's still no good. I refreshed the css highlight file, but this expression causes a fault:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    header .brand > li.logo {
        background-image: url('../imgs/logo.png');
    }
}

I'll try to attach a screenshot :)
Comment 13 bojti 2015-09-23 12:48:12 UTC
Created attachment 94694 [details]
This media query still causes an highlight error
Comment 14 bojti 2015-09-23 15:11:56 UTC
This is the problem: -webkit-min-device-pixel-ratio

This is an unknown selector (or what?) for the KWrite css parser. But this is valid, read this: https://css-tricks.com/snippets/css/retina-display-media-query/