fix(css-like) Now always detect block comments

CHANGES.md

@@ -1,3 +1,11 @@
+## Version 11.3.0 (most likely)
+
+enh(css/less/stylus/scss) improve consistency of function dispatch (#3301) [Josh Goebel][]
+enh(css/less/stylus/scss) detect block comments more fully (#3301) [Josh Goebel][]
+
+[Josh Goebel]: https://github.com/joshgoebel
+
+
 ## Version 11.2.0
 
 Build:

src/languages/css.js

@@ -11,10 +11,6 @@ import * as regex from '../lib/regex.js';
 /** @type LanguageFn */
 export default function(hljs) {
   const modes = css.MODES(hljs);
-  const FUNCTION_DISPATCH = {
-    className: "built_in",
-    begin: /[\w-]+(?=\()/
-  };
   const VENDOR_PREFIX = {
     begin: /-(webkit|moz|ms|o)-(?=[a-z])/
   };
@@ -39,7 +35,7 @@ export default function(hljs) {
       keyframePosition: "selector-tag"
     },
     contains: [
-      hljs.C_BLOCK_COMMENT_MODE,
+      modes.BLOCK_COMMENT,
       VENDOR_PREFIX,
       // to recognize keyframe 40% etc which are outside the scope of our
       // attribute value mode
@@ -82,6 +78,7 @@ export default function(hljs) {
         begin: ':',
         end: '[;}]',
         contains: [
+          modes.BLOCK_COMMENT,
           modes.HEXCOLOR,
           modes.IMPORTANT,
           modes.CSS_NUMBER_MODE,
@@ -107,7 +104,7 @@ export default function(hljs) {
               }
             ]
           },
-          FUNCTION_DISPATCH
+          modes.FUNCTION_DISPATCH
         ]
       },
       {

src/languages/less.js

@@ -187,7 +187,8 @@ export default function(hljs) {
         begin: '\\b(' + css.TAGS.join('|') + ')\\b',
         className: 'selector-tag'
       },
-      IDENT_MODE('selector-tag', INTERP_IDENT_RE + '%?', 0), // '%' for more consistent coloring of @keyframes "tags"
+      modes.CSS_NUMBER_MODE,
+      IDENT_MODE('selector-tag', INTERP_IDENT_RE, 0),
       IDENT_MODE('selector-id', '#' + INTERP_IDENT_RE),
       IDENT_MODE('selector-class', '\\.' + INTERP_IDENT_RE, 0),
       IDENT_MODE('selector-tag', '&', 0),
@@ -208,7 +209,8 @@ export default function(hljs) {
       }, // argument list of parametric mixins
       {
         begin: '!important'
-      } // eat !important after mixin call or it will be colored as tag
+      }, // eat !important after mixin call or it will be colored as tag
+      modes.FUNCTION_DISPATCH
     ]
   };
 

src/languages/lib/css-shared.js

@@ -4,10 +4,15 @@ export const MODES = (hljs) => {
       scope: 'meta',
       begin: '!important'
     },
+    BLOCK_COMMENT: hljs.C_BLOCK_COMMENT_MODE,
     HEXCOLOR: {
       scope: 'number',
       begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
     },
+    FUNCTION_DISPATCH: {
+      className: "built_in",
+      begin: /[\w-]+(?=\()/
+    },
     ATTRIBUTE_SELECTOR_MODE: {
       scope: 'selector-attr',
       begin: /\[/,

src/languages/scss.js

@@ -29,6 +29,9 @@ export default function(hljs) {
     contains: [
       hljs.C_LINE_COMMENT_MODE,
       hljs.C_BLOCK_COMMENT_MODE,
+      // to recognize keyframe 40% etc which are outside the scope of our
+      // attribute value mode
+      modes.CSS_NUMBER_MODE,
       {
         className: 'selector-id',
         begin: '#[A-Za-z0-9_-]+',
@@ -72,6 +75,7 @@ export default function(hljs) {
         begin: ':',
         end: ';',
         contains: [
+          modes.BLOCK_COMMENT,
           VARIABLE,
           modes.HEXCOLOR,
           modes.CSS_NUMBER_MODE,
@@ -114,7 +118,8 @@ export default function(hljs) {
           modes.HEXCOLOR,
           modes.CSS_NUMBER_MODE
         ]
-      }
+      },
+      modes.FUNCTION_DISPATCH
     ]
   };
 }

src/languages/stylus.js

@@ -178,7 +178,8 @@ export default function(hljs) {
           illegal: /\./,
           relevance: 0
         }
-      }
+      },
+      modes.FUNCTION_DISPATCH
     ]
   };
 }

test/markup/css/css_consistency.expect.txt

@@ -68,3 +68,8 @@
   <span class="hljs-attr">--color</span>: red;
   <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color);
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-comment">/* normal comment */</span>
+  <span class="hljs-attribute">width</span>: <span class="hljs-comment">/* inline comment */</span> <span class="hljs-number">50px</span>;
+}

test/markup/css/css_consistency.txt

@@ -68,3 +68,8 @@ main {
   --color: red;
   color: var(--color);
 }
+
+main {
+  /* normal comment */
+  width: /* inline comment */ 50px;
+}

test/markup/less/css_consistency.expect.txt

@@ -58,7 +58,18 @@
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
 
+<span class="hljs-keyword">@keyframes</span> important1 {
+  <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">50px</span>; }
+  <span class="hljs-number">50%</span>  { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span> <span class="hljs-meta">!important</span>; }
+  <span class="hljs-selector-tag">to</span>   { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">100px</span>; }
+}
+
 <span class="hljs-selector-tag">main</span> {
   <span class="hljs-attr">--color</span>: red;
   <span class="hljs-attribute">color</span>: var(--color);
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-comment">/* normal comment */</span>
+  <span class="hljs-attribute">width</span>: <span class="hljs-comment">/* inline comment */</span> <span class="hljs-number">50px</span>;
+}

test/markup/less/css_consistency.txt

@@ -58,7 +58,18 @@ a[href*="example"] {}
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
 
+@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 60px !important; }
+  to   { margin-top: 100px; }
+}
+
 main {
   --color: red;
   color: var(--color);
 }
+
+main {
+  /* normal comment */
+  width: /* inline comment */ 50px;
+}

test/markup/scss/css_consistency.expect.txt

@@ -58,7 +58,18 @@
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
 
+<span class="hljs-keyword">@keyframes</span> important1 {
+  from { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">50px</span>; }
+  <span class="hljs-number">50%</span>  { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span> <span class="hljs-meta">!important</span>; }
+  to   { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">100px</span>; }
+}
+
 <span class="hljs-selector-tag">main</span> {
   <span class="hljs-attr">--color</span>: red;
   <span class="hljs-attribute">color</span>: var(--color);
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-comment">/* normal comment */</span>
+  <span class="hljs-attribute">width</span>: <span class="hljs-comment">/* inline comment */</span> <span class="hljs-number">50px</span>;
+}

test/markup/scss/css_consistency.txt

@@ -58,7 +58,18 @@ a[href*="example"] {}
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
 
+@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 60px !important; }
+  to   { margin-top: 100px; }
+}
+
 main {
   --color: red;
   color: var(--color);
 }
+
+main {
+  /* normal comment */
+  width: /* inline comment */ 50px;
+}

test/markup/stylus/css_consistency.expect.txt

@@ -58,7 +58,18 @@
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
 
+<span class="hljs-keyword">@keyframes</span> important1 {
+  from { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">50px</span>; }
+  <span class="hljs-number">50%</span>  { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span> <span class="hljs-meta">!important</span>; }
+  to   { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">100px</span>; }
+}
+
 <span class="hljs-selector-tag">main</span> {
   <span class="hljs-attr">--color</span>: red;
   <span class="hljs-attribute">color</span>: var(--color);
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-comment">/* normal comment */</span>
+  <span class="hljs-attribute">width</span>: <span class="hljs-comment">/* inline comment */</span> <span class="hljs-number">50px</span>;
+}

test/markup/stylus/css_consistency.txt

@@ -58,7 +58,18 @@ a[href*="example"] {}
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
 
+@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 60px !important; }
+  to   { margin-top: 100px; }
+}
+
 main {
   --color: red;
   color: var(--color);
 }
+
+main {
+  /* normal comment */
+  width: /* inline comment */ 50px;
+}

test/markup/stylus/default.expect.txt

@@ -2,7 +2,7 @@
 
 <span class="hljs-comment">// variables</span>
 <span class="hljs-variable">$green</span> = <span class="hljs-number">#008000</span>
-<span class="hljs-variable">$green_dark</span> = darken(<span class="hljs-variable">$green</span>, <span class="hljs-number">10</span>)
+<span class="hljs-variable">$green_dark</span> = <span class="hljs-built_in">darken</span>(<span class="hljs-variable">$green</span>, <span class="hljs-number">10</span>)
 
 <span class="hljs-comment">// mixin/function</span>
 <span class="hljs-function"><span class="hljs-title">container</span><span class="hljs-params">()</span></span>
@@ -16,10 +16,10 @@
     <span class="hljs-attribute">background-color</span> <span class="hljs-number">#B22222</span>
 
 <span class="hljs-selector-tag">button</span>
-  buttonBG(red)
+  <span class="hljs-built_in">buttonBG</span>(red)
 
 <span class="hljs-selector-class">.blue-button</span>
-  buttonBG(blue)
+  <span class="hljs-built_in">buttonBG</span>(blue)
 
 <span class="hljs-selector-id">#content</span>, <span class="hljs-selector-class">.content</span>
   <span class="hljs-attribute">font</span> Tahoma, Chunkfive, sans-serif