vscode-css-languageservice 5.4.2 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/SECURITY.md +41 -0
- package/lib/esm/beautify/beautify-css.js +11 -4
- package/lib/esm/cssLanguageService.d.ts +2 -1
- package/lib/esm/cssLanguageService.js +15 -17
- package/lib/esm/cssLanguageTypes.js +2 -2
- package/lib/esm/data/webCustomData.js +356 -232
- package/lib/esm/languageFacts/builtinData.js +15 -15
- package/lib/esm/languageFacts/colors.js +66 -69
- package/lib/esm/languageFacts/dataManager.js +38 -42
- package/lib/esm/languageFacts/dataProvider.js +17 -23
- package/lib/esm/languageFacts/entry.js +22 -23
- package/lib/esm/parser/cssErrors.js +5 -7
- package/lib/esm/parser/cssNodes.js +869 -1377
- package/lib/esm/parser/cssParser.js +419 -376
- package/lib/esm/parser/cssScanner.js +168 -175
- package/lib/esm/parser/cssSymbolScope.js +107 -137
- package/lib/esm/parser/lessParser.js +177 -202
- package/lib/esm/parser/lessScanner.js +22 -43
- package/lib/esm/parser/scssErrors.js +5 -7
- package/lib/esm/parser/scssParser.js +196 -208
- package/lib/esm/parser/scssScanner.js +33 -54
- package/lib/esm/services/cssCodeActions.js +36 -40
- package/lib/esm/services/cssCompletion.js +300 -395
- package/lib/esm/services/cssFolding.js +32 -35
- package/lib/esm/services/cssFormatter.js +22 -22
- package/lib/esm/services/cssHover.js +30 -33
- package/lib/esm/services/cssNavigation.js +260 -289
- package/lib/esm/services/cssSelectionRange.js +6 -6
- package/lib/esm/services/cssValidation.js +13 -16
- package/lib/esm/services/lessCompletion.js +351 -370
- package/lib/esm/services/lint.js +161 -175
- package/lib/esm/services/lintRules.js +20 -27
- package/lib/esm/services/lintUtil.js +19 -28
- package/lib/esm/services/pathCompletion.js +84 -158
- package/lib/esm/services/scssCompletion.js +283 -307
- package/lib/esm/services/scssNavigation.js +65 -137
- package/lib/esm/services/selectorPrinting.js +131 -175
- package/lib/esm/utils/arrays.js +6 -12
- package/lib/esm/utils/objects.js +1 -1
- package/lib/esm/utils/resources.js +3 -16
- package/lib/esm/utils/strings.js +10 -12
- package/lib/umd/beautify/beautify-css.js +11 -4
- package/lib/umd/cssLanguageService.d.ts +2 -1
- package/lib/umd/cssLanguageService.js +34 -32
- package/lib/umd/cssLanguageTypes.js +4 -3
- package/lib/umd/data/webCustomData.js +355 -231
- package/lib/umd/languageFacts/colors.js +65 -68
- package/lib/umd/languageFacts/dataManager.js +41 -44
- package/lib/umd/languageFacts/dataProvider.js +17 -22
- package/lib/umd/languageFacts/entry.js +22 -23
- package/lib/umd/languageFacts/facts.js +5 -1
- package/lib/umd/parser/cssErrors.js +5 -6
- package/lib/umd/parser/cssNodes.js +870 -1307
- package/lib/umd/parser/cssParser.js +424 -380
- package/lib/umd/parser/cssScanner.js +168 -173
- package/lib/umd/parser/cssSymbolScope.js +109 -134
- package/lib/umd/parser/lessParser.js +182 -206
- package/lib/umd/parser/lessScanner.js +22 -42
- package/lib/umd/parser/scssErrors.js +5 -6
- package/lib/umd/parser/scssParser.js +202 -213
- package/lib/umd/parser/scssScanner.js +25 -45
- package/lib/umd/services/cssCodeActions.js +41 -44
- package/lib/umd/services/cssCompletion.js +308 -402
- package/lib/umd/services/cssFolding.js +35 -38
- package/lib/umd/services/cssFormatter.js +25 -25
- package/lib/umd/services/cssHover.js +36 -38
- package/lib/umd/services/cssNavigation.js +267 -295
- package/lib/umd/services/cssSelectionRange.js +8 -8
- package/lib/umd/services/cssValidation.js +17 -19
- package/lib/umd/services/lessCompletion.js +354 -372
- package/lib/umd/services/lint.js +167 -180
- package/lib/umd/services/lintRules.js +20 -24
- package/lib/umd/services/lintUtil.js +20 -28
- package/lib/umd/services/pathCompletion.js +87 -160
- package/lib/umd/services/scssCompletion.js +287 -310
- package/lib/umd/services/scssNavigation.js +69 -140
- package/lib/umd/services/selectorPrinting.js +134 -174
- package/lib/umd/utils/arrays.js +6 -12
- package/lib/umd/utils/objects.js +1 -1
- package/lib/umd/utils/resources.js +4 -17
- package/lib/umd/utils/strings.js +10 -12
- package/package.json +16 -15
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
'use strict';
|
|
6
|
-
export
|
|
6
|
+
export const positionKeywords = {
|
|
7
7
|
'bottom': 'Computes to ‘100%’ for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.',
|
|
8
8
|
'center': 'Computes to ‘50%’ (‘left 50%’) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (‘top 50%’) for the vertical position if it is.',
|
|
9
9
|
'left': 'Computes to ‘0%’ for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.',
|
|
10
10
|
'right': 'Computes to ‘100%’ for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.',
|
|
11
11
|
'top': 'Computes to ‘0%’ for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.'
|
|
12
12
|
};
|
|
13
|
-
export
|
|
13
|
+
export const repeatStyleKeywords = {
|
|
14
14
|
'no-repeat': 'Placed once and not repeated in this direction.',
|
|
15
15
|
'repeat': 'Repeated in this direction as often as needed to cover the background painting area.',
|
|
16
16
|
'repeat-x': 'Computes to ‘repeat no-repeat’.',
|
|
@@ -18,7 +18,7 @@ export var repeatStyleKeywords = {
|
|
|
18
18
|
'round': 'Repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.',
|
|
19
19
|
'space': 'Repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.'
|
|
20
20
|
};
|
|
21
|
-
export
|
|
21
|
+
export const lineStyleKeywords = {
|
|
22
22
|
'dashed': 'A series of square-ended dashes.',
|
|
23
23
|
'dotted': 'A series of round dots.',
|
|
24
24
|
'double': 'Two parallel solid lines with some space between them.',
|
|
@@ -30,28 +30,28 @@ export var lineStyleKeywords = {
|
|
|
30
30
|
'ridge': 'Looks as if it were coming out of the canvas.',
|
|
31
31
|
'solid': 'A single line segment.'
|
|
32
32
|
};
|
|
33
|
-
export
|
|
34
|
-
export
|
|
33
|
+
export const lineWidthKeywords = ['medium', 'thick', 'thin'];
|
|
34
|
+
export const boxKeywords = {
|
|
35
35
|
'border-box': 'The background is painted within (clipped to) the border box.',
|
|
36
36
|
'content-box': 'The background is painted within (clipped to) the content box.',
|
|
37
37
|
'padding-box': 'The background is painted within (clipped to) the padding box.'
|
|
38
38
|
};
|
|
39
|
-
export
|
|
39
|
+
export const geometryBoxKeywords = {
|
|
40
40
|
'margin-box': 'Uses the margin box as reference box.',
|
|
41
41
|
'fill-box': 'Uses the object bounding box as reference box.',
|
|
42
42
|
'stroke-box': 'Uses the stroke bounding box as reference box.',
|
|
43
43
|
'view-box': 'Uses the nearest SVG viewport as reference box.'
|
|
44
44
|
};
|
|
45
|
-
export
|
|
45
|
+
export const cssWideKeywords = {
|
|
46
46
|
'initial': 'Represents the value specified as the property’s initial value.',
|
|
47
47
|
'inherit': 'Represents the computed value of the property on the element’s parent.',
|
|
48
48
|
'unset': 'Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.'
|
|
49
49
|
};
|
|
50
|
-
export
|
|
50
|
+
export const cssWideFunctions = {
|
|
51
51
|
'var()': 'Evaluates the value of a custom variable.',
|
|
52
52
|
'calc()': 'Evaluates an mathematical expression. The following operators can be used: + - * /.'
|
|
53
53
|
};
|
|
54
|
-
export
|
|
54
|
+
export const imageFunctions = {
|
|
55
55
|
'url()': 'Reference an image file by URL',
|
|
56
56
|
'image()': 'Provide image fallbacks and annotations.',
|
|
57
57
|
'-webkit-image-set()': 'Provide multiple resolutions. Remember to use unprefixed image-set() in addition.',
|
|
@@ -75,7 +75,7 @@ export var imageFunctions = {
|
|
|
75
75
|
'-moz-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.',
|
|
76
76
|
'repeating-radial-gradient()': 'Same as radial-gradient, except the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.'
|
|
77
77
|
};
|
|
78
|
-
export
|
|
78
|
+
export const transitionTimingFunctions = {
|
|
79
79
|
'ease': 'Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).',
|
|
80
80
|
'ease-in': 'Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).',
|
|
81
81
|
'ease-in-out': 'Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).',
|
|
@@ -110,13 +110,13 @@ export var transitionTimingFunctions = {
|
|
|
110
110
|
'cubic-bezier(0.86, 0, 0.07, 1)': 'Ease-in-out Quintic. Based on power of five.',
|
|
111
111
|
'cubic-bezier(0.23, 1, 0.320, 1)': 'Ease-out Quintic. Based on power of five.'
|
|
112
112
|
};
|
|
113
|
-
export
|
|
113
|
+
export const basicShapeFunctions = {
|
|
114
114
|
'circle()': 'Defines a circle.',
|
|
115
115
|
'ellipse()': 'Defines an ellipse.',
|
|
116
116
|
'inset()': 'Defines an inset rectangle.',
|
|
117
117
|
'polygon()': 'Defines a polygon.'
|
|
118
118
|
};
|
|
119
|
-
export
|
|
119
|
+
export const units = {
|
|
120
120
|
'length': ['em', 'rem', 'ex', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vw', 'vh', 'vmin', 'vmax'],
|
|
121
121
|
'angle': ['deg', 'rad', 'grad', 'turn'],
|
|
122
122
|
'time': ['ms', 's'],
|
|
@@ -124,18 +124,18 @@ export var units = {
|
|
|
124
124
|
'resolution': ['dpi', 'dpcm', 'dppx'],
|
|
125
125
|
'percentage': ['%', 'fr']
|
|
126
126
|
};
|
|
127
|
-
export
|
|
127
|
+
export const html5Tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption',
|
|
128
128
|
'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer',
|
|
129
129
|
'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link',
|
|
130
130
|
'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q',
|
|
131
131
|
'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td',
|
|
132
132
|
'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'const', 'video', 'wbr'];
|
|
133
|
-
export
|
|
133
|
+
export const svgElements = ['circle', 'clipPath', 'cursor', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
|
|
134
134
|
'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
|
|
135
135
|
'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'hatch', 'hatchpath', 'image', 'line', 'linearGradient',
|
|
136
136
|
'marker', 'mask', 'mesh', 'meshpatch', 'meshrow', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'solidcolor', 'stop', 'svg', 'switch',
|
|
137
137
|
'symbol', 'text', 'textPath', 'tspan', 'use', 'view'];
|
|
138
|
-
export
|
|
138
|
+
export const pageBoxDirectives = [
|
|
139
139
|
'@bottom-center', '@bottom-left', '@bottom-left-corner', '@bottom-right', '@bottom-right-corner',
|
|
140
140
|
'@left-bottom', '@left-middle', '@left-top', '@right-bottom', '@right-middle', '@right-top',
|
|
141
141
|
'@top-center', '@top-left', '@top-left-corner', '@top-right', '@top-right-corner'
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as nodes from '../parser/cssNodes';
|
|
6
6
|
import * as nls from 'vscode-nls';
|
|
7
|
-
|
|
8
|
-
export
|
|
7
|
+
const localize = nls.loadMessageBundle();
|
|
8
|
+
export const colorFunctions = [
|
|
9
9
|
{ func: 'rgb($red, $green, $blue)', desc: localize('css.builtin.rgb', 'Creates a Color from red, green, and blue values.') },
|
|
10
10
|
{ func: 'rgba($red, $green, $blue, $alpha)', desc: localize('css.builtin.rgba', 'Creates a Color from red, green, blue, and alpha values.') },
|
|
11
11
|
{ func: 'hsl($hue, $saturation, $lightness)', desc: localize('css.builtin.hsl', 'Creates a Color from hue, saturation, and lightness values.') },
|
|
12
12
|
{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') },
|
|
13
13
|
{ func: 'hwb($hue $white $black)', desc: localize('css.builtin.hwb', 'Creates a Color from hue, white and black.') }
|
|
14
14
|
];
|
|
15
|
-
export
|
|
15
|
+
export const colors = {
|
|
16
16
|
aliceblue: '#f0f8ff',
|
|
17
17
|
antiquewhite: '#faebd7',
|
|
18
18
|
aqua: '#00ffff',
|
|
@@ -162,18 +162,18 @@ export var colors = {
|
|
|
162
162
|
yellow: '#ffff00',
|
|
163
163
|
yellowgreen: '#9acd32'
|
|
164
164
|
};
|
|
165
|
-
export
|
|
165
|
+
export const colorKeywords = {
|
|
166
166
|
'currentColor': 'The value of the \'color\' property. The computed value of the \'currentColor\' keyword is the computed value of the \'color\' property. If the \'currentColor\' keyword is set on the \'color\' property itself, it is treated as \'color:inherit\' at parse time.',
|
|
167
167
|
'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.',
|
|
168
168
|
};
|
|
169
169
|
function getNumericValue(node, factor) {
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
const val = node.getText();
|
|
171
|
+
const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
|
|
172
172
|
if (m) {
|
|
173
173
|
if (m[2]) {
|
|
174
174
|
factor = 100.0;
|
|
175
175
|
}
|
|
176
|
-
|
|
176
|
+
const result = parseFloat(m[1]) / factor;
|
|
177
177
|
if (result >= 0 && result <= 1) {
|
|
178
178
|
return result;
|
|
179
179
|
}
|
|
@@ -181,8 +181,8 @@ function getNumericValue(node, factor) {
|
|
|
181
181
|
throw new Error();
|
|
182
182
|
}
|
|
183
183
|
function getAngle(node) {
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
const val = node.getText();
|
|
185
|
+
const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(deg|rad|grad|turn)?$/);
|
|
186
186
|
if (m) {
|
|
187
187
|
switch (m[2]) {
|
|
188
188
|
case 'deg':
|
|
@@ -202,7 +202,7 @@ function getAngle(node) {
|
|
|
202
202
|
throw new Error();
|
|
203
203
|
}
|
|
204
204
|
export function isColorConstructor(node) {
|
|
205
|
-
|
|
205
|
+
const name = node.getName();
|
|
206
206
|
if (!name) {
|
|
207
207
|
return false;
|
|
208
208
|
}
|
|
@@ -224,7 +224,7 @@ export function isColorValue(node) {
|
|
|
224
224
|
if (node.parent && node.parent.type !== nodes.NodeType.Term) {
|
|
225
225
|
return false;
|
|
226
226
|
}
|
|
227
|
-
|
|
227
|
+
const candidateColor = node.getText().toLowerCase();
|
|
228
228
|
if (candidateColor === 'none') {
|
|
229
229
|
return false;
|
|
230
230
|
}
|
|
@@ -234,12 +234,12 @@ export function isColorValue(node) {
|
|
|
234
234
|
}
|
|
235
235
|
return false;
|
|
236
236
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
237
|
+
const Digit0 = 48;
|
|
238
|
+
const Digit9 = 57;
|
|
239
|
+
const A = 65;
|
|
240
|
+
const F = 70;
|
|
241
|
+
const a = 97;
|
|
242
|
+
const f = 102;
|
|
243
243
|
export function hexDigit(charCode) {
|
|
244
244
|
if (charCode < Digit0) {
|
|
245
245
|
return 0;
|
|
@@ -291,23 +291,21 @@ export function colorFromHex(text) {
|
|
|
291
291
|
}
|
|
292
292
|
return null;
|
|
293
293
|
}
|
|
294
|
-
export function colorFrom256RGB(red, green, blue, alpha) {
|
|
295
|
-
if (alpha === void 0) { alpha = 1.0; }
|
|
294
|
+
export function colorFrom256RGB(red, green, blue, alpha = 1.0) {
|
|
296
295
|
return {
|
|
297
296
|
red: red / 255.0,
|
|
298
297
|
green: green / 255.0,
|
|
299
298
|
blue: blue / 255.0,
|
|
300
|
-
alpha
|
|
299
|
+
alpha
|
|
301
300
|
};
|
|
302
301
|
}
|
|
303
|
-
export function colorFromHSL(hue, sat, light, alpha) {
|
|
304
|
-
if (alpha === void 0) { alpha = 1.0; }
|
|
302
|
+
export function colorFromHSL(hue, sat, light, alpha = 1.0) {
|
|
305
303
|
hue = hue / 60.0;
|
|
306
304
|
if (sat === 0) {
|
|
307
|
-
return { red: light, green: light, blue: light, alpha
|
|
305
|
+
return { red: light, green: light, blue: light, alpha };
|
|
308
306
|
}
|
|
309
307
|
else {
|
|
310
|
-
|
|
308
|
+
const hueToRgb = (t1, t2, hue) => {
|
|
311
309
|
while (hue < 0) {
|
|
312
310
|
hue += 6;
|
|
313
311
|
}
|
|
@@ -325,22 +323,22 @@ export function colorFromHSL(hue, sat, light, alpha) {
|
|
|
325
323
|
}
|
|
326
324
|
return t1;
|
|
327
325
|
};
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
return { red: hueToRgb(t1, t2, hue + 2), green: hueToRgb(t1, t2, hue), blue: hueToRgb(t1, t2, hue - 2), alpha
|
|
326
|
+
const t2 = light <= 0.5 ? (light * (sat + 1)) : (light + sat - (light * sat));
|
|
327
|
+
const t1 = light * 2 - t2;
|
|
328
|
+
return { red: hueToRgb(t1, t2, hue + 2), green: hueToRgb(t1, t2, hue), blue: hueToRgb(t1, t2, hue - 2), alpha };
|
|
331
329
|
}
|
|
332
330
|
}
|
|
333
331
|
export function hslFromColor(rgba) {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
332
|
+
const r = rgba.red;
|
|
333
|
+
const g = rgba.green;
|
|
334
|
+
const b = rgba.blue;
|
|
335
|
+
const a = rgba.alpha;
|
|
336
|
+
const max = Math.max(r, g, b);
|
|
337
|
+
const min = Math.min(r, g, b);
|
|
338
|
+
let h = 0;
|
|
339
|
+
let s = 0;
|
|
340
|
+
const l = (min + max) / 2;
|
|
341
|
+
const chroma = max - min;
|
|
344
342
|
if (chroma > 0) {
|
|
345
343
|
s = Math.min((l <= 0.5 ? chroma / (2 * l) : chroma / (2 - (2 * l))), 1);
|
|
346
344
|
switch (max) {
|
|
@@ -357,35 +355,34 @@ export function hslFromColor(rgba) {
|
|
|
357
355
|
h *= 60;
|
|
358
356
|
h = Math.round(h);
|
|
359
357
|
}
|
|
360
|
-
return { h
|
|
358
|
+
return { h, s, l, a };
|
|
361
359
|
}
|
|
362
|
-
export function colorFromHWB(hue, white, black, alpha) {
|
|
363
|
-
if (alpha === void 0) { alpha = 1.0; }
|
|
360
|
+
export function colorFromHWB(hue, white, black, alpha = 1.0) {
|
|
364
361
|
if (white + black >= 1) {
|
|
365
|
-
|
|
366
|
-
return { red: gray, green: gray, blue: gray, alpha
|
|
362
|
+
const gray = white / (white + black);
|
|
363
|
+
return { red: gray, green: gray, blue: gray, alpha };
|
|
367
364
|
}
|
|
368
|
-
|
|
369
|
-
|
|
365
|
+
const rgb = colorFromHSL(hue, 1, 0.5, alpha);
|
|
366
|
+
let red = rgb.red;
|
|
370
367
|
red *= (1 - white - black);
|
|
371
368
|
red += white;
|
|
372
|
-
|
|
369
|
+
let green = rgb.green;
|
|
373
370
|
green *= (1 - white - black);
|
|
374
371
|
green += white;
|
|
375
|
-
|
|
372
|
+
let blue = rgb.blue;
|
|
376
373
|
blue *= (1 - white - black);
|
|
377
374
|
blue += white;
|
|
378
375
|
return {
|
|
379
376
|
red: red,
|
|
380
377
|
green: green,
|
|
381
378
|
blue: blue,
|
|
382
|
-
alpha
|
|
379
|
+
alpha
|
|
383
380
|
};
|
|
384
381
|
}
|
|
385
382
|
export function hwbFromColor(rgba) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
383
|
+
const hsl = hslFromColor(rgba);
|
|
384
|
+
const white = Math.min(rgba.red, rgba.green, rgba.blue);
|
|
385
|
+
const black = 1 - Math.max(rgba.red, rgba.green, rgba.blue);
|
|
389
386
|
return {
|
|
390
387
|
h: hsl.h,
|
|
391
388
|
w: white,
|
|
@@ -395,21 +392,21 @@ export function hwbFromColor(rgba) {
|
|
|
395
392
|
}
|
|
396
393
|
export function getColorValue(node) {
|
|
397
394
|
if (node.type === nodes.NodeType.HexColorValue) {
|
|
398
|
-
|
|
395
|
+
const text = node.getText();
|
|
399
396
|
return colorFromHex(text);
|
|
400
397
|
}
|
|
401
398
|
else if (node.type === nodes.NodeType.Function) {
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
399
|
+
const functionNode = node;
|
|
400
|
+
const name = functionNode.getName();
|
|
401
|
+
let colorValues = functionNode.getArguments().getChildren();
|
|
405
402
|
if (colorValues.length === 1) {
|
|
406
|
-
|
|
403
|
+
const functionArg = colorValues[0].getChildren();
|
|
407
404
|
if (functionArg.length === 1 && functionArg[0].type === nodes.NodeType.Expression) {
|
|
408
405
|
colorValues = functionArg[0].getChildren();
|
|
409
406
|
if (colorValues.length === 3) {
|
|
410
|
-
|
|
407
|
+
const lastValue = colorValues[2];
|
|
411
408
|
if (lastValue instanceof nodes.BinaryExpression) {
|
|
412
|
-
|
|
409
|
+
const left = lastValue.getLeft(), right = lastValue.getRight(), operator = lastValue.getOperator();
|
|
413
410
|
if (left && right && operator && operator.matches('/')) {
|
|
414
411
|
colorValues = [colorValues[0], colorValues[1], left, right];
|
|
415
412
|
}
|
|
@@ -421,25 +418,25 @@ export function getColorValue(node) {
|
|
|
421
418
|
return null;
|
|
422
419
|
}
|
|
423
420
|
try {
|
|
424
|
-
|
|
421
|
+
const alpha = colorValues.length === 4 ? getNumericValue(colorValues[3], 1) : 1;
|
|
425
422
|
if (name === 'rgb' || name === 'rgba') {
|
|
426
423
|
return {
|
|
427
424
|
red: getNumericValue(colorValues[0], 255.0),
|
|
428
425
|
green: getNumericValue(colorValues[1], 255.0),
|
|
429
426
|
blue: getNumericValue(colorValues[2], 255.0),
|
|
430
|
-
alpha
|
|
427
|
+
alpha
|
|
431
428
|
};
|
|
432
429
|
}
|
|
433
430
|
else if (name === 'hsl' || name === 'hsla') {
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
431
|
+
const h = getAngle(colorValues[0]);
|
|
432
|
+
const s = getNumericValue(colorValues[1], 100.0);
|
|
433
|
+
const l = getNumericValue(colorValues[2], 100.0);
|
|
437
434
|
return colorFromHSL(h, s, l, alpha);
|
|
438
435
|
}
|
|
439
436
|
else if (name === 'hwb') {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
437
|
+
const h = getAngle(colorValues[0]);
|
|
438
|
+
const w = getNumericValue(colorValues[1], 100.0);
|
|
439
|
+
const b = getNumericValue(colorValues[2], 100.0);
|
|
443
440
|
return colorFromHWB(h, w, b, alpha);
|
|
444
441
|
}
|
|
445
442
|
}
|
|
@@ -452,18 +449,18 @@ export function getColorValue(node) {
|
|
|
452
449
|
if (node.parent && node.parent.type !== nodes.NodeType.Term) {
|
|
453
450
|
return null;
|
|
454
451
|
}
|
|
455
|
-
|
|
452
|
+
const term = node.parent;
|
|
456
453
|
if (term && term.parent && term.parent.type === nodes.NodeType.BinaryExpression) {
|
|
457
|
-
|
|
454
|
+
const expression = term.parent;
|
|
458
455
|
if (expression.parent && expression.parent.type === nodes.NodeType.ListEntry && expression.parent.key === expression) {
|
|
459
456
|
return null;
|
|
460
457
|
}
|
|
461
458
|
}
|
|
462
|
-
|
|
459
|
+
const candidateColor = node.getText().toLowerCase();
|
|
463
460
|
if (candidateColor === 'none') {
|
|
464
461
|
return null;
|
|
465
462
|
}
|
|
466
|
-
|
|
463
|
+
const colorHex = colors[candidateColor];
|
|
467
464
|
if (colorHex) {
|
|
468
465
|
return colorFromHex(colorHex);
|
|
469
466
|
}
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
import * as objects from '../utils/objects';
|
|
7
7
|
import { cssData } from '../data/webCustomData';
|
|
8
8
|
import { CSSDataProvider } from './dataProvider';
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
export class CSSDataManager {
|
|
10
|
+
constructor(options) {
|
|
11
11
|
this.dataProviders = [];
|
|
12
12
|
this._propertySet = {};
|
|
13
13
|
this._atDirectiveSet = {};
|
|
@@ -17,45 +17,43 @@ var CSSDataManager = /** @class */ (function () {
|
|
|
17
17
|
this._atDirectives = [];
|
|
18
18
|
this._pseudoClasses = [];
|
|
19
19
|
this._pseudoElements = [];
|
|
20
|
-
this.setDataProviders(
|
|
20
|
+
this.setDataProviders(options?.useDefaultDataProvider !== false, options?.customDataProviders || []);
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
var _a;
|
|
22
|
+
setDataProviders(builtIn, providers) {
|
|
24
23
|
this.dataProviders = [];
|
|
25
24
|
if (builtIn) {
|
|
26
25
|
this.dataProviders.push(new CSSDataProvider(cssData));
|
|
27
26
|
}
|
|
28
|
-
|
|
27
|
+
this.dataProviders.push(...providers);
|
|
29
28
|
this.collectData();
|
|
30
|
-
}
|
|
29
|
+
}
|
|
31
30
|
/**
|
|
32
31
|
* Collect all data & handle duplicates
|
|
33
32
|
*/
|
|
34
|
-
|
|
35
|
-
var _this = this;
|
|
33
|
+
collectData() {
|
|
36
34
|
this._propertySet = {};
|
|
37
35
|
this._atDirectiveSet = {};
|
|
38
36
|
this._pseudoClassSet = {};
|
|
39
37
|
this._pseudoElementSet = {};
|
|
40
|
-
this.dataProviders.forEach(
|
|
41
|
-
provider.provideProperties().forEach(
|
|
42
|
-
if (!
|
|
43
|
-
|
|
38
|
+
this.dataProviders.forEach(provider => {
|
|
39
|
+
provider.provideProperties().forEach(p => {
|
|
40
|
+
if (!this._propertySet[p.name]) {
|
|
41
|
+
this._propertySet[p.name] = p;
|
|
44
42
|
}
|
|
45
43
|
});
|
|
46
|
-
provider.provideAtDirectives().forEach(
|
|
47
|
-
if (!
|
|
48
|
-
|
|
44
|
+
provider.provideAtDirectives().forEach(p => {
|
|
45
|
+
if (!this._atDirectiveSet[p.name]) {
|
|
46
|
+
this._atDirectiveSet[p.name] = p;
|
|
49
47
|
}
|
|
50
48
|
});
|
|
51
|
-
provider.providePseudoClasses().forEach(
|
|
52
|
-
if (!
|
|
53
|
-
|
|
49
|
+
provider.providePseudoClasses().forEach(p => {
|
|
50
|
+
if (!this._pseudoClassSet[p.name]) {
|
|
51
|
+
this._pseudoClassSet[p.name] = p;
|
|
54
52
|
}
|
|
55
53
|
});
|
|
56
|
-
provider.providePseudoElements().forEach(
|
|
57
|
-
if (!
|
|
58
|
-
|
|
54
|
+
provider.providePseudoElements().forEach(p => {
|
|
55
|
+
if (!this._pseudoElementSet[p.name]) {
|
|
56
|
+
this._pseudoElementSet[p.name] = p;
|
|
59
57
|
}
|
|
60
58
|
});
|
|
61
59
|
});
|
|
@@ -63,30 +61,28 @@ var CSSDataManager = /** @class */ (function () {
|
|
|
63
61
|
this._atDirectives = objects.values(this._atDirectiveSet);
|
|
64
62
|
this._pseudoClasses = objects.values(this._pseudoClassSet);
|
|
65
63
|
this._pseudoElements = objects.values(this._pseudoElementSet);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
64
|
+
}
|
|
65
|
+
getProperty(name) { return this._propertySet[name]; }
|
|
66
|
+
getAtDirective(name) { return this._atDirectiveSet[name]; }
|
|
67
|
+
getPseudoClass(name) { return this._pseudoClassSet[name]; }
|
|
68
|
+
getPseudoElement(name) { return this._pseudoElementSet[name]; }
|
|
69
|
+
getProperties() {
|
|
72
70
|
return this._properties;
|
|
73
|
-
}
|
|
74
|
-
|
|
71
|
+
}
|
|
72
|
+
getAtDirectives() {
|
|
75
73
|
return this._atDirectives;
|
|
76
|
-
}
|
|
77
|
-
|
|
74
|
+
}
|
|
75
|
+
getPseudoClasses() {
|
|
78
76
|
return this._pseudoClasses;
|
|
79
|
-
}
|
|
80
|
-
|
|
77
|
+
}
|
|
78
|
+
getPseudoElements() {
|
|
81
79
|
return this._pseudoElements;
|
|
82
|
-
}
|
|
83
|
-
|
|
80
|
+
}
|
|
81
|
+
isKnownProperty(name) {
|
|
84
82
|
return name.toLowerCase() in this._propertySet;
|
|
85
|
-
}
|
|
86
|
-
|
|
83
|
+
}
|
|
84
|
+
isStandardProperty(name) {
|
|
87
85
|
return this.isKnownProperty(name) &&
|
|
88
86
|
(!this._propertySet[name.toLowerCase()].status || this._propertySet[name.toLowerCase()].status === 'standard');
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
}());
|
|
92
|
-
export { CSSDataManager };
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -3,68 +3,62 @@
|
|
|
3
3
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
'use strict';
|
|
6
|
-
|
|
6
|
+
export class CSSDataProvider {
|
|
7
7
|
/**
|
|
8
8
|
* Currently, unversioned data uses the V1 implementation
|
|
9
9
|
* In the future when the provider handles multiple versions of HTML custom data,
|
|
10
10
|
* use the latest implementation for unversioned data
|
|
11
11
|
*/
|
|
12
|
-
|
|
12
|
+
constructor(data) {
|
|
13
13
|
this._properties = [];
|
|
14
14
|
this._atDirectives = [];
|
|
15
15
|
this._pseudoClasses = [];
|
|
16
16
|
this._pseudoElements = [];
|
|
17
17
|
this.addData(data);
|
|
18
18
|
}
|
|
19
|
-
|
|
19
|
+
provideProperties() {
|
|
20
20
|
return this._properties;
|
|
21
|
-
}
|
|
22
|
-
|
|
21
|
+
}
|
|
22
|
+
provideAtDirectives() {
|
|
23
23
|
return this._atDirectives;
|
|
24
|
-
}
|
|
25
|
-
|
|
24
|
+
}
|
|
25
|
+
providePseudoClasses() {
|
|
26
26
|
return this._pseudoClasses;
|
|
27
|
-
}
|
|
28
|
-
|
|
27
|
+
}
|
|
28
|
+
providePseudoElements() {
|
|
29
29
|
return this._pseudoElements;
|
|
30
|
-
}
|
|
31
|
-
|
|
30
|
+
}
|
|
31
|
+
addData(data) {
|
|
32
32
|
if (Array.isArray(data.properties)) {
|
|
33
|
-
for (
|
|
34
|
-
var prop = _a[_i];
|
|
33
|
+
for (const prop of data.properties) {
|
|
35
34
|
if (isPropertyData(prop)) {
|
|
36
35
|
this._properties.push(prop);
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
if (Array.isArray(data.atDirectives)) {
|
|
41
|
-
for (
|
|
42
|
-
var prop = _c[_b];
|
|
40
|
+
for (const prop of data.atDirectives) {
|
|
43
41
|
if (isAtDirective(prop)) {
|
|
44
42
|
this._atDirectives.push(prop);
|
|
45
43
|
}
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
if (Array.isArray(data.pseudoClasses)) {
|
|
49
|
-
for (
|
|
50
|
-
var prop = _e[_d];
|
|
47
|
+
for (const prop of data.pseudoClasses) {
|
|
51
48
|
if (isPseudoClassData(prop)) {
|
|
52
49
|
this._pseudoClasses.push(prop);
|
|
53
50
|
}
|
|
54
51
|
}
|
|
55
52
|
}
|
|
56
53
|
if (Array.isArray(data.pseudoElements)) {
|
|
57
|
-
for (
|
|
58
|
-
var prop = _g[_f];
|
|
54
|
+
for (const prop of data.pseudoElements) {
|
|
59
55
|
if (isPseudoElementData(prop)) {
|
|
60
56
|
this._pseudoElements.push(prop);
|
|
61
57
|
}
|
|
62
58
|
}
|
|
63
59
|
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
}());
|
|
67
|
-
export { CSSDataProvider };
|
|
60
|
+
}
|
|
61
|
+
}
|
|
68
62
|
function isPropertyData(d) {
|
|
69
63
|
return typeof d.name === 'string';
|
|
70
64
|
}
|