fixup: group named colors, preserve letter case from spec

edit/editor-worker.js

@@ -19,23 +19,25 @@
     getCssPropsValues() {
       require(['/js/csslint/parserlib']); /* global parserlib */
       const {css: {Colors, Properties}, util: {describeProp}} = parserlib;
-      const namedColors = Object.keys(Colors).join(' ');
+      const namedColors = Object.keys(Colors);
       const rxNonWord = /(?:<.+?>|[^-\w<(]+\d*)+/g;
       const res = {};
       // moving vendor-prefixed props to the end
-      const comparator = (a, b) => a[0] === '-' && b[0] !== '-' ? 1 : a < b ? -1 : a > b;
+      const cmp = (a, b) => a[0] === '-' && b[0] !== '-' ? 1 : a < b ? -1 : a > b;
       for (const [k, v] of Object.entries(Properties)) {
         if (typeof v === 'string') {
           let last = '';
           const uniq = [];
-          const words = describeProp(v)
+          // strip definitions of function arguments
-            .replace(/\(.*?\)/g, '(')
+          const desc = describeProp(v).replace(/([-\w]+)\(.*?\)/g, 'z-$1');
-            .replace('<named-color>', namedColors)
+          const descNoColors = desc.replace(/<named-color>/g, '');
-            .split(rxNonWord)
+          // add a prefix to functions to group them at the end
-            .sort(comparator);
+          const words = descNoColors.split(rxNonWord).sort(cmp);
-          for (const word of words) {
+          for (let w of words) {
-            if (word !== last) uniq.push(last = word);
+            if (w.startsWith('z-')) w = w.slice(2) + '(';
+            if (w !== last) uniq.push(last = w);
           }
+          if (desc !== descNoColors) uniq.push(...namedColors);
           if (uniq.length) res[k] = uniq;
         }
       }

js/csslint/parserlib.js

@@ -778,7 +778,7 @@ self.parserlib = (() => {
     '<nonnegative-num-pct>': p =>
       p.value >= 0 && (p.type === 'number' || p.type === 'percentage') || p.isCalc,
     //eslint-disable-next-line no-use-before-define
-    '<named-color>': p => p.text in Colors || lower(p.text) in Colors,
+    '<named-color>': p => p.text in Colors || ColorsLC.has(lower(p.text)),
     '<number>': p => p.type === 'number' || p.isCalc,
     '<number-pct>': p => p.type === 'number' || p.type === 'percentage' || p.isCalc,
     '<opacity-value>': p => p.type === 'number' && p.value >= 0 && p.value <= 1 || p.isCalc,
@@ -979,7 +979,12 @@ self.parserlib = (() => {
   //#endregion
   //#region Colors
 
-  const Colors = {
+  const Colors = Object.assign(Object.create(null), {
+    // 'currentColor' color keyword
+    // https://www.w3.org/TR/css3-color/#currentcolor
+    currentColor:         '',
+    transparent:          '#0000',
+
     aliceblue:            '#f0f8ff',
     antiquewhite:         '#faebd7',
     aqua:                 '#00ffff',
@@ -1128,56 +1133,49 @@ self.parserlib = (() => {
     whitesmoke:           '#f5f5f5',
     yellow:               '#ffff00',
     yellowgreen:          '#9acd32',
-    // 'currentColor' color keyword
-    // https://www.w3.org/TR/css3-color/#currentcolor
-    currentcolor:         '',
-    transparent:          '#0000',
 
-    // CSS2 system colors
+    // old = CSS2 system colors: https://www.w3.org/TR/css3-color/#css2-system
-    // https://www.w3.org/TR/css3-color/#css2-system
+    // new = CSS4 system colors: https://drafts.csswg.org/css-color-4/#css-system-colors
-    activeborder: '',
+    ActiveBorder: '',
-    activecaption: '',
+    ActiveCaption: '',
-    appworkspace: '',
+    ActiveText: '', // new
-    background: '',
+    AppWorkspace: '',
-    buttonface: '',
+    Background: '',
-    buttonhighlight: '',
+    ButtonBorder: '', // new
-    buttonshadow: '',
+    ButtonFace: '', // old+new
-    buttontext: '',
+    ButtonHighlight: '',
-    captiontext: '',
+    ButtonShadow: '',
-    graytext: '',
+    ButtonText: '', // old+new
-    greytext: '',
+    Canvas: '', // new
-    highlight: '',
+    CanvasText: '', // new
-    highlighttext: '',
+    CaptionText: '',
-    inactiveborder: '',
+    Field: '', // new
-    inactivecaption: '',
+    FieldText: '', // new
-    inactivecaptiontext: '',
+    GrayText: '', // old+new
-    infobackground: '',
+    Highlight: '', // old+new
-    infotext: '',
+    HighlightText: '', // old+new
-    menu: '',
+    InactiveBorder: '',
-    menutext: '',
+    InactiveCaption: '',
-    scrollbar: '',
+    InactiveCaptionText: '',
-    threeddarkshadow: '',
+    InfoBackground: '',
-    threedface: '',
+    InfoText: '',
-    threedhighlight: '',
+    LinkText: '', // new
-    threedlightshadow: '',
+    Mark: '', // new
-    threedshadow: '',
+    MarkText: '', // new
-    window: '',
+    Menu: '',
-    windowframe: '',
+    MenuText: '',
-    windowtext: '',
+    Scrollbar: '',
-
+    ThreeDDarkShadow: '',
-    // CSS4 system colors, only additions to the above
+    ThreeDFace: '',
-    // https://drafts.csswg.org/css-color-4/#css-system-colors
+    ThreeDHighlight: '',
-    activetext: '',
+    ThreeDLightShadow: '',
-    buttonborder: '',
+    ThreeDShadow: '',
-    canvas: '',
+    VisitedText: '', // new
-    canvastext: '',
+    Window: '',
-    field: '',
+    WindowFrame: '',
-    fieldtext: '',
+    WindowText: '',
-    linktext: '',
+  });
-    mark: '',
+  const ColorsLC = new Set(Object.keys(Colors).map(lower));
-    marktext: '',
-    visitedtext: '',
-  };
 
   //#endregion
   //#region Tokens