vscode-css-languageservice 5.1.12 → 5.1.13
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/lib/esm/languageFacts/colors.js +43 -2
- package/lib/esm/services/cssNavigation.js +9 -1
- package/lib/esm/services/selectorPrinting.js +53 -9
- package/lib/umd/languageFacts/colors.js +46 -3
- package/lib/umd/services/cssNavigation.js +8 -0
- package/lib/umd/services/selectorPrinting.js +53 -9
- package/package.json +1 -1
|
@@ -9,7 +9,8 @@ export var 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
|
-
{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') }
|
|
12
|
+
{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') },
|
|
13
|
+
{ func: 'hwb($hue $white $black)', desc: localize('css.builtin.hwb', 'Creates a Color from hue, white and black.') }
|
|
13
14
|
];
|
|
14
15
|
export var colors = {
|
|
15
16
|
aliceblue: '#f0f8ff',
|
|
@@ -205,7 +206,7 @@ export function isColorConstructor(node) {
|
|
|
205
206
|
if (!name) {
|
|
206
207
|
return false;
|
|
207
208
|
}
|
|
208
|
-
return /^(rgb|rgba|hsl|hsla)$/gi.test(name);
|
|
209
|
+
return /^(rgb|rgba|hsl|hsla|hwb)$/gi.test(name);
|
|
209
210
|
}
|
|
210
211
|
/**
|
|
211
212
|
* Returns true if the node is a color value - either
|
|
@@ -358,6 +359,40 @@ export function hslFromColor(rgba) {
|
|
|
358
359
|
}
|
|
359
360
|
return { h: h, s: s, l: l, a: a };
|
|
360
361
|
}
|
|
362
|
+
export function colorFromHWB(hue, white, black, alpha) {
|
|
363
|
+
if (alpha === void 0) { alpha = 1.0; }
|
|
364
|
+
if (white + black >= 1) {
|
|
365
|
+
var gray = white / (white + black);
|
|
366
|
+
return { red: gray, green: gray, blue: gray, alpha: alpha };
|
|
367
|
+
}
|
|
368
|
+
var rgb = colorFromHSL(hue, 1, 0.5, alpha);
|
|
369
|
+
var red = rgb.red;
|
|
370
|
+
red *= (1 - white - black);
|
|
371
|
+
red += white;
|
|
372
|
+
var green = rgb.green;
|
|
373
|
+
green *= (1 - white - black);
|
|
374
|
+
green += white;
|
|
375
|
+
var blue = rgb.blue;
|
|
376
|
+
blue *= (1 - white - black);
|
|
377
|
+
blue += white;
|
|
378
|
+
return {
|
|
379
|
+
red: red,
|
|
380
|
+
green: green,
|
|
381
|
+
blue: blue,
|
|
382
|
+
alpha: alpha
|
|
383
|
+
};
|
|
384
|
+
}
|
|
385
|
+
export function hwbFromColor(rgba) {
|
|
386
|
+
var hsl = hslFromColor(rgba);
|
|
387
|
+
var white = Math.min(rgba.red, rgba.green, rgba.blue);
|
|
388
|
+
var black = 1 - Math.max(rgba.red, rgba.green, rgba.blue);
|
|
389
|
+
return {
|
|
390
|
+
h: hsl.h,
|
|
391
|
+
w: white,
|
|
392
|
+
b: black,
|
|
393
|
+
a: hsl.a
|
|
394
|
+
};
|
|
395
|
+
}
|
|
361
396
|
export function getColorValue(node) {
|
|
362
397
|
if (node.type === nodes.NodeType.HexColorValue) {
|
|
363
398
|
var text = node.getText();
|
|
@@ -401,6 +436,12 @@ export function getColorValue(node) {
|
|
|
401
436
|
var l = getNumericValue(colorValues[2], 100.0);
|
|
402
437
|
return colorFromHSL(h, s, l, alpha);
|
|
403
438
|
}
|
|
439
|
+
else if (name === 'hwb') {
|
|
440
|
+
var h = getAngle(colorValues[0]);
|
|
441
|
+
var w = getNumericValue(colorValues[1], 100.0);
|
|
442
|
+
var b = getNumericValue(colorValues[2], 100.0);
|
|
443
|
+
return colorFromHWB(h, w, b, alpha);
|
|
444
|
+
}
|
|
404
445
|
}
|
|
405
446
|
catch (e) {
|
|
406
447
|
// parse error on numeric value
|
|
@@ -43,7 +43,7 @@ import { DocumentHighlightKind, Location, Range, SymbolKind, TextEdit, FileType
|
|
|
43
43
|
import * as nls from 'vscode-nls';
|
|
44
44
|
import * as nodes from '../parser/cssNodes';
|
|
45
45
|
import { Symbols } from '../parser/cssSymbolScope';
|
|
46
|
-
import { getColorValue, hslFromColor } from '../languageFacts/facts';
|
|
46
|
+
import { getColorValue, hslFromColor, hwbFromColor } from '../languageFacts/facts';
|
|
47
47
|
import { startsWith } from '../utils/strings';
|
|
48
48
|
import { dirname, joinPath } from '../utils/resources';
|
|
49
49
|
var localize = nls.loadMessageBundle();
|
|
@@ -303,6 +303,14 @@ var CSSNavigation = /** @class */ (function () {
|
|
|
303
303
|
label = "hsla(".concat(hsl.h, ", ").concat(Math.round(hsl.s * 100), "%, ").concat(Math.round(hsl.l * 100), "%, ").concat(hsl.a, ")");
|
|
304
304
|
}
|
|
305
305
|
result.push({ label: label, textEdit: TextEdit.replace(range, label) });
|
|
306
|
+
var hwb = hwbFromColor(color);
|
|
307
|
+
if (hwb.a === 1) {
|
|
308
|
+
label = "hwb(".concat(hwb.h, " ").concat(Math.round(hwb.w * 100), "% ").concat(Math.round(hwb.b * 100), "%)");
|
|
309
|
+
}
|
|
310
|
+
else {
|
|
311
|
+
label = "hwb(".concat(hwb.h, " ").concat(Math.round(hwb.w * 100), "% ").concat(Math.round(hwb.b * 100), "% / ").concat(hwb.a, ")");
|
|
312
|
+
}
|
|
313
|
+
result.push({ label: label, textEdit: TextEdit.replace(range, label) });
|
|
306
314
|
return result;
|
|
307
315
|
};
|
|
308
316
|
CSSNavigation.prototype.doRename = function (document, position, newName, stylesheet) {
|
|
@@ -362,7 +362,8 @@ var SelectorPrinting = /** @class */ (function () {
|
|
|
362
362
|
var _this = this;
|
|
363
363
|
//https://www.w3.org/TR/selectors-3/#specificity
|
|
364
364
|
var calculateScore = function (node) {
|
|
365
|
-
|
|
365
|
+
var specificity = new Specificity();
|
|
366
|
+
elementLoop: for (var _i = 0, _a = node.getChildren(); _i < _a.length; _i++) {
|
|
366
367
|
var element = _a[_i];
|
|
367
368
|
switch (element.type) {
|
|
368
369
|
case nodes.NodeType.IdentifierSelector:
|
|
@@ -383,23 +384,66 @@ var SelectorPrinting = /** @class */ (function () {
|
|
|
383
384
|
var text = element.getText();
|
|
384
385
|
if (_this.isPseudoElementIdentifier(text)) {
|
|
385
386
|
specificity.tag++; // pseudo element
|
|
387
|
+
break;
|
|
386
388
|
}
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
389
|
+
// where and child selectors have zero specificity
|
|
390
|
+
if (text.match(/^:where/i)) {
|
|
391
|
+
continue elementLoop;
|
|
392
|
+
}
|
|
393
|
+
// the most specific child selector
|
|
394
|
+
if (text.match(/^:(not|has|is)/i) && element.getChildren().length > 0) {
|
|
395
|
+
var mostSpecificListItem = new Specificity();
|
|
396
|
+
for (var _b = 0, _c = element.getChildren(); _b < _c.length; _b++) {
|
|
397
|
+
var containerElement = _c[_b];
|
|
398
|
+
var list = void 0;
|
|
399
|
+
if (containerElement.type === nodes.NodeType.Undefined) { // containerElement is a list of selectors
|
|
400
|
+
list = containerElement.getChildren();
|
|
401
|
+
}
|
|
402
|
+
else { // containerElement is a selector
|
|
403
|
+
list = [containerElement];
|
|
404
|
+
}
|
|
405
|
+
for (var _d = 0, _e = containerElement.getChildren(); _d < _e.length; _d++) {
|
|
406
|
+
var childElement = _e[_d];
|
|
407
|
+
var itemSpecificity = calculateScore(childElement);
|
|
408
|
+
if (itemSpecificity.id > mostSpecificListItem.id) {
|
|
409
|
+
mostSpecificListItem = itemSpecificity;
|
|
410
|
+
continue;
|
|
411
|
+
}
|
|
412
|
+
else if (itemSpecificity.id < mostSpecificListItem.id) {
|
|
413
|
+
continue;
|
|
414
|
+
}
|
|
415
|
+
if (itemSpecificity.attr > mostSpecificListItem.attr) {
|
|
416
|
+
mostSpecificListItem = itemSpecificity;
|
|
417
|
+
continue;
|
|
418
|
+
}
|
|
419
|
+
else if (itemSpecificity.attr < mostSpecificListItem.attr) {
|
|
420
|
+
continue;
|
|
421
|
+
}
|
|
422
|
+
if (itemSpecificity.tag > mostSpecificListItem.tag) {
|
|
423
|
+
mostSpecificListItem = itemSpecificity;
|
|
424
|
+
continue;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
391
427
|
}
|
|
392
|
-
specificity.
|
|
428
|
+
specificity.id += mostSpecificListItem.id;
|
|
429
|
+
specificity.attr += mostSpecificListItem.attr;
|
|
430
|
+
specificity.tag += mostSpecificListItem.tag;
|
|
431
|
+
continue elementLoop;
|
|
393
432
|
}
|
|
433
|
+
specificity.attr++; //pseudo class
|
|
394
434
|
break;
|
|
395
435
|
}
|
|
396
436
|
if (element.getChildren().length > 0) {
|
|
397
|
-
calculateScore(element);
|
|
437
|
+
var itemSpecificity = calculateScore(element);
|
|
438
|
+
specificity.id += itemSpecificity.id;
|
|
439
|
+
specificity.attr += itemSpecificity.attr;
|
|
440
|
+
specificity.tag += itemSpecificity.tag;
|
|
398
441
|
}
|
|
399
442
|
}
|
|
443
|
+
return specificity;
|
|
400
444
|
};
|
|
401
|
-
var specificity =
|
|
402
|
-
|
|
445
|
+
var specificity = calculateScore(node);
|
|
446
|
+
;
|
|
403
447
|
return localize('specificity', "[Selector Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): ({0}, {1}, {2})", specificity.id, specificity.attr, specificity.tag);
|
|
404
448
|
};
|
|
405
449
|
return SelectorPrinting;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
})(function (require, exports) {
|
|
14
14
|
"use strict";
|
|
15
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
-
exports.getColorValue = exports.hslFromColor = exports.colorFromHSL = exports.colorFrom256RGB = exports.colorFromHex = exports.hexDigit = exports.isColorValue = exports.isColorConstructor = exports.colorKeywords = exports.colors = exports.colorFunctions = void 0;
|
|
16
|
+
exports.getColorValue = exports.hwbFromColor = exports.colorFromHWB = exports.hslFromColor = exports.colorFromHSL = exports.colorFrom256RGB = exports.colorFromHex = exports.hexDigit = exports.isColorValue = exports.isColorConstructor = exports.colorKeywords = exports.colors = exports.colorFunctions = void 0;
|
|
17
17
|
var nodes = require("../parser/cssNodes");
|
|
18
18
|
var nls = require("vscode-nls");
|
|
19
19
|
var localize = nls.loadMessageBundle();
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
{ func: 'rgb($red, $green, $blue)', desc: localize('css.builtin.rgb', 'Creates a Color from red, green, and blue values.') },
|
|
22
22
|
{ func: 'rgba($red, $green, $blue, $alpha)', desc: localize('css.builtin.rgba', 'Creates a Color from red, green, blue, and alpha values.') },
|
|
23
23
|
{ func: 'hsl($hue, $saturation, $lightness)', desc: localize('css.builtin.hsl', 'Creates a Color from hue, saturation, and lightness values.') },
|
|
24
|
-
{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') }
|
|
24
|
+
{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') },
|
|
25
|
+
{ func: 'hwb($hue $white $black)', desc: localize('css.builtin.hwb', 'Creates a Color from hue, white and black.') }
|
|
25
26
|
];
|
|
26
27
|
exports.colors = {
|
|
27
28
|
aliceblue: '#f0f8ff',
|
|
@@ -217,7 +218,7 @@
|
|
|
217
218
|
if (!name) {
|
|
218
219
|
return false;
|
|
219
220
|
}
|
|
220
|
-
return /^(rgb|rgba|hsl|hsla)$/gi.test(name);
|
|
221
|
+
return /^(rgb|rgba|hsl|hsla|hwb)$/gi.test(name);
|
|
221
222
|
}
|
|
222
223
|
exports.isColorConstructor = isColorConstructor;
|
|
223
224
|
/**
|
|
@@ -377,6 +378,42 @@
|
|
|
377
378
|
return { h: h, s: s, l: l, a: a };
|
|
378
379
|
}
|
|
379
380
|
exports.hslFromColor = hslFromColor;
|
|
381
|
+
function colorFromHWB(hue, white, black, alpha) {
|
|
382
|
+
if (alpha === void 0) { alpha = 1.0; }
|
|
383
|
+
if (white + black >= 1) {
|
|
384
|
+
var gray = white / (white + black);
|
|
385
|
+
return { red: gray, green: gray, blue: gray, alpha: alpha };
|
|
386
|
+
}
|
|
387
|
+
var rgb = colorFromHSL(hue, 1, 0.5, alpha);
|
|
388
|
+
var red = rgb.red;
|
|
389
|
+
red *= (1 - white - black);
|
|
390
|
+
red += white;
|
|
391
|
+
var green = rgb.green;
|
|
392
|
+
green *= (1 - white - black);
|
|
393
|
+
green += white;
|
|
394
|
+
var blue = rgb.blue;
|
|
395
|
+
blue *= (1 - white - black);
|
|
396
|
+
blue += white;
|
|
397
|
+
return {
|
|
398
|
+
red: red,
|
|
399
|
+
green: green,
|
|
400
|
+
blue: blue,
|
|
401
|
+
alpha: alpha
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
exports.colorFromHWB = colorFromHWB;
|
|
405
|
+
function hwbFromColor(rgba) {
|
|
406
|
+
var hsl = hslFromColor(rgba);
|
|
407
|
+
var white = Math.min(rgba.red, rgba.green, rgba.blue);
|
|
408
|
+
var black = 1 - Math.max(rgba.red, rgba.green, rgba.blue);
|
|
409
|
+
return {
|
|
410
|
+
h: hsl.h,
|
|
411
|
+
w: white,
|
|
412
|
+
b: black,
|
|
413
|
+
a: hsl.a
|
|
414
|
+
};
|
|
415
|
+
}
|
|
416
|
+
exports.hwbFromColor = hwbFromColor;
|
|
380
417
|
function getColorValue(node) {
|
|
381
418
|
if (node.type === nodes.NodeType.HexColorValue) {
|
|
382
419
|
var text = node.getText();
|
|
@@ -420,6 +457,12 @@
|
|
|
420
457
|
var l = getNumericValue(colorValues[2], 100.0);
|
|
421
458
|
return colorFromHSL(h, s, l, alpha);
|
|
422
459
|
}
|
|
460
|
+
else if (name === 'hwb') {
|
|
461
|
+
var h = getAngle(colorValues[0]);
|
|
462
|
+
var w = getNumericValue(colorValues[1], 100.0);
|
|
463
|
+
var b = getNumericValue(colorValues[2], 100.0);
|
|
464
|
+
return colorFromHWB(h, w, b, alpha);
|
|
465
|
+
}
|
|
423
466
|
}
|
|
424
467
|
catch (e) {
|
|
425
468
|
// parse error on numeric value
|
|
@@ -314,6 +314,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
314
314
|
label = "hsla(".concat(hsl.h, ", ").concat(Math.round(hsl.s * 100), "%, ").concat(Math.round(hsl.l * 100), "%, ").concat(hsl.a, ")");
|
|
315
315
|
}
|
|
316
316
|
result.push({ label: label, textEdit: cssLanguageTypes_1.TextEdit.replace(range, label) });
|
|
317
|
+
var hwb = (0, facts_1.hwbFromColor)(color);
|
|
318
|
+
if (hwb.a === 1) {
|
|
319
|
+
label = "hwb(".concat(hwb.h, " ").concat(Math.round(hwb.w * 100), "% ").concat(Math.round(hwb.b * 100), "%)");
|
|
320
|
+
}
|
|
321
|
+
else {
|
|
322
|
+
label = "hwb(".concat(hwb.h, " ").concat(Math.round(hwb.w * 100), "% ").concat(Math.round(hwb.b * 100), "% / ").concat(hwb.a, ")");
|
|
323
|
+
}
|
|
324
|
+
result.push({ label: label, textEdit: cssLanguageTypes_1.TextEdit.replace(range, label) });
|
|
317
325
|
return result;
|
|
318
326
|
};
|
|
319
327
|
CSSNavigation.prototype.doRename = function (document, position, newName, stylesheet) {
|
|
@@ -374,7 +374,8 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
374
374
|
var _this = this;
|
|
375
375
|
//https://www.w3.org/TR/selectors-3/#specificity
|
|
376
376
|
var calculateScore = function (node) {
|
|
377
|
-
|
|
377
|
+
var specificity = new Specificity();
|
|
378
|
+
elementLoop: for (var _i = 0, _a = node.getChildren(); _i < _a.length; _i++) {
|
|
378
379
|
var element = _a[_i];
|
|
379
380
|
switch (element.type) {
|
|
380
381
|
case nodes.NodeType.IdentifierSelector:
|
|
@@ -395,23 +396,66 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
395
396
|
var text = element.getText();
|
|
396
397
|
if (_this.isPseudoElementIdentifier(text)) {
|
|
397
398
|
specificity.tag++; // pseudo element
|
|
399
|
+
break;
|
|
398
400
|
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
401
|
+
// where and child selectors have zero specificity
|
|
402
|
+
if (text.match(/^:where/i)) {
|
|
403
|
+
continue elementLoop;
|
|
404
|
+
}
|
|
405
|
+
// the most specific child selector
|
|
406
|
+
if (text.match(/^:(not|has|is)/i) && element.getChildren().length > 0) {
|
|
407
|
+
var mostSpecificListItem = new Specificity();
|
|
408
|
+
for (var _b = 0, _c = element.getChildren(); _b < _c.length; _b++) {
|
|
409
|
+
var containerElement = _c[_b];
|
|
410
|
+
var list = void 0;
|
|
411
|
+
if (containerElement.type === nodes.NodeType.Undefined) { // containerElement is a list of selectors
|
|
412
|
+
list = containerElement.getChildren();
|
|
413
|
+
}
|
|
414
|
+
else { // containerElement is a selector
|
|
415
|
+
list = [containerElement];
|
|
416
|
+
}
|
|
417
|
+
for (var _d = 0, _e = containerElement.getChildren(); _d < _e.length; _d++) {
|
|
418
|
+
var childElement = _e[_d];
|
|
419
|
+
var itemSpecificity = calculateScore(childElement);
|
|
420
|
+
if (itemSpecificity.id > mostSpecificListItem.id) {
|
|
421
|
+
mostSpecificListItem = itemSpecificity;
|
|
422
|
+
continue;
|
|
423
|
+
}
|
|
424
|
+
else if (itemSpecificity.id < mostSpecificListItem.id) {
|
|
425
|
+
continue;
|
|
426
|
+
}
|
|
427
|
+
if (itemSpecificity.attr > mostSpecificListItem.attr) {
|
|
428
|
+
mostSpecificListItem = itemSpecificity;
|
|
429
|
+
continue;
|
|
430
|
+
}
|
|
431
|
+
else if (itemSpecificity.attr < mostSpecificListItem.attr) {
|
|
432
|
+
continue;
|
|
433
|
+
}
|
|
434
|
+
if (itemSpecificity.tag > mostSpecificListItem.tag) {
|
|
435
|
+
mostSpecificListItem = itemSpecificity;
|
|
436
|
+
continue;
|
|
437
|
+
}
|
|
438
|
+
}
|
|
403
439
|
}
|
|
404
|
-
specificity.
|
|
440
|
+
specificity.id += mostSpecificListItem.id;
|
|
441
|
+
specificity.attr += mostSpecificListItem.attr;
|
|
442
|
+
specificity.tag += mostSpecificListItem.tag;
|
|
443
|
+
continue elementLoop;
|
|
405
444
|
}
|
|
445
|
+
specificity.attr++; //pseudo class
|
|
406
446
|
break;
|
|
407
447
|
}
|
|
408
448
|
if (element.getChildren().length > 0) {
|
|
409
|
-
calculateScore(element);
|
|
449
|
+
var itemSpecificity = calculateScore(element);
|
|
450
|
+
specificity.id += itemSpecificity.id;
|
|
451
|
+
specificity.attr += itemSpecificity.attr;
|
|
452
|
+
specificity.tag += itemSpecificity.tag;
|
|
410
453
|
}
|
|
411
454
|
}
|
|
455
|
+
return specificity;
|
|
412
456
|
};
|
|
413
|
-
var specificity =
|
|
414
|
-
|
|
457
|
+
var specificity = calculateScore(node);
|
|
458
|
+
;
|
|
415
459
|
return localize('specificity', "[Selector Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): ({0}, {1}, {2})", specificity.id, specificity.attr, specificity.tag);
|
|
416
460
|
};
|
|
417
461
|
return SelectorPrinting;
|