try to show applicable values in autocomplete for props

edit/autocomplete.js

@@ -2,6 +2,7 @@
 /* global cmFactory */
 /* global debounce */// toolbox.js
 /* global editor */
+/* global linterMan */
 /* global prefs */
 'use strict';
 
@@ -14,11 +15,17 @@
   const rxVAR = /(^|[^-.\w\u0080-\uFFFF])var\(/iyu;
   const rxCONSUME = /([-\w]*\s*:\s?)?/yu;
   const cssMime = CodeMirror.mimeModes['text/css'];
+  const cssGlobalValues = [
+    'inherit',
+    'initial',
+    'revert',
+    'unset',
+  ];
   const docFuncs = addSuffix(cssMime.documentTypes, '(');
   const {tokenHooks} = cssMime;
   const originalCommentHook = tokenHooks['/'];
   const originalHelper = CodeMirror.hint.css || (() => {});
-  let cssProps, cssMedia;
+  let cssMedia, cssProps, cssPropsValues;
 
   const aot = prefs.get('editor.autocompleteOnTyping');
   CodeMirror.defineOption('autocompleteOnTyping', aot, aotToggled);
@@ -34,7 +41,7 @@
     cm[value ? 'on' : 'off']('pick', autocompletePicked);
   }
 
-  function helper(cm) {
+  async function helper(cm) {
     const pos = cm.getCursor();
     const {line, ch} = pos;
     const {styles, text} = cm.getLineHandle(line);
@@ -64,7 +71,7 @@
     const str = text.slice(prev, end);
     const left = text.slice(prev, ch).trim();
     let leftLC = left.toLowerCase();
-    let list = [];
+    let list;
     switch (leftLC[0]) {
 
       case '!':
@@ -136,7 +143,23 @@
           list = state === 'atBlock_parens' ? cssMedia : cssProps;
           end -= /\W$/u.test(str); // e.g. don't consume ) when inside ()
           end += execAt(rxCONSUME, end, text)[0].length;
-        } else {
+
+        } else if (getTokenState() === 'prop') {
+          while (i > 0 && !/^prop(erty)?\b/.test(styles[i + 1])) i -= 2;
+          const propEnd = styles[i];
+          while (i > 0 && /^prop(erty)?\b/.test(styles[i + 1])) i -= 2;
+          const prop = text.slice(styles[i] || 0, propEnd).match(/([-\w]+)?$/u)[1];
+          if (prop) {
+            if (/[^-\w]/.test(leftLC)) {
+              prev += execAt(/[\s:()]*/y, prev, text)[0].length;
+              leftLC = '';
+            }
+            if (!cssPropsValues) cssPropsValues = await linterMan.worker.getCssPropsValues();
+            list = [...new Set([...cssPropsValues[prop] || [], ...cssGlobalValues])];
+            end = prev + execAt(/(\s*[-a-z(]+)?/y, prev, text)[0].length;
+          }
+        }
+        if (!list) {
           return isStylusLang
             ? CodeMirror.hint.fromList(cm, {words: CodeMirror.hintWords.stylus})
             : originalHelper(cm);

edit/editor-worker.js

@@ -16,6 +16,31 @@
         .map(m => Object.assign(m, {rule: {id: m.rule.id}}));
     },
 
+    getCssPropsValues() {
+      require(['/js/csslint/parserlib']); /* global parserlib */
+      const {css: {Colors, Properties}, util: {describeProp}} = parserlib;
+      const namedColors = Object.keys(Colors).join(' ');
+      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;
+      for (const [k, v] of Object.entries(Properties)) {
+        if (typeof v === 'string') {
+          let last = '';
+          const uniq = [];
+          const words = describeProp(v)
+            .replace('<named-color>', namedColors)
+            .split(rxNonWord)
+            .sort(comparator);
+          for (const word of words) {
+            if (word !== last) uniq.push(last = word);
+          }
+          if (uniq.length) res[k] = uniq;
+        }
+      }
+      return res;
+    },
+
     getRules(linter) {
       return ruleRetriever[linter](); // eslint-disable-line no-use-before-define
     },

js/csslint/parserlib.js

@@ -34,7 +34,7 @@ self.parserlib = (() => {
     'align-items': 'normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]',
     'align-content': '<align-content>',
     'align-self': '<align-self>',
-    'all': 'initial | inherit | unset',
+    'all': 'initial | inherit | revert | unset',
     'alignment-adjust': 'auto | baseline | before-edge | text-before-edge | middle | central | ' +
       'after-edge | text-after-edge | ideographic | alphabetic | hanging | ' +
       'mathematical | <length-pct>',
@@ -745,9 +745,9 @@ self.parserlib = (() => {
       'emoji | math | fangsong | ui-serif | ui-sans-serif | ui-monospace | ui-rounded',
     '<geometry-box>': '<shape-box> | fill-box | stroke-box | view-box',
     '<glyph-angle>': p => p.type === 'angle' && p.units === 'deg',
-    '<gradient>': p =>
-      p.type === 'function' &&
-      /^(?:-(?:webkit|moz|ms|o)-)?(?:repeating-)?(?:radial-|linear-|conic-)?gradient/i.test(p),
+    '<gradient>': 'radial-gradient() | linear-gradient() | conic-gradient() | gradient() | ' +
+      'repeating-radial-gradient() | repeating-linear-gradient() | repeating-conic-gradient() | ' +
+      'repeating-gradient()',
     '<hex-color>': p => p.tokenType === Tokens.HASH, //eslint-disable-line no-use-before-define
     '<icccolor>': 'cielab() | cielch() | cielchab() | icc-color() | icc-named-color()',
     '<ident>': vtIsIdent,
@@ -4647,6 +4647,7 @@ self.parserlib = (() => {
       Colors,
       Combinator,
       Parser,
+      Properties,
       PropertyName,
       PropertyValue,
       PropertyValuePart,
@@ -4662,12 +4663,13 @@ self.parserlib = (() => {
       ValidationError,
     },
     util: {
+      EventTarget,
       StringReader,
       SyntaxError,
       SyntaxUnit,
-      EventTarget,
       TokenStreamBase,
       rxVendorPrefix,
+      describeProp: vtExplode,
     },
     cache: parserCache,
   };