Kate editor not parsing @media queries correctly

This problem exhibits itself when viewing css files with @media {…} queries with Kate text editor versions < v3.14. Kate highlights these sections incorrectly with  red underline or similar.

The fix for this bug is to add <DetectSpaces/> to the MQEV context of Kate’s  css.xml highlighting file so that it parses spaces after @media attribute and before the curly brace correctly.

In Kubuntu 14.04 css.xml is located in /usr/share/kde4/apps/katepart/syntax/css.xml

Edit this file with Kate as follows

kdesudo kate /usr/share/kde4/apps/katepart/syntax/css.xml

Find the second occurrence of “MQEV” to locote code section to add <DetectSpaces/> as shown below:

Code before:

<context attribute="Media" lineEndContext="#stay" name="MQEV">
<!-- this should be seperate for different features, for now it is all the same -->
<RegExpr attribute="Value" context="#pop" String="[1-9][0-9.]*\s*/\s*[1-9][0-9.]*" />
<RegExpr attribute="Value" context="#pop" String="[0-9.]+(em|ex|ch|rem|vw|vh|vm|px|in|cm|mm|pt|pc|deg|rad|grad|turn|ms|s|Hz|kHz|dpi|dpcm)\b" />
<RegExpr attribute="Value" context="#pop" String="[0-9.]+[%]?" />
<RegExpr attribute="Value" context="#pop" String="(portrait|landscape)" />
<RegExpr attribute="Error" context="#stay" String=".*"/>
</context>

Code after:

<context attribute="Media" lineEndContext="#stay" name="MQEV">
<DetectSpaces/>
<!-- this should be seperate for different features, for now it is all the same -->
<RegExpr attribute="Value" context="#pop" String="[1-9][0-9.]*\s*/\s*[1-9][0-9.]*" />
<RegExpr attribute="Value" context="#pop" String="[0-9.]+(em|ex|ch|rem|vw|vh|vm|px|in|cm|mm|pt|pc|deg|rad|grad|turn|ms|s|Hz|kHz|dpi|dpcm)\b" />
<RegExpr attribute="Value" context="#pop" String="[0-9.]+[%]?" />
<RegExpr attribute="Value" context="#pop" String="(portrait|landscape)" />
<RegExpr attribute="Error" context="#stay" String=".*"/>
</context>

Save change and restart Kate. You should now see your css @media code displayed normally.

Credits: Fix bug #335744: Kate/KWrite CSS highlighting problems with media queries. Published by  Martin Walch 2014-06-03 13:48:59 UTC https://bugs.kde.org/show_bug.cgi?id=335744