🎉 initiate project *astro_rewrite*

This commit is contained in:
sindrekjelsrud 2023-07-19 21:31:30 +02:00
parent ffd4d5e86c
commit 2ba37bfbe3
8658 changed files with 2268794 additions and 2538 deletions

View file

@ -0,0 +1,142 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
export const positionKeywords = {
'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.',
'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.',
'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.',
'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.',
'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.'
};
export const repeatStyleKeywords = {
'no-repeat': 'Placed once and not repeated in this direction.',
'repeat': 'Repeated in this direction as often as needed to cover the background painting area.',
'repeat-x': 'Computes to repeat no-repeat.',
'repeat-y': 'Computes to no-repeat repeat.',
'round': 'Repeated as often as will fit within the background positioning area. If it doesnt fit a whole number of times, it is rescaled so that it does.',
'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.'
};
export const lineStyleKeywords = {
'dashed': 'A series of square-ended dashes.',
'dotted': 'A series of round dots.',
'double': 'Two parallel solid lines with some space between them.',
'groove': 'Looks as if it were carved in the canvas.',
'hidden': 'Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables.',
'inset': 'Looks as if the content on the inside of the border is sunken into the canvas.',
'none': 'No border. Color and width are ignored.',
'outset': 'Looks as if the content on the inside of the border is coming out of the canvas.',
'ridge': 'Looks as if it were coming out of the canvas.',
'solid': 'A single line segment.'
};
export const lineWidthKeywords = ['medium', 'thick', 'thin'];
export const boxKeywords = {
'border-box': 'The background is painted within (clipped to) the border box.',
'content-box': 'The background is painted within (clipped to) the content box.',
'padding-box': 'The background is painted within (clipped to) the padding box.'
};
export const geometryBoxKeywords = {
'margin-box': 'Uses the margin box as reference box.',
'fill-box': 'Uses the object bounding box as reference box.',
'stroke-box': 'Uses the stroke bounding box as reference box.',
'view-box': 'Uses the nearest SVG viewport as reference box.'
};
export const cssWideKeywords = {
'initial': 'Represents the value specified as the propertys initial value.',
'inherit': 'Represents the computed value of the property on the elements parent.',
'unset': 'Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.'
};
export const cssWideFunctions = {
'var()': 'Evaluates the value of a custom variable.',
'calc()': 'Evaluates an mathematical expression. The following operators can be used: + - * /.'
};
export const imageFunctions = {
'url()': 'Reference an image file by URL',
'image()': 'Provide image fallbacks and annotations.',
'-webkit-image-set()': 'Provide multiple resolutions. Remember to use unprefixed image-set() in addition.',
'image-set()': 'Provide multiple resolutions of an image and const the UA decide which is most appropriate in a given situation.',
'-moz-element()': 'Use an element in the document as an image. Remember to use unprefixed element() in addition.',
'element()': 'Use an element in the document as an image.',
'cross-fade()': 'Indicates the two images to be combined and how far along in the transition the combination is.',
'-webkit-gradient()': 'Deprecated. Use modern linear-gradient() or radial-gradient() instead.',
'-webkit-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'-moz-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'-o-linear-gradient()': 'Linear gradient. Remember to use unprefixed version in addition.',
'linear-gradient()': 'A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line.',
'-webkit-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.',
'-moz-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.',
'-o-repeating-linear-gradient()': 'Repeating Linear gradient. Remember to use unprefixed version in addition.',
'repeating-linear-gradient()': 'Same as linear-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-stops position and the first specified color-stops position.',
'-webkit-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.',
'-moz-radial-gradient()': 'Radial gradient. Remember to use unprefixed version in addition.',
'radial-gradient()': 'Colors emerge from a single point and smoothly spread outward in a circular or elliptical shape.',
'-webkit-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.',
'-moz-repeating-radial-gradient()': 'Repeating radial gradient. Remember to use unprefixed version in addition.',
'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-stops position and the first specified color-stops position.'
};
export const transitionTimingFunctions = {
'ease': 'Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).',
'ease-in': 'Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).',
'ease-in-out': 'Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).',
'ease-out': 'Equivalent to cubic-bezier(0, 0, 0.58, 1.0).',
'linear': 'Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).',
'step-end': 'Equivalent to steps(1, end).',
'step-start': 'Equivalent to steps(1, start).',
'steps()': 'The first parameter specifies the number of intervals in the function. The second parameter, which is optional, is either the value “start” or “end”.',
'cubic-bezier()': 'Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).',
'cubic-bezier(0.6, -0.28, 0.735, 0.045)': 'Ease-in Back. Overshoots.',
'cubic-bezier(0.68, -0.55, 0.265, 1.55)': 'Ease-in-out Back. Overshoots.',
'cubic-bezier(0.175, 0.885, 0.32, 1.275)': 'Ease-out Back. Overshoots.',
'cubic-bezier(0.6, 0.04, 0.98, 0.335)': 'Ease-in Circular. Based on half circle.',
'cubic-bezier(0.785, 0.135, 0.15, 0.86)': 'Ease-in-out Circular. Based on half circle.',
'cubic-bezier(0.075, 0.82, 0.165, 1)': 'Ease-out Circular. Based on half circle.',
'cubic-bezier(0.55, 0.055, 0.675, 0.19)': 'Ease-in Cubic. Based on power of three.',
'cubic-bezier(0.645, 0.045, 0.355, 1)': 'Ease-in-out Cubic. Based on power of three.',
'cubic-bezier(0.215, 0.610, 0.355, 1)': 'Ease-out Cubic. Based on power of three.',
'cubic-bezier(0.95, 0.05, 0.795, 0.035)': 'Ease-in Exponential. Based on two to the power ten.',
'cubic-bezier(1, 0, 0, 1)': 'Ease-in-out Exponential. Based on two to the power ten.',
'cubic-bezier(0.19, 1, 0.22, 1)': 'Ease-out Exponential. Based on two to the power ten.',
'cubic-bezier(0.47, 0, 0.745, 0.715)': 'Ease-in Sine.',
'cubic-bezier(0.445, 0.05, 0.55, 0.95)': 'Ease-in-out Sine.',
'cubic-bezier(0.39, 0.575, 0.565, 1)': 'Ease-out Sine.',
'cubic-bezier(0.55, 0.085, 0.68, 0.53)': 'Ease-in Quadratic. Based on power of two.',
'cubic-bezier(0.455, 0.03, 0.515, 0.955)': 'Ease-in-out Quadratic. Based on power of two.',
'cubic-bezier(0.25, 0.46, 0.45, 0.94)': 'Ease-out Quadratic. Based on power of two.',
'cubic-bezier(0.895, 0.03, 0.685, 0.22)': 'Ease-in Quartic. Based on power of four.',
'cubic-bezier(0.77, 0, 0.175, 1)': 'Ease-in-out Quartic. Based on power of four.',
'cubic-bezier(0.165, 0.84, 0.44, 1)': 'Ease-out Quartic. Based on power of four.',
'cubic-bezier(0.755, 0.05, 0.855, 0.06)': 'Ease-in Quintic. Based on power of five.',
'cubic-bezier(0.86, 0, 0.07, 1)': 'Ease-in-out Quintic. Based on power of five.',
'cubic-bezier(0.23, 1, 0.320, 1)': 'Ease-out Quintic. Based on power of five.'
};
export const basicShapeFunctions = {
'circle()': 'Defines a circle.',
'ellipse()': 'Defines an ellipse.',
'inset()': 'Defines an inset rectangle.',
'polygon()': 'Defines a polygon.'
};
export const units = {
'length': ['cap', 'ch', 'cm', 'cqb', 'cqh', 'cqi', 'cqmax', 'cqmin', 'cqw', 'dvb', 'dvh', 'dvi', 'dvw', 'em', 'ex', 'ic', 'in', 'lh', 'lvb', 'lvh', 'lvi', 'lvw', 'mm', 'pc', 'pt', 'px', 'q', 'rcap', 'rch', 'rem', 'rex', 'ric', 'rlh', 'svb', 'svh', 'svi', 'svw', 'vb', 'vh', 'vi', 'vmax', 'vmin', 'vw'],
'angle': ['deg', 'rad', 'grad', 'turn'],
'time': ['ms', 's'],
'frequency': ['Hz', 'kHz'],
'resolution': ['dpi', 'dpcm', 'dppx'],
'percentage': ['%', 'fr']
};
export const html5Tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption',
'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer',
'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link',
'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q',
'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td',
'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'const', 'video', 'wbr'];
export const svgElements = ['circle', 'clipPath', 'cursor', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'hatch', 'hatchpath', 'image', 'line', 'linearGradient',
'marker', 'mask', 'mesh', 'meshpatch', 'meshrow', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'solidcolor', 'stop', 'svg', 'switch',
'symbol', 'text', 'textPath', 'tspan', 'use', 'view'];
export const pageBoxDirectives = [
'@bottom-center', '@bottom-left', '@bottom-left-corner', '@bottom-right', '@bottom-right-corner',
'@left-bottom', '@left-middle', '@left-top', '@right-bottom', '@right-middle', '@right-top',
'@top-center', '@top-left', '@top-left-corner', '@top-right', '@top-right-corner'
];

View file

@ -0,0 +1,590 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as nodes from '../parser/cssNodes';
import * as l10n from '@vscode/l10n';
const hexColorRegExp = /(^#([0-9A-F]{3}){1,2}$)|(^#([0-9A-F]{4}){1,2}$)/i;
export const colorFunctions = [
{
label: 'rgb',
func: 'rgb($red, $green, $blue)',
insertText: 'rgb(${1:red}, ${2:green}, ${3:blue})',
desc: l10n.t('Creates a Color from red, green, and blue values.')
},
{
label: 'rgba',
func: 'rgba($red, $green, $blue, $alpha)',
insertText: 'rgba(${1:red}, ${2:green}, ${3:blue}, ${4:alpha})',
desc: l10n.t('Creates a Color from red, green, blue, and alpha values.')
},
{
label: 'rgb relative',
func: 'rgb(from $color $red $green $blue)',
insertText: 'rgb(from ${1:color} ${2:r} ${3:g} ${4:b})',
desc: l10n.t('Creates a Color from the red, green, and blue values of another Color.')
},
{
label: 'hsl',
func: 'hsl($hue, $saturation, $lightness)',
insertText: 'hsl(${1:hue}, ${2:saturation}, ${3:lightness})',
desc: l10n.t('Creates a Color from hue, saturation, and lightness values.')
},
{
label: 'hsla',
func: 'hsla($hue, $saturation, $lightness, $alpha)',
insertText: 'hsla(${1:hue}, ${2:saturation}, ${3:lightness}, ${4:alpha})',
desc: l10n.t('Creates a Color from hue, saturation, lightness, and alpha values.')
},
{
label: 'hsl relative',
func: 'hsl(from $color $hue $saturation $lightness)',
insertText: 'hsl(from ${1:color} ${2:h} ${3:s} ${4:l})',
desc: l10n.t('Creates a Color from the hue, saturation, and lightness values of another Color.')
},
{
label: 'hwb',
func: 'hwb($hue $white $black)',
insertText: 'hwb(${1:hue} ${2:white} ${3:black})',
desc: l10n.t('Creates a Color from hue, white, and black values.')
},
{
label: 'hwb relative',
func: 'hwb(from $color $hue $white $black)',
insertText: 'hwb(from ${1:color} ${2:h} ${3:w} ${4:b})',
desc: l10n.t('Creates a Color from the hue, white, and black values of another Color.')
},
{
label: 'lab',
func: 'lab($lightness $a $b)',
insertText: 'lab(${1:lightness} ${2:a} ${3:b})',
desc: l10n.t('Creates a Color from lightness, a, and b values.')
},
{
label: 'lab relative',
func: 'lab(from $color $lightness $a $b)',
insertText: 'lab(from ${1:color} ${2:l} ${3:a} ${4:b})',
desc: l10n.t('Creates a Color from the lightness, a, and b values of another Color.')
},
{
label: 'oklab',
func: 'oklab($lightness $a $b)',
insertText: 'oklab(${1:lightness} ${2:a} ${3:b})',
desc: l10n.t('Creates a Color from lightness, a, and b values.')
},
{
label: 'oklab relative',
func: 'oklab(from $color $lightness $a $b)',
insertText: 'oklab(from ${1:color} ${2:l} ${3:a} ${4:b})',
desc: l10n.t('Creates a Color from the lightness, a, and b values of another Color.')
},
{
label: 'lch',
func: 'lch($lightness $chroma $hue)',
insertText: 'lch(${1:lightness} ${2:chroma} ${3:hue})',
desc: l10n.t('Creates a Color from lightness, chroma, and hue values.')
},
{
label: 'lch relative',
func: 'lch(from $color $lightness $chroma $hue)',
insertText: 'lch(from ${1:color} ${2:l} ${3:c} ${4:h})',
desc: l10n.t('Creates a Color from the lightness, chroma, and hue values of another Color.')
},
{
label: 'oklch',
func: 'oklch($lightness $chroma $hue)',
insertText: 'oklch(${1:lightness} ${2:chroma} ${3:hue})',
desc: l10n.t('Creates a Color from lightness, chroma, and hue values.')
},
{
label: 'oklch relative',
func: 'oklch(from $color $lightness $chroma $hue)',
insertText: 'oklch(from ${1:color} ${2:l} ${3:c} ${4:h})',
desc: l10n.t('Creates a Color from the lightness, chroma, and hue values of another Color.')
},
{
label: 'color',
func: 'color($color-space $red $green $blue)',
insertText: 'color(${1|srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyx,xyz-d50,xyz-d65|} ${2:red} ${3:green} ${4:blue})',
desc: l10n.t('Creates a Color in a specific color space from red, green, and blue values.')
},
{
label: 'color relative',
func: 'color(from $color $color-space $red $green $blue)',
insertText: 'color(from ${1:color} ${2|srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyx,xyz-d50,xyz-d65|} ${3:r} ${4:g} ${5:b})',
desc: l10n.t('Creates a Color in a specific color space from the red, green, and blue values of another Color.')
},
{
label: 'color-mix',
func: 'color-mix(in $color-space, $color $percentage, $color $percentage)',
insertText: 'color-mix(in ${1|srgb,srgb-linear,lab,oklab,xyz,xyz-d50,xyz-d65|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
desc: l10n.t('Mix two colors together in a rectangular color space.')
},
{
label: 'color-mix hue',
func: 'color-mix(in $color-space $interpolation-method hue, $color $percentage, $color $percentage)',
insertText: 'color-mix(in ${1|hsl,hwb,lch,oklch|} ${2|shorter hue,longer hue,increasing hue,decreasing hue|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
desc: l10n.t('Mix two colors together in a polar color space.')
},
];
const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb)$/i;
export const colors = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgrey: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
grey: '#808080',
green: '#008000',
greenyellow: '#adff2f',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
red: '#ff0000',
rebeccapurple: '#663399',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32'
};
const colorsRegExp = new RegExp(`^(${Object.keys(colors).join('|')})$`, "i");
export const colorKeywords = {
'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.',
'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.',
};
const colorKeywordsRegExp = new RegExp(`^(${Object.keys(colorKeywords).join('|')})$`, "i");
function getNumericValue(node, factor) {
const val = node.getText();
const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
if (m) {
if (m[2]) {
factor = 100.0;
}
const result = parseFloat(m[1]) / factor;
if (result >= 0 && result <= 1) {
return result;
}
}
throw new Error();
}
function getAngle(node) {
const val = node.getText();
const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(deg|rad|grad|turn)?$/);
if (m) {
switch (m[2]) {
case 'deg':
return parseFloat(val) % 360;
case 'rad':
return (parseFloat(val) * 180 / Math.PI) % 360;
case 'grad':
return (parseFloat(val) * 0.9) % 360;
case 'turn':
return (parseFloat(val) * 360) % 360;
default:
if ('undefined' === typeof m[2]) {
return parseFloat(val) % 360;
}
}
}
throw new Error();
}
export function isColorConstructor(node) {
const name = node.getName();
if (!name) {
return false;
}
return colorFunctionNameRegExp.test(name);
}
export function isColorString(s) {
return hexColorRegExp.test(s) || colorsRegExp.test(s) || colorKeywordsRegExp.test(s);
}
/**
* Returns true if the node is a color value - either
* defined a hex number, as rgb or rgba function, or
* as color name.
*/
export function isColorValue(node) {
if (node.type === nodes.NodeType.HexColorValue) {
return true;
}
else if (node.type === nodes.NodeType.Function) {
return isColorConstructor(node);
}
else if (node.type === nodes.NodeType.Identifier) {
if (node.parent && node.parent.type !== nodes.NodeType.Term) {
return false;
}
const candidateColor = node.getText().toLowerCase();
if (candidateColor === 'none') {
return false;
}
if (colors[candidateColor]) {
return true;
}
}
return false;
}
const Digit0 = 48;
const Digit9 = 57;
const A = 65;
const F = 70;
const a = 97;
const f = 102;
export function hexDigit(charCode) {
if (charCode < Digit0) {
return 0;
}
if (charCode <= Digit9) {
return charCode - Digit0;
}
if (charCode < a) {
charCode += (a - A);
}
if (charCode >= a && charCode <= f) {
return charCode - a + 10;
}
return 0;
}
export function colorFromHex(text) {
if (text[0] !== '#') {
return null;
}
switch (text.length) {
case 4:
return {
red: (hexDigit(text.charCodeAt(1)) * 0x11) / 255.0,
green: (hexDigit(text.charCodeAt(2)) * 0x11) / 255.0,
blue: (hexDigit(text.charCodeAt(3)) * 0x11) / 255.0,
alpha: 1
};
case 5:
return {
red: (hexDigit(text.charCodeAt(1)) * 0x11) / 255.0,
green: (hexDigit(text.charCodeAt(2)) * 0x11) / 255.0,
blue: (hexDigit(text.charCodeAt(3)) * 0x11) / 255.0,
alpha: (hexDigit(text.charCodeAt(4)) * 0x11) / 255.0,
};
case 7:
return {
red: (hexDigit(text.charCodeAt(1)) * 0x10 + hexDigit(text.charCodeAt(2))) / 255.0,
green: (hexDigit(text.charCodeAt(3)) * 0x10 + hexDigit(text.charCodeAt(4))) / 255.0,
blue: (hexDigit(text.charCodeAt(5)) * 0x10 + hexDigit(text.charCodeAt(6))) / 255.0,
alpha: 1
};
case 9:
return {
red: (hexDigit(text.charCodeAt(1)) * 0x10 + hexDigit(text.charCodeAt(2))) / 255.0,
green: (hexDigit(text.charCodeAt(3)) * 0x10 + hexDigit(text.charCodeAt(4))) / 255.0,
blue: (hexDigit(text.charCodeAt(5)) * 0x10 + hexDigit(text.charCodeAt(6))) / 255.0,
alpha: (hexDigit(text.charCodeAt(7)) * 0x10 + hexDigit(text.charCodeAt(8))) / 255.0
};
}
return null;
}
export function colorFrom256RGB(red, green, blue, alpha = 1.0) {
return {
red: red / 255.0,
green: green / 255.0,
blue: blue / 255.0,
alpha
};
}
export function colorFromHSL(hue, sat, light, alpha = 1.0) {
hue = hue / 60.0;
if (sat === 0) {
return { red: light, green: light, blue: light, alpha };
}
else {
const hueToRgb = (t1, t2, hue) => {
while (hue < 0) {
hue += 6;
}
while (hue >= 6) {
hue -= 6;
}
if (hue < 1) {
return (t2 - t1) * hue + t1;
}
if (hue < 3) {
return t2;
}
if (hue < 4) {
return (t2 - t1) * (4 - hue) + t1;
}
return t1;
};
const t2 = light <= 0.5 ? (light * (sat + 1)) : (light + sat - (light * sat));
const t1 = light * 2 - t2;
return { red: hueToRgb(t1, t2, hue + 2), green: hueToRgb(t1, t2, hue), blue: hueToRgb(t1, t2, hue - 2), alpha };
}
}
export function hslFromColor(rgba) {
const r = rgba.red;
const g = rgba.green;
const b = rgba.blue;
const a = rgba.alpha;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = 0;
let s = 0;
const l = (min + max) / 2;
const chroma = max - min;
if (chroma > 0) {
s = Math.min((l <= 0.5 ? chroma / (2 * l) : chroma / (2 - (2 * l))), 1);
switch (max) {
case r:
h = (g - b) / chroma + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / chroma + 2;
break;
case b:
h = (r - g) / chroma + 4;
break;
}
h *= 60;
h = Math.round(h);
}
return { h, s, l, a };
}
export function colorFromHWB(hue, white, black, alpha = 1.0) {
if (white + black >= 1) {
const gray = white / (white + black);
return { red: gray, green: gray, blue: gray, alpha };
}
const rgb = colorFromHSL(hue, 1, 0.5, alpha);
let red = rgb.red;
red *= (1 - white - black);
red += white;
let green = rgb.green;
green *= (1 - white - black);
green += white;
let blue = rgb.blue;
blue *= (1 - white - black);
blue += white;
return {
red: red,
green: green,
blue: blue,
alpha
};
}
export function hwbFromColor(rgba) {
const hsl = hslFromColor(rgba);
const white = Math.min(rgba.red, rgba.green, rgba.blue);
const black = 1 - Math.max(rgba.red, rgba.green, rgba.blue);
return {
h: hsl.h,
w: white,
b: black,
a: hsl.a
};
}
export function getColorValue(node) {
if (node.type === nodes.NodeType.HexColorValue) {
const text = node.getText();
return colorFromHex(text);
}
else if (node.type === nodes.NodeType.Function) {
const functionNode = node;
const name = functionNode.getName();
let colorValues = functionNode.getArguments().getChildren();
if (colorValues.length === 1) {
const functionArg = colorValues[0].getChildren();
if (functionArg.length === 1 && functionArg[0].type === nodes.NodeType.Expression) {
colorValues = functionArg[0].getChildren();
if (colorValues.length === 3) {
const lastValue = colorValues[2];
if (lastValue instanceof nodes.BinaryExpression) {
const left = lastValue.getLeft(), right = lastValue.getRight(), operator = lastValue.getOperator();
if (left && right && operator && operator.matches('/')) {
colorValues = [colorValues[0], colorValues[1], left, right];
}
}
}
}
}
if (!name || colorValues.length < 3 || colorValues.length > 4) {
return null;
}
try {
const alpha = colorValues.length === 4 ? getNumericValue(colorValues[3], 1) : 1;
if (name === 'rgb' || name === 'rgba') {
return {
red: getNumericValue(colorValues[0], 255.0),
green: getNumericValue(colorValues[1], 255.0),
blue: getNumericValue(colorValues[2], 255.0),
alpha
};
}
else if (name === 'hsl' || name === 'hsla') {
const h = getAngle(colorValues[0]);
const s = getNumericValue(colorValues[1], 100.0);
const l = getNumericValue(colorValues[2], 100.0);
return colorFromHSL(h, s, l, alpha);
}
else if (name === 'hwb') {
const h = getAngle(colorValues[0]);
const w = getNumericValue(colorValues[1], 100.0);
const b = getNumericValue(colorValues[2], 100.0);
return colorFromHWB(h, w, b, alpha);
}
}
catch (e) {
// parse error on numeric value
return null;
}
}
else if (node.type === nodes.NodeType.Identifier) {
if (node.parent && node.parent.type !== nodes.NodeType.Term) {
return null;
}
const term = node.parent;
if (term && term.parent && term.parent.type === nodes.NodeType.BinaryExpression) {
const expression = term.parent;
if (expression.parent && expression.parent.type === nodes.NodeType.ListEntry && expression.parent.key === expression) {
return null;
}
}
const candidateColor = node.getText().toLowerCase();
if (candidateColor === 'none') {
return null;
}
const colorHex = colors[candidateColor];
if (colorHex) {
return colorFromHex(colorHex);
}
}
return null;
}

View file

@ -0,0 +1,88 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as objects from '../utils/objects';
import { cssData } from '../data/webCustomData';
import { CSSDataProvider } from './dataProvider';
export class CSSDataManager {
constructor(options) {
this.dataProviders = [];
this._propertySet = {};
this._atDirectiveSet = {};
this._pseudoClassSet = {};
this._pseudoElementSet = {};
this._properties = [];
this._atDirectives = [];
this._pseudoClasses = [];
this._pseudoElements = [];
this.setDataProviders(options?.useDefaultDataProvider !== false, options?.customDataProviders || []);
}
setDataProviders(builtIn, providers) {
this.dataProviders = [];
if (builtIn) {
this.dataProviders.push(new CSSDataProvider(cssData));
}
this.dataProviders.push(...providers);
this.collectData();
}
/**
* Collect all data & handle duplicates
*/
collectData() {
this._propertySet = {};
this._atDirectiveSet = {};
this._pseudoClassSet = {};
this._pseudoElementSet = {};
this.dataProviders.forEach(provider => {
provider.provideProperties().forEach(p => {
if (!this._propertySet[p.name]) {
this._propertySet[p.name] = p;
}
});
provider.provideAtDirectives().forEach(p => {
if (!this._atDirectiveSet[p.name]) {
this._atDirectiveSet[p.name] = p;
}
});
provider.providePseudoClasses().forEach(p => {
if (!this._pseudoClassSet[p.name]) {
this._pseudoClassSet[p.name] = p;
}
});
provider.providePseudoElements().forEach(p => {
if (!this._pseudoElementSet[p.name]) {
this._pseudoElementSet[p.name] = p;
}
});
});
this._properties = objects.values(this._propertySet);
this._atDirectives = objects.values(this._atDirectiveSet);
this._pseudoClasses = objects.values(this._pseudoClassSet);
this._pseudoElements = objects.values(this._pseudoElementSet);
}
getProperty(name) { return this._propertySet[name]; }
getAtDirective(name) { return this._atDirectiveSet[name]; }
getPseudoClass(name) { return this._pseudoClassSet[name]; }
getPseudoElement(name) { return this._pseudoElementSet[name]; }
getProperties() {
return this._properties;
}
getAtDirectives() {
return this._atDirectives;
}
getPseudoClasses() {
return this._pseudoClasses;
}
getPseudoElements() {
return this._pseudoElements;
}
isKnownProperty(name) {
return name.toLowerCase() in this._propertySet;
}
isStandardProperty(name) {
return this.isKnownProperty(name) &&
(!this._propertySet[name.toLowerCase()].status || this._propertySet[name.toLowerCase()].status === 'standard');
}
}

View file

@ -0,0 +1,73 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
export class CSSDataProvider {
/**
* Currently, unversioned data uses the V1 implementation
* In the future when the provider handles multiple versions of HTML custom data,
* use the latest implementation for unversioned data
*/
constructor(data) {
this._properties = [];
this._atDirectives = [];
this._pseudoClasses = [];
this._pseudoElements = [];
this.addData(data);
}
provideProperties() {
return this._properties;
}
provideAtDirectives() {
return this._atDirectives;
}
providePseudoClasses() {
return this._pseudoClasses;
}
providePseudoElements() {
return this._pseudoElements;
}
addData(data) {
if (Array.isArray(data.properties)) {
for (const prop of data.properties) {
if (isPropertyData(prop)) {
this._properties.push(prop);
}
}
}
if (Array.isArray(data.atDirectives)) {
for (const prop of data.atDirectives) {
if (isAtDirective(prop)) {
this._atDirectives.push(prop);
}
}
}
if (Array.isArray(data.pseudoClasses)) {
for (const prop of data.pseudoClasses) {
if (isPseudoClassData(prop)) {
this._pseudoClasses.push(prop);
}
}
}
if (Array.isArray(data.pseudoElements)) {
for (const prop of data.pseudoElements) {
if (isPseudoElementData(prop)) {
this._pseudoElements.push(prop);
}
}
}
}
}
function isPropertyData(d) {
return typeof d.name === 'string';
}
function isAtDirective(d) {
return typeof d.name === 'string';
}
function isPseudoClassData(d) {
return typeof d.name === 'string';
}
function isPseudoElementData(d) {
return typeof d.name === 'string';
}

View file

@ -0,0 +1,137 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { MarkupKind } from '../cssLanguageTypes';
export const browserNames = {
E: 'Edge',
FF: 'Firefox',
S: 'Safari',
C: 'Chrome',
IE: 'IE',
O: 'Opera'
};
function getEntryStatus(status) {
switch (status) {
case 'experimental':
return '⚠️ Property is experimental. Be cautious when using it.\n\n';
case 'nonstandard':
return '🚨️ Property is nonstandard. Avoid using it.\n\n';
case 'obsolete':
return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
default:
return '';
}
}
export function getEntryDescription(entry, doesSupportMarkdown, settings) {
let result;
if (doesSupportMarkdown) {
result = {
kind: 'markdown',
value: getEntryMarkdownDescription(entry, settings)
};
}
else {
result = {
kind: 'plaintext',
value: getEntryStringDescription(entry, settings)
};
}
if (result.value === '') {
return undefined;
}
return result;
}
export function textToMarkedString(text) {
text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&'); // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function getEntryStringDescription(entry, settings) {
if (!entry.description || entry.description === '') {
return '';
}
if (typeof entry.description !== 'string') {
return entry.description.value;
}
let result = '';
if (settings?.documentation !== false) {
if (entry.status) {
result += getEntryStatus(entry.status);
}
result += entry.description;
const browserLabel = getBrowserLabel(entry.browsers);
if (browserLabel) {
result += '\n(' + browserLabel + ')';
}
if ('syntax' in entry) {
result += `\n\nSyntax: ${entry.syntax}`;
}
}
if (entry.references && entry.references.length > 0 && settings?.references !== false) {
if (result.length > 0) {
result += '\n\n';
}
result += entry.references.map(r => {
return `${r.name}: ${r.url}`;
}).join(' | ');
}
return result;
}
function getEntryMarkdownDescription(entry, settings) {
if (!entry.description || entry.description === '') {
return '';
}
let result = '';
if (settings?.documentation !== false) {
if (entry.status) {
result += getEntryStatus(entry.status);
}
if (typeof entry.description === 'string') {
result += textToMarkedString(entry.description);
}
else {
result += entry.description.kind === MarkupKind.Markdown ? entry.description.value : textToMarkedString(entry.description.value);
}
const browserLabel = getBrowserLabel(entry.browsers);
if (browserLabel) {
result += '\n\n(' + textToMarkedString(browserLabel) + ')';
}
if ('syntax' in entry && entry.syntax) {
result += `\n\nSyntax: ${textToMarkedString(entry.syntax)}`;
}
}
if (entry.references && entry.references.length > 0 && settings?.references !== false) {
if (result.length > 0) {
result += '\n\n';
}
result += entry.references.map(r => {
return `[${r.name}](${r.url})`;
}).join(' | ');
}
return result;
}
/**
* Input is like `["E12","FF49","C47","IE","O"]`
* Output is like `Edge 12, Firefox 49, Chrome 47, IE, Opera`
*/
export function getBrowserLabel(browsers = []) {
if (browsers.length === 0) {
return null;
}
return browsers
.map(b => {
let result = '';
const matches = b.match(/([A-Z]+)(\d+)?/);
const name = matches[1];
const version = matches[2];
if (name in browserNames) {
result += browserNames[name];
}
if (version) {
result += ' ' + version;
}
return result;
})
.join(', ');
}

View file

@ -0,0 +1,8 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
export * from './entry';
export * from './colors';
export * from './builtinData';