css consistency: consolidate more into shared-css

highlightjs · Jan 29, 2021 · 11a1a4b · 11a1a4b
1 parent 01ea10d
commit 11a1a4b
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 119 deletions.
diff --git a/src/languages/css.js b/src/languages/css.js
@@ -10,24 +10,21 @@ import * as regex from '../lib/regex.js';
 
 /** @type LanguageFn */
 export default function(hljs) {
-  const IMPORTANT = {
-    className: 'meta',
-    begin: '!important'
-  };
-  const HEXCOLOR = {
-    className: 'number', begin: '#[0-9A-Fa-f]+'
-  };
+  const modes = css.MODES(hljs);
   const FUNCTION_DISPATCH = {
     className: "built_in",
     begin: /[\w-]+(?=\()/
   };
   const VENDOR_PREFIX = {
-    begin: /-(webkit|moz|ms|o)-/
+    begin: /-(webkit|moz|ms|o)-(?=[a-z])/
   };
   const AT_MODIFIERS = "and or not only";
   const AT_PROPERTY_RE = /@-?\w[\w]*(-\w+)*/; // @-webkit-keyframes
   const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
-
+  const STRINGS = [
+    hljs.APOS_STRING_MODE,
+    hljs.QUOTE_STRING_MODE
+  ];
 
   return {
     name: 'CSS',
@@ -43,23 +40,31 @@ export default function(hljs) {
     },
     contains: [
       hljs.C_BLOCK_COMMENT_MODE,
+      VENDOR_PREFIX,
       // to recognize keyframe 40% etc which are outside the scope of our
       // attribute value mode
       hljs.CSS_NUMBER_MODE,
       {
-        className: 'selector-id', begin: /#[A-Za-z0-9_-]+/
+        className: 'selector-id',
+        begin: /#[A-Za-z0-9_-]+/,
+        relevance: 0
       },
       {
-        className: 'selector-class', begin: '\\.' + IDENT_RE
+        className: 'selector-class',
+        begin: '\\.' + IDENT_RE,
+        relevance: 0
       },
-      css.ATTRIBUTE_SELECTOR_MODE,
+      modes.ATTRIBUTE_SELECTOR_MODE,
       {
         className: 'selector-pseudo',
-        begin: ':(' + css.PSEUDO_CLASSES.join('|') + ')'
-      },
-      {
-        className: 'selector-pseudo',
-        begin: '::(' + css.PSEUDO_ELEMENTS.join('|') + ')'
+        variants: [
+          {
+            begin: ':(' + css.PSEUDO_CLASSES.join('|') + ')'
+          },
+          {
+            begin: '::(' + css.PSEUDO_ELEMENTS.join('|') + ')'
+          }
+        ]
       },
       // we may actually need this (12/2020)
       // { // pseudo-selector params
@@ -76,17 +81,17 @@ export default function(hljs) {
         begin: ':',
         end: '[;}]',
         contains: [
-          HEXCOLOR,
-          IMPORTANT,
+          modes.HEXCOLOR,
+          modes.IMPORTANT,
           hljs.CSS_NUMBER_MODE,
-          hljs.QUOTE_STRING_MODE,
-          hljs.APOS_STRING_MODE,
+          ...STRINGS,
           // needed to highlight these as strings and to avoid issues with
           // illegal characters that might be inside urls that would tigger the
           // languages illegal stack
           {
             begin: /(url|data-uri)\(/,
             end: /\)/,
+            relevance: 0, // from keywords
             keywords: {
               built_in: "url data-uri"
             },
@@ -104,27 +109,20 @@ export default function(hljs) {
           FUNCTION_DISPATCH
         ]
       },
-      // matching these here allows us to treat them more like regular CSS
-      // rules so everything between the {} gets regular rule highlighting,
-      // which is what we want for page and font-face
-      {
-        begin: '@(page|font-face)',
-        keywords: {
-          $pattern: /@[a-z-]+/,
-          keyword: '@page @font-face'
-        }
-      },
       {
         begin: regex.lookahead(/@/),
         end: '[{;]',
+        relevance: 0,
         illegal: /:/, // break on Less variables @var: ...
         contains: [
           {
             className: 'keyword',
             begin: AT_PROPERTY_RE
           },
           {
-            begin: /\s/, endsWithParent: true, excludeEnd: true,
+            begin: /\s/,
+            endsWithParent: true,
+            excludeEnd: true,
             relevance: 0,
             keywords: {
               $pattern: /[a-z-]+/,
@@ -136,8 +134,7 @@ export default function(hljs) {
                 begin: /[a-z-]+(?=:)/,
                 className: "attribute"
               },
-              hljs.APOS_STRING_MODE,
-              hljs.QUOTE_STRING_MODE,
+              ...STRINGS,
               hljs.CSS_NUMBER_MODE
             ]
           }

diff --git a/src/languages/less.js b/src/languages/less.js
@@ -6,11 +6,12 @@ Website: http://lesscss.org
 Category: common, css
 */
 
-import * as css_shared from "./lib/css-shared.js";
+import * as css from "./lib/css-shared.js";
 
 /** @type LanguageFn */
 export default function(hljs) {
-  const PSEUDO_SELECTORS = css_shared.PSEUDO_SELECTORS;
+  const modes = css.MODES(hljs);
+  const PSEUDO_SELECTORS = css.PSEUDO_SELECTORS;
 
   var AT_MODIFIERS = "and or not only";
   var IDENT_RE        = '[\\w-]+'; // yes, Less identifiers may begin with a digit
@@ -32,7 +33,7 @@ export default function(hljs) {
   var AT_KEYWORDS = {
     $pattern: /[a-z-]+/,
     keyword: AT_MODIFIERS,
-    attribute: css_shared.MEDIA_FEATURES.join(" ")
+    attribute: css.MEDIA_FEATURES.join(" ")
   };
 
   var PARENS_MODE = {
@@ -55,18 +56,15 @@ export default function(hljs) {
       begin: '(url|data-uri)\\(',
       starts: {className: 'string', end: '[\\)\\n]', excludeEnd: true}
     },
-    IDENT_MODE('number', '#[0-9A-Fa-f]+\\b'),
+    modes.HEXCOLOR,
     PARENS_MODE,
     IDENT_MODE('variable', '@@?' + IDENT_RE, 10),
     IDENT_MODE('variable', '@\\{'  + IDENT_RE + '\\}'),
     IDENT_MODE('built_in', '~?`[^`]*?`'), // inline javascript (or whatever host language) *multiline* string
     { // @media features (it’s here to not duplicate things in AT_RULE_MODE with extra PARENS_MODE overriding):
       className: 'attribute', begin: IDENT_RE + '\\s*:', end: ':', returnBegin: true, excludeEnd: true
     },
-    {
-      className: 'meta',
-      begin: '!important'
-    }
+    modes.IMPORTANT
   );
 
   var VALUE_WITH_RULESETS = VALUE_MODES.concat({
@@ -146,21 +144,21 @@ export default function(hljs) {
       IDENT_MODE('keyword',  'all\\b'),
       IDENT_MODE('variable', '@\\{'  + IDENT_RE + '\\}'),     // otherwise it’s identified as tag
       {
-        begin: '\\b(' + css_shared.TAGS.join('|') + ')\\b',
+        begin: '\\b(' + css.TAGS.join('|') + ')\\b',
         className: 'selector-tag'
       },
       IDENT_MODE('selector-tag',  INTERP_IDENT_RE + '%?', 0), // '%' for more consistent coloring of @keyframes "tags"
       IDENT_MODE('selector-id', '#' + INTERP_IDENT_RE),
       IDENT_MODE('selector-class', '\\.' + INTERP_IDENT_RE, 0),
       IDENT_MODE('selector-tag',  '&', 0),
-      css_shared.ATTRIBUTE_SELECTOR_MODE,
+      modes.ATTRIBUTE_SELECTOR_MODE,
       {
         className: 'selector-pseudo',
-        begin: ':(' + css_shared.PSEUDO_CLASSES.join('|') + ')'
+        begin: ':(' + css.PSEUDO_CLASSES.join('|') + ')'
       },
       {
         className: 'selector-pseudo',
-        begin: '::(' + css_shared.PSEUDO_ELEMENTS.join('|') + ')'
+        begin: '::(' + css.PSEUDO_ELEMENTS.join('|') + ')'
       },
       {begin: '\\(', end: '\\)', contains: VALUE_WITH_RULESETS}, // argument list of parametric mixins
       {begin: '!important'} // eat !important after mixin call or it will be colored as tag

diff --git a/src/languages/lib/css-shared.js b/src/languages/lib/css-shared.js
@@ -1,14 +1,24 @@
-import * as modes from '../../lib/modes.js';
-
-export const ATTRIBUTE_SELECTOR_MODE = {
-  className: 'selector-attr',
-  begin: /\[/,
-  end: /\]/,
-  illegal: '$',
-  contains: [
-    modes.APOS_STRING_MODE,
-    modes.QUOTE_STRING_MODE
-  ]
+export const MODES = (hljs) => {
+  return {
+    IMPORTANT: {
+      className: 'meta',
+      begin: '!important'
+    },
+    HEXCOLOR: {
+      className: 'number',
+      begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
+    },
+    ATTRIBUTE_SELECTOR_MODE: {
+      className: 'selector-attr',
+      begin: /\[/,
+      end: /\]/,
+      illegal: '$',
+      contains: [
+        hljs.APOS_STRING_MODE,
+        hljs.QUOTE_STRING_MODE
+      ]
+    }
+  };
 };
 
 export const TAGS = [

diff --git a/src/languages/scss.js b/src/languages/scss.js
@@ -6,12 +6,13 @@ Website: https://sass-lang.com
 Category: common, css
 */
 
-import * as css_shared from "./lib/css-shared.js";
+import * as css from "./lib/css-shared.js";
 
 /** @type LanguageFn */
 export default function(hljs) {
-  const PSEUDO_ELEMENTS = css_shared.PSEUDO_ELEMENTS;
-  const PSEUDO_CLASSES = css_shared.PSEUDO_CLASSES;
+  const modes = css.MODES(hljs);
+  const PSEUDO_ELEMENTS = css.PSEUDO_ELEMENTS;
+  const PSEUDO_CLASSES = css.PSEUDO_CLASSES;
 
   var AT_IDENTIFIER = '@[a-z-]+' // @font-face
   var AT_MODIFIERS = "and or not only"
@@ -20,28 +21,7 @@ export default function(hljs) {
     className: 'variable',
     begin: '(\\$' + IDENT_RE + ')\\b'
   };
-  var HEXCOLOR = {
-    className: 'number', begin: '#[0-9A-Fa-f]+'
-  };
-  var DEF_INTERNALS = {
-    className: 'attribute',
-    begin: '[A-Z\\_\\.\\-]+', end: ':',
-    excludeEnd: true,
-    illegal: '[^\\s]',
-    starts: {
-      endsWithParent: true, excludeEnd: true,
-      contains: [
-        HEXCOLOR,
-        hljs.CSS_NUMBER_MODE,
-        hljs.QUOTE_STRING_MODE,
-        hljs.APOS_STRING_MODE,
-        hljs.C_BLOCK_COMMENT_MODE,
-        {
-          className: 'meta', begin: '!important'
-        }
-      ]
-    }
-  };
+
   return {
     name: 'SCSS',
     case_insensitive: true,
@@ -57,10 +37,10 @@ export default function(hljs) {
         className: 'selector-class', begin: '\\.[A-Za-z0-9_-]+',
         relevance: 0
       },
-      css_shared.ATTRIBUTE_SELECTOR_MODE,
+      modes.ATTRIBUTE_SELECTOR_MODE,
       {
         className: 'selector-tag',
-        begin: '\\b(' + css_shared.TAGS.join('|') + ')\\b',
+        begin: '\\b(' + css.TAGS.join('|') + ')\\b',
         // was there, before, but why?
         relevance: 0
       },
@@ -80,7 +60,7 @@ export default function(hljs) {
       },
       {
         className: 'attribute',
-        begin: '\\b(' + css_shared.ATTRIBUTES.reverse().join('|') + ')\\b',
+        begin: '\\b(' + css.ATTRIBUTES.reverse().join('|') + ')\\b',
       },
       {
         begin: '\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b'
@@ -89,14 +69,11 @@ export default function(hljs) {
         begin: ':', end: ';',
         contains: [
           VARIABLE,
-          HEXCOLOR,
+          modes.HEXCOLOR,
           hljs.CSS_NUMBER_MODE,
           hljs.QUOTE_STRING_MODE,
           hljs.APOS_STRING_MODE,
-          {
-            className: 'meta',
-            begin: '!important'
-          }
+          modes.IMPORTANT
         ]
       },
       // matching these here allows us to treat them more like regular CSS
@@ -113,7 +90,7 @@ export default function(hljs) {
         keywords: {
           $pattern: /[a-z-]+/,
           keyword: AT_MODIFIERS,
-          attribute: css_shared.MEDIA_FEATURES.join(" ")
+          attribute: css.MEDIA_FEATURES.join(" ")
         },
         contains: [
           {
@@ -127,12 +104,8 @@ export default function(hljs) {
           VARIABLE,
           hljs.QUOTE_STRING_MODE,
           hljs.APOS_STRING_MODE,
-          HEXCOLOR,
+          modes.HEXCOLOR,
           hljs.CSS_NUMBER_MODE,
-          // {
-          //   begin: '\\s[A-Za-z0-9_.-]+',
-          //   relevance: 0
-          // }
         ]
       }
     ]