diff --git a/edit/autocomplete.js b/edit/autocomplete.js index 74aef528..29376ce9 100644 --- a/edit/autocomplete.js +++ b/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); diff --git a/edit/editor-worker.js b/edit/editor-worker.js index c1806014..e1cc6f98 100644 --- a/edit/editor-worker.js +++ b/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('', 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 }, diff --git a/js/csslint/parserlib.js b/js/csslint/parserlib.js index e48b08fa..7deac175 100644 --- a/js/csslint/parserlib.js +++ b/js/csslint/parserlib.js @@ -34,7 +34,7 @@ self.parserlib = (() => { 'align-items': 'normal | stretch | | [ ? ]', 'align-content': '', '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 | ', @@ -745,9 +745,9 @@ self.parserlib = (() => { 'emoji | math | fangsong | ui-serif | ui-sans-serif | ui-monospace | ui-rounded', '': ' | fill-box | stroke-box | view-box', '': p => p.type === 'angle' && p.units === 'deg', - '': p => - p.type === 'function' && - /^(?:-(?:webkit|moz|ms|o)-)?(?:repeating-)?(?:radial-|linear-|conic-)?gradient/i.test(p), + '': 'radial-gradient() | linear-gradient() | conic-gradient() | gradient() | ' + + 'repeating-radial-gradient() | repeating-linear-gradient() | repeating-conic-gradient() | ' + + 'repeating-gradient()', '': p => p.tokenType === Tokens.HASH, //eslint-disable-line no-use-before-define '': 'cielab() | cielch() | cielchab() | icc-color() | icc-named-color()', '': 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, };