Commit 9a574c4e authored by Christian Hergert's avatar Christian Hergert

Merge branch 'css-comments' into 'master'

css.lang (and family): Improve comment (and identifier/string) handling

See merge request !112
parents 54fdd493 153bbf46
This diff is collapsed.
......@@ -55,15 +55,14 @@
<default-regex-options case-sensitive="false"/>
<keyword-char-class>[a-z0-9_-]</keyword-char-class>
<keyword-char-class>[a-z0-9_\x{80}-\x{10ffff}\\-]</keyword-char-class>
<definitions>
<!-- global -->
<define-regex id="statement-end" extended="true">
(?: ; | (?= } ) )
</define-regex>
<define-regex id="identifier">[\w-]+</define-regex>
<define-regex id="statement-end" extended="true">;|(?=})</define-regex>
<context id="embedded-lang-hook"/>
......@@ -96,12 +95,8 @@
<!-- variables -->
<define-regex id="variable" extended="true">
(?: @ \%{css:identifier} )
</define-regex>
<context id="variable" style-ref="variable">
<match>\%{variable}</match>
<match>@\%{identifier}</match>
</context>
<context id="variable-interpolation" style-ref="variable">
......@@ -117,11 +112,11 @@
</context>
<context id="variable-reference" style-ref="variable">
<match>@@\%{css:identifier}</match>
<match>@@\%{identifier}</match>
</context>
<context id="property-variable" style-ref="variable">
<match>\$\%{css:identifier}</match>
<match>\$\%{identifier}</match>
</context>
<context id="arguments-variable" style-ref="built-in-variable">
......@@ -217,7 +212,7 @@
</context>
<context id="detached-ruleset-call">
<start>\%{variable}\(</start>
<start>@\%{identifier}\(</start>
<end>\%{statement-end}</end>
<include>
<context sub-pattern="0" where="start" style-ref="variable"/>
......@@ -292,6 +287,7 @@
<context ref="css:embedded-lang-hook"/>
<!-- only accept multi-line comments because // is part of urls -->
<context ref="css:comment" original="true"/>
<context ref="css:escape" ignore-style="true"/>
<context ref="css:string-value"/>
</include>
</context>
......@@ -369,6 +365,7 @@
<context ref="css:number-value"/>
<context ref="css:unicode-range"/>
<context ref="arithmetic-operator"/>
<context ref="css:name-value" original="true"/>
<context ref="css:slash"/>
<context ref="css:comma"/>
</include>
......@@ -400,14 +397,36 @@
<context id="less-declaration-value">
<start extended="true">
(?(DEFINE) (?&lt;escape_comment_start&gt; (?: \\ /\* )+ ) )
(?(DEFINE) (?&lt;escape&gt; (?: \\ . )+ ) )
(?(DEFINE) (?&lt;escape_not_interpolation_start&gt; (?: \\ (?! @{ ) . )+ ) )
(?(DEFINE)
(?&lt;interpolation_start_chars&gt;
(?: (?: @ (?! { ) )+ | (?: (?&lt;! @ ) { )+ )
)
)
(?(DEFINE)
(?&lt;comment_start_chars&gt;
(?: (?: / (?! \* ) )+ | (?: (?&lt;! / ) \* )+ )
)
)
(?(DEFINE)
(?&lt;comment_end_chars&gt;
(?: (?: \* (?! / ) )+ | (?: (?&lt;! \* ) / )+ )
)
)
(?(DEFINE)
(?&lt;interpolation&gt; # recursive subpattern to find matching brackets
@{
(?:
(?&gt;
(?:
[^@{}]+ |
(?! @{ | } ) .
[^}@{]+ |
# no escapes
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
......@@ -415,6 +434,74 @@
}
)
)
(?(DEFINE)
(?&lt;parentheses&gt; # recursive subpattern to find matching parentheses
\(
(?:
(?&gt;
(?:
[^\\)(/*"']+ |
(?&amp;escape_comment_start) |
(?&amp;escape) |
(?&amp;comment_start_chars)
)+
) |
(?&amp;parentheses) |
(?&amp;comment) |
(?&amp;double_quotes) |
(?&amp;single_quotes)
)*
\)
)
)
(?(DEFINE)
(?&lt;comment&gt; # subpattern to find matching comment delimiters
/\*
(?:
(?&gt;
(?:
[^*/]+ |
# no escapes
(?&amp;comment_end_chars)
)+
)
)*
\*/
)
)
(?(DEFINE)
(?&lt;double_quotes&gt; # subpattern to find matching double quotes
"
(?:
(?&gt;
(?:
[^\\"@{]+ |
(?&amp;escape_not_interpolation_start) |
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
)*
"
)
)
(?(DEFINE)
(?&lt;single_quotes&gt; # subpattern to find matching single quotes
'
(?:
(?&gt;
(?:
[^\\'@{]+ |
(?&amp;escape_not_interpolation_start) |
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
)*
'
)
)
(
\+_?: | # property merge
:
......@@ -422,16 +509,24 @@
(?! # not the start of a
\%{css:single-identifier-char} | # pseudo-class
[:\\] | # pseudo-element, escape
@{ # variable interpolation
@{ | # variable interpolation
/\* # comment
) | # or
(?= # ends like a normal declaration
(?&gt;
(?:
[^;}{@]+ |
(?&amp;interpolation)+ |
\@+
)*
)
(?:
(?&gt;
(?:
[^\\;}{(/*"']+ |
(?&amp;escape_comment_start) |
(?&amp;escape) |
(?&amp;comment_start_chars)
)+
) |
(?&amp;parentheses) |
(?&amp;comment) |
(?&amp;double_quotes) |
(?&amp;single_quotes)
)*
\%{css:declaration-value-end} # with a semicolon or at the end of a block
)
)
......@@ -451,7 +546,6 @@
<context ref="css:at-rule"/> <!-- because Less variables look like at-rules -->
<context ref="detached-ruleset-call"/>
<context ref="standalone-plugin-function-call"/>
<context ref="inside-ruleset-extend"/>
<context ref="css:style-block-content" original="true"/>
<context ref="css:selector"/>
<context ref="css:style-block"/>
......@@ -514,7 +608,7 @@
</context>
<context id="standalone-plugin-function-call">
<start>(?=\%{css:identifier}\()</start>
<start>(?=\%{identifier}\()</start>
<end>\%{statement-end}</end>
<include>
<context sub-pattern="0" where="end" style-ref="css:delimiter"/>
......@@ -706,35 +800,19 @@
<match>(?&lt;=})\%{css:identifier-chars}</match>
</context>
<context id="less-pseudo-classes" style-ref="css:pseudo-class">
<prefix>:</prefix>
<keyword>extend</keyword>
</context>
<context id="extend-pseudo-class-argument-keyword" style-ref="css:keyword">
<context id="extend-pseudo-class-keyword" once-only="true" style-ref="css:keyword">
<keyword>all</keyword>
</context>
<context id="extend-pseudo-class-argument">
<start>(?&lt;=:extend)\(</start>
<context id="extend-pseudo-class" end-parent="true">
<start>\%[extend\(</start>
<end>\)</end>
<include>
<context sub-pattern="0" where="start" style-ref="css:pseudo-class"/>
<context sub-pattern="0" where="end" style-ref="css:pseudo-class"/>
<context ref="css:embedded-lang-hook"/>
<context ref="css:comment"/>
<context ref="extend-pseudo-class-argument-keyword"/>
<context ref="css:selector"/>
</include>
</context>
<context id="inside-ruleset-extend">
<start>(?=&amp;:extend\()</start>
<end>\%{statement-end}</end>
<include>
<context sub-pattern="0" where="end" style-ref="css:delimiter"/>
<context ref="css:embedded-lang-hook"/>
<context ref="css:comment"/>
<context ref="extend-pseudo-class-keyword"/>
<context ref="css:selector"/>
</include>
</context>
......@@ -764,31 +842,31 @@
</include>
</context>
<context id="less-pseudo-class">
<context id="less-lang-pseudo-class-content">
<include>
<context ref="less-pseudo-classes"/>
<context ref="css:pseudo-class" original="true"/>
<context ref="variable-interpolation-value"/>
<context ref="css:lang-pseudo-class-content" original="true"/>
</include>
</context>
<context id="less-lang-pseudo-class-argument-content">
<context id="less-nth-pseudo-class-content">
<include>
<context ref="variable-interpolation-value"/>
<context ref="css:lang-pseudo-class-argument-content" original="true"/>
<context ref="css:nth-pseudo-class-content" original="true"/>
</include>
</context>
<context id="less-nth-pseudo-class-argument-content">
<context id="less-pseudo-class-content">
<include>
<context ref="variable-interpolation-value"/>
<context ref="css:nth-pseudo-class-argument-content" original="true"/>
<context ref="extend-pseudo-class"/>
<context ref="css:pseudo-class-content" original="true"/>
</include>
</context>
<context id="less-pseudo-class-argument">
<context id="less-pseudo-class-not-pseudo-class-argument-content">
<include>
<context ref="extend-pseudo-class-argument"/>
<context ref="css:pseudo-class-argument" original="true"/>
<context ref="extend-pseudo-class" style-ref="css:error"/>
<context ref="css:pseudo-class-not-pseudo-class-argument-content" original="true"/>
</include>
</context>
......@@ -805,10 +883,10 @@
<replace id="css:attribute-selector-content" ref="less-attribute-selector-content"/>
<replace id="css:simple-selector" ref="less-simple-selector"/>
<replace id="css:combinator" ref="less-combinator"/>
<replace id="css:pseudo-class" ref="less-pseudo-class"/>
<replace id="css:lang-pseudo-class-argument-content" ref="less-lang-pseudo-class-argument-content"/>
<replace id="css:nth-pseudo-class-argument-content" ref="less-nth-pseudo-class-argument-content"/>
<replace id="css:pseudo-class-argument" ref="less-pseudo-class-argument"/>
<replace id="css:lang-pseudo-class-content" ref="less-lang-pseudo-class-content"/>
<replace id="css:nth-pseudo-class-content" ref="less-nth-pseudo-class-content"/>
<replace id="css:pseudo-class-content" ref="less-pseudo-class-content"/>
<replace id="css:pseudo-class-not-pseudo-class-argument-content" ref="less-pseudo-class-not-pseudo-class-argument-content"/>
<replace id="css:selector" ref="less-selector"/>
......
......@@ -58,7 +58,7 @@
<default-regex-options case-sensitive="false"/>
<keyword-char-class>[a-z0-9_-]</keyword-char-class>
<keyword-char-class>[a-z0-9_\x{80}-\x{10ffff}\\-]</keyword-char-class>
<definitions>
......@@ -254,6 +254,8 @@
<context ref="css:embedded-lang-hook"/>
<!-- only accept multi-line comments because // is part of urls -->
<context ref="css:comment" original="true"/>
<context ref="interpolation"/>
<context ref="css:escape" ignore-style="true"/>
<context ref="css:string-value"/>
</include>
</context>
......@@ -330,6 +332,7 @@
<context ref="logical-operator"/>
<context ref="comparison-operator"/>
<context ref="arithmetic-operator"/>
<context ref="css:name-value" original="true"/>
<context ref="css:slash"/>
<context ref="css:comma"/>
</include>
......@@ -405,34 +408,150 @@
<context id="scss-declaration-value">
<start extended="true">
(?(DEFINE) (?&lt;escape_interpolation_start&gt; (?: \\ \#{ )+ ) )
(?(DEFINE) (?&lt;escape_comment_start&gt; (?: \\ /\* )+ ) )
(?(DEFINE) (?&lt;escape&gt; (?: \\ . )+ ) )
(?(DEFINE)
(?&lt;interpolation_start_chars&gt;
(?: (?: \# (?! { ) )+ | (?: (?&lt;! \# ) { )+ )
)
)
(?(DEFINE)
(?&lt;comment_start_chars&gt;
(?: (?: / (?! \* ) )+ | (?: (?&lt;! / ) \* )+ )
)
)
(?(DEFINE)
(?&lt;comment_end_chars&gt;
(?: (?: \* (?! / ) )+ | (?: (?&lt;! \* ) / )+ )
)
)
(?(DEFINE)
(?&lt;interpolation&gt; # recursive subpattern to find matching brackets
\#{
(?:
(?&gt;
(?:
[^#{}]+ |
(?! \#{ | } ) .
[^\\}#{(/*"']+ |
(?&amp;escape_interpolation_start) |
(?&amp;escape_comment_start) |
(?&amp;escape) |
(?&amp;interpolation_start_chars) |
(?&amp;comment_start_chars)
)+
) |
(?&amp;interpolation)
(?&amp;interpolation) |
(?&amp;parentheses) |
(?&amp;comment) |
(?&amp;double_quotes) |
(?&amp;single_quotes)
)*
}
)
)
(?(DEFINE)
(?&lt;parentheses&gt; # recursive subpattern to find matching parentheses
\(
(?:
(?&gt;
(?:
[^\\)(#{/*"']+ |
(?&amp;escape_interpolation_start) |
(?&amp;escape_comment_start) |
(?&amp;escape) |
(?&amp;interpolation_start_chars) |
(?&amp;comment_start_chars)
)+
) |
(?&amp;interpolation) |
(?&amp;parentheses) |
(?&amp;comment) |
(?&amp;double_quotes) |
(?&amp;single_quotes)
)*
\)
)
)
(?(DEFINE)
(?&lt;comment&gt; # subpattern to find matching comment delimiters
/\*
(?:
(?&gt;
(?:
[^*/#{]+ |
# no escapes
(?&amp;comment_end_chars) |
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
)*
\*/
)
)
(?(DEFINE)
(?&lt;double_quotes&gt; # subpattern to find matching double quotes
"
(?:
(?&gt;
(?:
[^\\"#{]+ |
(?&amp;escape_interpolation_start) |
(?&amp;escape) |
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
)*
"
)
)
(?(DEFINE)
(?&lt;single_quotes&gt; # subpattern to find matching single quotes
'
(?:
(?&gt;
(?:
[^\\'#{]+ |
(?&amp;escape_interpolation_start) |
(?&amp;escape) |
(?&amp;interpolation_start_chars)
)+
) |
(?&amp;interpolation)
)*
'
)
)
:
(?:
(?! # not the start of a
\%{css:single-identifier-char} | # pseudo-class
[:\\] | # pseudo-element, escape
\#{ # interpolation
\#{ | # interpolation
/\* # comment
) | # or
(?= # ends like a normal declaration
(?&gt;
(?:
[^;}{#]+ |
(?&amp;interpolation)+ |
\#+
(?&gt;
(?:
[^\\;}{#(/*"']+ |
(?&amp;escape_interpolation_start) |
(?&amp;escape_comment_start) |
(?&amp;escape) |
(?: \# (?! { ) )+ | # interpolation_start_chars allows {
(?&amp;comment_start_chars)
)+
) |
(?&amp;interpolation) |
(?&amp;parentheses) |
(?&amp;comment) |
(?&amp;double_quotes) |
(?&amp;single_quotes)
)*
)
\%{css:declaration-value-end} # with a semicolon or at the end of a block
......@@ -871,10 +990,10 @@
</include>
</context>
<context id="scss-nth-pseudo-class-argument-content">
<context id="scss-nth-pseudo-class-content">
<include>
<context ref="interpolation"/>
<context ref="css:nth-pseudo-class-argument-content" original="true"/>
<context ref="css:nth-pseudo-class-content" original="true"/>
</include>
</context>
......@@ -887,7 +1006,7 @@
<replace id="css:simple-selector" ref="scss-simple-selector"/>
<replace id="css:combinator" ref="scss-combinator"/>
<replace id="css:nth-pseudo-class-argument-content" ref="scss-nth-pseudo-class-argument-content"/>
<replace id="css:nth-pseudo-class-content" ref="scss-nth-pseudo-class-content"/>
<replace id="css:selector" ref="scss-selector"/>
......
......@@ -42,7 +42,8 @@ Body {
.someclass, /* class */
div, /* type */
*, /* universal */
[lang|="zh"] { /* attribute */
[lang|="zh"], /* attribute */
[ /* comment */ lang /* comment */ |= /* comment */ "zh" /* comment */ ] {
color: black;
}
......@@ -56,21 +57,21 @@ ul ul { /* descendant */
/* pseudo-elements */
:after,
::after,
::/* comment */after,
::placeholder,
::selection {
::/* comment */selection {
color: green;
}
/* pseudo-classes */
:hover,
:required,
:/* comment */required,
:lang(fr),
:not(div#sidebar.fancy),
:/* comment */not(div#sidebar.fancy),
:nth-child(n+1),
:nth-last-child(-2n - 30),
:/* comment */nth-last-child(-2n /* comment */ - /* comment */ 30),
:nth-of-type(5),
:nth-last-of-type(even) {
:/* comment */nth-last-of-type(even) {
color: yellow;
}
......@@ -149,6 +150,7 @@ svg|[fill] { /* attribute */
/* ratio */
@media (min-aspect-ratio: 16/9) {}
@media (min-aspect-ratio: 16 /* comment */ / /* comment */ 9) {}
/* resolution */
@media (min-resolution: +2.54dpcm) {}
......@@ -193,6 +195,7 @@ svg|[fill] { /* attribute */
content: "\E9 dition \
\"\0000E9dition\" \
\e9motion";
font-family: \E9 dition, \"\0000E9dition\", \e9motion;
/* function name */
background: \u\72\l(image.png);
......@@ -311,7 +314,7 @@ body {
margin: 2cm;
marks: crop cross;
}
@page index:left {
@page index:/*comment*/left {
size: A4;
@top-right {
......@@ -334,7 +337,7 @@ body {
/* pseudo-elements */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
input[type="number"]::/* comment */-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
......@@ -343,7 +346,7 @@ input[type="number"] {
/* pseudo-classes */
#page:-moz-full-screen,
#page:-ms-fullscreen,
#page:/* comment */-ms-fullscreen,
#page:-webkit-full-screen {
background: silver;
}
......
......@@ -404,23 +404,52 @@ div {
font-family:arial;
@{property}:block;
background-image:url( \( \) \{ { );
background-image:url( url( { ) );
background-image:url( @var );
background-image:url( /* ) { */ );
background-image:url( " ) { " );
background-image:url( ' ) { ' );
margin:@var 10px;
display:/* { */block;
font-family:" \" \{ { ", serif;
font-family:" @{var} ", serif;
font-family:' \' \{ { ', serif;
font-family:' @{var} ', serif;
// incorrectly highlighted declarations
display:block
;
// selectors
input:focus {
opacity: 0.5;
}
div:nth-child(2n+1) {
background-color: gray;
}
@{selector}:focus {
color: blue;
}
a:@{state} {
color: blue;
}
input:focus { opacity: 0.5; }
div:nth-child(2n+1) { background-color: gray; }
div:-moz-full-screen { display: block; }
@{selector}:focus { color: blue; }
a:@{state} { color: blue; }
a:focus[id=\]\;] { color: blue; }
a:focus[id=@{var}] { color: blue; }
a:focus[id=/* ] ; */] { color: blue; }
a:focus[id=" ] ; "] { color: blue; }
a:focus[id=' ] ; '] { color: blue; }
a:@{var} { color: blue; }
a:/* ; */focus { color: blue; }
a:focus[id=" ] \" \; ; "] { color: blue; }
a:focus[id=" @{var} "] { color: blue; }
a:focus[id=' ] \' \; ; '] { color: blue; }
a:focus[id=' @{var} '] { color: blue; }
}
......@@ -464,7 +493,8 @@ Body {
.someclass, /* class */
div, /* type */
*, /* universal */
[lang|="zh"] { /* attribute */
[lang|="zh"], /* attribute */
[ /* comment */ lang /* comment */ |= /* comment */ "zh" /* comment */ ] {
color: black;
}
......@@ -478,21 +508,21 @@ ul ul { /* descendant */
/* pseudo-elements */
:after,
::after,
::/* comment */after,
::placeholder,
::selection {
::/* comment */selection {
color: green;
}
/* pseudo-classes */
:hover,
:required,
:/* comment */required,
:lang(fr),
:not(div#sidebar.fancy),
:/* comment */not(div#sidebar.fancy),
:nth-child(n+1),
:nth-last-child(-2n - 30),
:/* comment */nth-last-child(-2n /* comment */ - /* comment */ 30),
:nth-of-type(5),
:nth-last-of-type(even) {
:/* comment */nth-last-of-type(even) {
color: yellow;
}
......@@ -571,6 +601,7 @@ svg|[fill] { /* attribute */
/* ratio */
@media (min-aspect-ratio: 16/9) {}
@media (min-aspect-ratio: 16 /* comment */ / /* comment */ 9) {}
/* resolution */
@media (min-resolution: +2.54dpcm) {}
......@@ -615,6 +646,7 @@ svg|[fill] { /* attribute */
content: "\E9 dition \
\"\0000E9dition\" \
\e9motion";
font-family: \E9 dition, \"\0000E9dition\", \e9motion;
/* function name */
background: \u\72\l(image.png);
......@@ -733,7 +765,7 @@ body {
margin: 2cm;
marks: crop cross;
}
@page index:left {
@page index:/*comment*/left {
size: A4;
@top-right {
......@@ -756,7 +788,7 @@ body {
/* pseudo-elements */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
input[type="number"]::/* comment */-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
......@@ -765,7 +797,7 @@ input[type="number"] {
/* pseudo-classes */
#page:-moz-full-screen,
#page:-ms-fullscreen,
#page:/* comment */-ms-fullscreen,
#page:-webkit-full-screen {
background: silver;
}
......
......@@ -410,8 +410,10 @@ div {
.declarations-or-selectors {
// declarations
display:block;
font-family:arial;
font: {
family: fantasy;
weight: bold;
......@@ -420,33 +422,72 @@ div {
size: 20px;
style: italic;
}