Complete residential site build with Docker Compose & Gitea Actions deployment
This commit is contained in:
CalebLewallen
+143
@@ -0,0 +1,143 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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 doesn’t 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 property’s initial value.',
|
||||
'inherit': 'Represents the computed value of the property on the element’s 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: + - * /.',
|
||||
'if()': 'Evaluates a conditional expression.'
|
||||
};
|
||||
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-stop’s position and the first specified color-stop’s 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-stop’s position and the first specified color-stop’s 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'
|
||||
];
|
||||
+910
@@ -0,0 +1,910 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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.')
|
||||
},
|
||||
{
|
||||
label: 'lab',
|
||||
func: 'lab($lightness $channel_a $channel_b $alpha)',
|
||||
insertText: 'lab(${1:lightness} ${2:a} ${3:b} ${4:alpha})',
|
||||
desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values.')
|
||||
},
|
||||
{
|
||||
label: 'lab relative',
|
||||
func: 'lab(from $color $lightness $channel_a $channel_b $alpha)',
|
||||
insertText: 'lab(from ${1:color} ${2:lightness} ${3:channel_a} ${4:channel_b} ${5:alpha})',
|
||||
desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values of another Color.')
|
||||
},
|
||||
{
|
||||
label: 'lch',
|
||||
func: 'lch($lightness $chrome $hue $alpha)',
|
||||
insertText: 'lch(${1:lightness} ${2:chrome} ${3:hue} ${4:alpha})',
|
||||
desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values.')
|
||||
},
|
||||
{
|
||||
label: 'lch relative',
|
||||
func: 'lch(from $color $lightness $chrome $hue $alpha)',
|
||||
insertText: 'lch(from ${1:color} ${2:lightness} ${3:chrome} ${4:hue} ${5:alpha})',
|
||||
desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values of another Color.')
|
||||
}
|
||||
];
|
||||
const colorFunctionNameRegExp = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)$/iu;
|
||||
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, lowerLimit = 0, upperLimit = 1) {
|
||||
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 >= lowerLimit && result <= upperLimit) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
throw new Error();
|
||||
}
|
||||
const DEGREES_PER_CIRCLE = 360; // Number of degrees in a full circle
|
||||
const GRAD_TO_DEGREE_FACTOR = 0.9; // Conversion factor: grads to degrees
|
||||
const RADIANS_TO_DEGREES_FACTOR = DEGREES_PER_CIRCLE / 2 / Math.PI; // Conversion factor: radians to degrees
|
||||
function getAngle(node) {
|
||||
const textValue = node.getText();
|
||||
// Hue angle keyword `none` is the equivilient of `0deg`
|
||||
if (textValue === 'none') {
|
||||
return 0;
|
||||
}
|
||||
const m = /^(?<numberString>[-+]?[0-9]*\.?[0-9]+)(?<unit>deg|rad|grad|turn)?$/iu.exec(textValue);
|
||||
if (m?.groups?.['numberString']) {
|
||||
const value = Number.parseFloat(m.groups['numberString']);
|
||||
if (!Number.isNaN(value)) {
|
||||
switch (m.groups['unit']) {
|
||||
case 'deg': {
|
||||
return value % DEGREES_PER_CIRCLE;
|
||||
}
|
||||
case 'grad': {
|
||||
return (value * GRAD_TO_DEGREE_FACTOR) % DEGREES_PER_CIRCLE;
|
||||
}
|
||||
case 'rad': {
|
||||
return (value * RADIANS_TO_DEGREES_FACTOR) % DEGREES_PER_CIRCLE;
|
||||
}
|
||||
case 'turn': {
|
||||
return (value * DEGREES_PER_CIRCLE) % DEGREES_PER_CIRCLE;
|
||||
}
|
||||
default: {
|
||||
// Unitless angles are treated as degrees
|
||||
return value % DEGREES_PER_CIRCLE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
throw new Error(`Failed to parse '${textValue}' as angle`);
|
||||
}
|
||||
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 xyzFromLAB(lab) {
|
||||
const xyz = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
alpha: lab.alpha ?? 1
|
||||
};
|
||||
xyz.y = (lab.l + 16.0) / 116.0;
|
||||
xyz.x = (lab.a / 500.0) + xyz.y;
|
||||
xyz.z = xyz.y - (lab.b / 200.0);
|
||||
let key;
|
||||
for (key in xyz) {
|
||||
let pow = xyz[key] * xyz[key] * xyz[key];
|
||||
if (pow > 0.008856) {
|
||||
xyz[key] = pow;
|
||||
}
|
||||
else {
|
||||
xyz[key] = (xyz[key] - 16.0 / 116.0) / 7.787;
|
||||
}
|
||||
}
|
||||
xyz.x = xyz.x * 95.047;
|
||||
xyz.y = xyz.y * 100.0;
|
||||
xyz.z = xyz.z * 108.883;
|
||||
return xyz;
|
||||
}
|
||||
export function xyzFromOKLAB(lab) {
|
||||
// Convert from OKLab to XYZ
|
||||
// References: https://bottosson.github.io/posts/oklab/
|
||||
// lab.l is in 0-1 range
|
||||
// lab.a and lab.b are in -0.4 to 0.4 range
|
||||
const l = lab.l + 0.3963377774 * lab.a + 0.2158037573 * lab.b;
|
||||
const m = lab.l - 0.1055613458 * lab.a - 0.0638541728 * lab.b;
|
||||
const s = lab.l - 0.0894841775 * lab.a - 1.291485548 * lab.b;
|
||||
// Apply non-linearity using exponentiation
|
||||
const l3 = l ** 3;
|
||||
const m3 = m ** 3;
|
||||
const s3 = s ** 3;
|
||||
// Convert to XYZ
|
||||
const x = 1.2270138511 * l3 - 0.5577999807 * m3 + 0.281256149 * s3;
|
||||
const y = -0.0405801784 * l3 + 1.1122568696 * m3 - 0.0716766787 * s3;
|
||||
const z = -0.0763812845 * l3 - 0.4214819784 * m3 + 1.5861632204 * s3;
|
||||
return {
|
||||
x: x * 100,
|
||||
y: y * 100,
|
||||
z: z * 100,
|
||||
alpha: lab.alpha ?? 1,
|
||||
};
|
||||
}
|
||||
export function xyzToRGB(xyz) {
|
||||
const x = xyz.x / 100;
|
||||
const y = xyz.y / 100;
|
||||
const z = xyz.z / 100;
|
||||
const r = 3.2406254773200533 * x - 1.5372079722103187 * y - 0.4986285986982479 * z;
|
||||
const g = -0.9689307147293197 * x + 1.8757560608852415 * y + 0.041517523842953964 * z;
|
||||
const b = 0.055710120445510616 * x + -0.2040210505984867 * y + 1.0569959422543882 * z;
|
||||
const compand = (c) => {
|
||||
return c <= 0.0031308 ?
|
||||
12.92 * c :
|
||||
Math.min(1.055 * Math.pow(c, 1 / 2.4) - 0.055, 1);
|
||||
};
|
||||
return {
|
||||
red: Math.round(compand(r) * 255.0),
|
||||
blue: Math.round(compand(b) * 255.0),
|
||||
green: Math.round(compand(g) * 255.0),
|
||||
alpha: xyz.alpha
|
||||
};
|
||||
}
|
||||
export function RGBtoXYZ(rgba) {
|
||||
let r = rgba.red, g = rgba.green, b = rgba.blue;
|
||||
if (r > 0.04045) {
|
||||
r = Math.pow((r + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
else {
|
||||
r = r / 12.92;
|
||||
}
|
||||
if (g > 0.04045) {
|
||||
g = Math.pow((g + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
else {
|
||||
g = g / 12.92;
|
||||
}
|
||||
if (b > 0.04045) {
|
||||
b = Math.pow((b + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
else {
|
||||
b = b / 12.92;
|
||||
}
|
||||
r = r * 100;
|
||||
g = g * 100;
|
||||
b = b * 100;
|
||||
//Observer = 2°, Illuminant = D65
|
||||
const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
|
||||
const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
|
||||
const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
|
||||
return { x, y, z, alpha: rgba.alpha };
|
||||
}
|
||||
export function XYZtoLAB(xyz, round = true) {
|
||||
const ref_X = 95.047, ref_Y = 100.000, ref_Z = 108.883;
|
||||
let x = xyz.x / ref_X, y = xyz.y / ref_Y, z = xyz.z / ref_Z;
|
||||
if (x > 0.008856) {
|
||||
x = Math.pow(x, 1 / 3);
|
||||
}
|
||||
else {
|
||||
x = (7.787 * x) + (16 / 116);
|
||||
}
|
||||
if (y > 0.008856) {
|
||||
y = Math.pow(y, 1 / 3);
|
||||
}
|
||||
else {
|
||||
y = (7.787 * y) + (16 / 116);
|
||||
}
|
||||
if (z > 0.008856) {
|
||||
z = Math.pow(z, 1 / 3);
|
||||
}
|
||||
else {
|
||||
z = (7.787 * z) + (16 / 116);
|
||||
}
|
||||
const l = (116 * y) - 16, a = 500 * (x - y), b = 200 * (y - z);
|
||||
if (round) {
|
||||
return {
|
||||
l: Math.round((l + Number.EPSILON) * 100) / 100,
|
||||
a: Math.round((a + Number.EPSILON) * 100) / 100,
|
||||
b: Math.round((b + Number.EPSILON) * 100) / 100,
|
||||
alpha: xyz.alpha
|
||||
};
|
||||
}
|
||||
else {
|
||||
return {
|
||||
l, a, b,
|
||||
alpha: xyz.alpha
|
||||
};
|
||||
}
|
||||
}
|
||||
export function XYZtoOKLAB(xyz, round = true) {
|
||||
// Convert XYZ to OKLab
|
||||
// References: https://bottosson.github.io/posts/oklab/
|
||||
// Normalize XYZ values
|
||||
const x = xyz.x / 100;
|
||||
const y = xyz.y / 100;
|
||||
const z = xyz.z / 100;
|
||||
// Convert to LMS
|
||||
const l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
|
||||
const m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
|
||||
const s = 0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z;
|
||||
// Apply non-linearity
|
||||
const l_ = Math.cbrt(l);
|
||||
const m_ = Math.cbrt(m);
|
||||
const s_ = Math.cbrt(s);
|
||||
// Convert to OKLab
|
||||
const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
|
||||
const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
|
||||
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
|
||||
return round
|
||||
// 5 decimal places for precision
|
||||
? {
|
||||
l: Number(L.toFixed(5)),
|
||||
a: Number(a.toFixed(5)),
|
||||
b: Number(b.toFixed(5)),
|
||||
alpha: xyz.alpha,
|
||||
}
|
||||
: {
|
||||
l: L,
|
||||
a,
|
||||
b,
|
||||
alpha: xyz.alpha,
|
||||
};
|
||||
}
|
||||
export function labFromColor(rgba, round = true) {
|
||||
const xyz = RGBtoXYZ(rgba);
|
||||
const lab = XYZtoLAB(xyz, round);
|
||||
return lab;
|
||||
}
|
||||
export function oklabFromColor(rgba, round = true) {
|
||||
const xyz = RGBtoXYZ(rgba);
|
||||
const lab = XYZtoOKLAB(xyz, round);
|
||||
// Convert lightness to a percentage of oklab
|
||||
return { ...lab, l: lab.l * 100 };
|
||||
}
|
||||
/**
|
||||
* Calculate chroma and hue from Lab values
|
||||
* Returns LCH values without formatting/rounding
|
||||
*/
|
||||
function labToLCH(lab) {
|
||||
const c = Math.sqrt(Math.pow(lab.a, 2) + Math.pow(lab.b, 2));
|
||||
let h = Math.atan2(lab.b, lab.a) * RADIANS_TO_DEGREES_FACTOR;
|
||||
while (h < 0) {
|
||||
h = h + 360;
|
||||
}
|
||||
return {
|
||||
l: lab.l,
|
||||
c: c,
|
||||
h: h,
|
||||
alpha: lab.alpha,
|
||||
};
|
||||
}
|
||||
export function lchFromColor(rgba) {
|
||||
const lab = labFromColor(rgba, false);
|
||||
const lch = labToLCH(lab);
|
||||
return {
|
||||
l: Math.round((lch.l + Number.EPSILON) * 100) / 100,
|
||||
c: Math.round((lch.c + Number.EPSILON) * 100) / 100,
|
||||
h: Math.round((lch.h + Number.EPSILON) * 100) / 100,
|
||||
alpha: lch.alpha,
|
||||
};
|
||||
}
|
||||
export function oklchFromColor(rgba) {
|
||||
const lab = oklabFromColor(rgba, false);
|
||||
const lch = labToLCH(lab);
|
||||
return {
|
||||
l: Number((lch.l).toFixed(3)),
|
||||
c: Number(lch.c.toFixed(5)),
|
||||
h: Number(lch.h.toFixed(3)),
|
||||
alpha: lch.alpha,
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Generic function to convert LAB/OKLAB to Color
|
||||
*/
|
||||
function labToColor(lab, xyzConverter) {
|
||||
const xyz = xyzConverter(lab);
|
||||
const rgb = xyzToRGB(xyz);
|
||||
return {
|
||||
red: (rgb.red >= 0 ? Math.min(rgb.red, 255) : 0) / 255,
|
||||
green: (rgb.green >= 0 ? Math.min(rgb.green, 255) : 0) / 255,
|
||||
blue: (rgb.blue >= 0 ? Math.min(rgb.blue, 255) : 0) / 255,
|
||||
alpha: lab.alpha ?? 1,
|
||||
};
|
||||
}
|
||||
export function colorFromLAB(l, a, b, alpha = 1) {
|
||||
return labToColor({ l, a, b, alpha }, xyzFromLAB);
|
||||
}
|
||||
export function colorFromOKLAB(l, a, b, alpha = 1) {
|
||||
return labToColor({ l, a, b, alpha }, xyzFromOKLAB);
|
||||
}
|
||||
const DEGREES_TO_RADIANS_FACTOR = Math.PI / 180;
|
||||
export function labFromLCH(l, c, h, alpha = 1) {
|
||||
return {
|
||||
l: l,
|
||||
a: c * Math.cos(h * DEGREES_TO_RADIANS_FACTOR),
|
||||
b: c * Math.sin(h * DEGREES_TO_RADIANS_FACTOR),
|
||||
alpha: alpha,
|
||||
};
|
||||
}
|
||||
export function colorFromLCH(l, c, h, alpha = 1) {
|
||||
const lab = labFromLCH(l, c, h, alpha);
|
||||
return colorFromLAB(lab.l, lab.a, lab.b, alpha);
|
||||
}
|
||||
export function colorFromOKLCH(l, c, h, alpha = 1) {
|
||||
const lab = labFromLCH(l, c, h, alpha); // Conversion is the same as LCH->LAB for OKLCH-OKLAB
|
||||
return colorFromOKLAB(lab.l, lab.a, lab.b, alpha);
|
||||
}
|
||||
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;
|
||||
switch (name) {
|
||||
case 'rgb':
|
||||
case 'rgba': {
|
||||
return {
|
||||
red: getNumericValue(colorValues[0], 255),
|
||||
green: getNumericValue(colorValues[1], 255),
|
||||
blue: getNumericValue(colorValues[2], 255),
|
||||
alpha,
|
||||
};
|
||||
}
|
||||
case 'hsl':
|
||||
case 'hsla': {
|
||||
const h = getAngle(colorValues[0]);
|
||||
const s = getNumericValue(colorValues[1], 100);
|
||||
const l = getNumericValue(colorValues[2], 100);
|
||||
return colorFromHSL(h, s, l, alpha);
|
||||
}
|
||||
case 'hwb': {
|
||||
const h = getAngle(colorValues[0]);
|
||||
const w = getNumericValue(colorValues[1], 100);
|
||||
const b = getNumericValue(colorValues[2], 100);
|
||||
return colorFromHWB(h, w, b, alpha);
|
||||
}
|
||||
case 'lab': {
|
||||
// Reference: https://mina86.com/2021/srgb-lab-lchab-conversions/
|
||||
const l = getNumericValue(colorValues[0], 100);
|
||||
// Since these two values can be negative, a lower limit of -1 has been added
|
||||
const a = getNumericValue(colorValues[1], 125, -1);
|
||||
const b = getNumericValue(colorValues[2], 125, -1);
|
||||
return colorFromLAB(l * 100, a * 125, b * 125, alpha);
|
||||
}
|
||||
case 'lch': {
|
||||
const l = getNumericValue(colorValues[0], 100);
|
||||
const c = getNumericValue(colorValues[1], 230);
|
||||
const h = getAngle(colorValues[2]);
|
||||
return colorFromLCH(l * 100, c * 230, h, alpha);
|
||||
}
|
||||
case 'oklab': {
|
||||
const l = getNumericValue(colorValues[0], 1);
|
||||
// Since these two values can be negative, a lower limit of -1 has been added
|
||||
const a = getNumericValue(colorValues[1], 0.4, -1);
|
||||
const b = getNumericValue(colorValues[2], 0.4, -1);
|
||||
return colorFromOKLAB(l, a * 0.4, b * 0.4, alpha);
|
||||
}
|
||||
case 'oklch': {
|
||||
const l = getNumericValue(colorValues[0], 1);
|
||||
const c = getNumericValue(colorValues[1], 0.4);
|
||||
const h = getAngle(colorValues[2]);
|
||||
return colorFromOKLCH(l, c * 0.4, h, alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch {
|
||||
// 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;
|
||||
}
|
||||
+88
@@ -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');
|
||||
}
|
||||
}
|
||||
+73
@@ -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';
|
||||
}
|
||||
+202
@@ -0,0 +1,202 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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 = {
|
||||
'C': {
|
||||
name: 'Chrome',
|
||||
platform: 'desktop'
|
||||
},
|
||||
'CA': {
|
||||
name: 'Chrome',
|
||||
platform: 'Android'
|
||||
},
|
||||
'E': {
|
||||
name: 'Edge',
|
||||
platform: 'desktop'
|
||||
},
|
||||
'FF': {
|
||||
name: 'Firefox',
|
||||
platform: 'desktop'
|
||||
},
|
||||
'FFA': {
|
||||
name: 'Firefox',
|
||||
platform: 'Android'
|
||||
},
|
||||
'S': {
|
||||
name: 'Safari',
|
||||
platform: 'macOS'
|
||||
},
|
||||
'SM': {
|
||||
name: 'Safari',
|
||||
platform: 'iOS'
|
||||
}
|
||||
};
|
||||
const shortCompatPattern = /(E|FFA|FF|SM|S|CA|C|IE|O)([\d|\.]+)?/;
|
||||
export const BaselineImages = {
|
||||
BASELINE_LIMITED: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmF5LXNoYXBlIHsKICAgICAgZmlsbDogI0M2QzZDNjsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmdyYXktc2hhcGUgewogICAgICAgIGZpbGw6ICM1NjU2NTY7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMjQwIDkwTDIxMCAxMjBMMTIwIDMwTDE1MCAwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik00MjAgMzBMNTQwIDE1MEw0MjAgMjcwTDM5MCAyNDBMNDgwIDE1MEwzOTAgNjBMNDIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzMDAgMjEwTDM5MCAzMDBMNDIwIDI3MEwzMzAgMTgwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik0xMjAgMzBMMTUwIDYwTDYwIDE1MEwxNTAgMjQwTDEyMCAyNzBMMCAxNTBMMTIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDBMNDIwIDMwTDE1MCAzMDBMMTIwIDI3MEwzOTAgMFoiIGZpbGw9IiNGMDk0MDkiLz4KPC9zdmc+',
|
||||
BASELINE_LOW: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ibHVlLXNoYXBlIHsKICAgICAgZmlsbDogI0E4QzdGQTsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmJsdWUtc2hhcGUgewogICAgICAgIGZpbGw6ICMyRDUwOUU7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CgogICAgLmRhcmtlci1ibHVlLXNoYXBlIHsKICAgICAgICBmaWxsOiAjMUI2RUYzOwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgICAuZGFya2VyLWJsdWUtc2hhcGUgewogICAgICAgICAgICBmaWxsOiAjNDE4NUZGOwogICAgICAgIH0KICAgIH0KCiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMTgwIDMwTDE1MCA2MEwxMjAgMzBMMTUwIDBaIiBjbGFzcz0iYmx1ZS1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0yMTAgNjBMMjQwIDkwTDIxMCAxMjBMMTgwIDkwTDIxMCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTQ1MCA2MEw0ODAgOTBMNDUwIDEyMEw0MjAgOTBMNDUwIDYwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNTEwIDEyMEw1NDAgMTUwTDUxMCAxODBMNDgwIDE1MEw1MTAgMTIwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNDUwIDE4MEw0ODAgMjEwTDQ1MCAyNDBMNDIwIDIxMEw0NTAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDI0MEw0MjAgMjcwTDM5MCAzMDBMMzYwIDI3MEwzOTAgMjQwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzNjAgMjEwTDMzMCAyNDBMMzAwIDIxMEwzMzAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNOTAgNjBMMTIwIDkwTDkwIDEyMEw2MCA5MEw5MCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTM5MCAwTDQyMCAzMEwxNTAgMzAwTDAgMTUwTDMwIDEyMEwxNTAgMjQwTDM5MCAwWiIgY2xhc3M9ImRhcmtlci1ibHVlLXNoYXBlIi8+Cjwvc3ZnPg==',
|
||||
BASELINE_HIGH: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgIGZpbGw6ICNDNEVFRDA7IC8qIExpZ2h0IG1vZGUgKi8KICAgIH0KCiAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7CiAgICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgICAgZmlsbDogIzEyNTIyNTsgLyogRGFyayBtb2RlICovCiAgICAgIH0KICAgIH0KICA8L3N0eWxlPgogIDxwYXRoIGQ9Ik00MjAgMzBMMzkwIDYwTDQ4MCAxNTBMMzkwIDI0MEwzMzAgMTgwTDMwMCAyMTBMMzkwIDMwMEw1NDAgMTUwTDQyMCAzMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0xNTAgMEwzMCAxMjBMNjAgMTUwTDE1MCA2MEwyMTAgMTIwTDI0MCA5MEwxNTAgMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0zOTAgMEw0MjAgMzBMMTUwIDMwMEwwIDE1MEwzMCAxMjBMMTUwIDI0MEwzOTAgMFoiIGZpbGw9IiMxRUE0NDYiLz4KPC9zdmc+'
|
||||
};
|
||||
function getEntryStatus(status) {
|
||||
switch (status) {
|
||||
case 'nonstandard':
|
||||
return '🚨️ Property is nonstandard. Avoid using it.\n\n';
|
||||
case 'obsolete':
|
||||
return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
function getEntryBaselineStatus(baseline, browsers) {
|
||||
if (baseline.status === "false") {
|
||||
const missingBrowsers = getMissingBaselineBrowsers(browsers);
|
||||
let status = `Limited availability across major browsers`;
|
||||
if (missingBrowsers) {
|
||||
status += ` (Not fully implemented in ${missingBrowsers})`;
|
||||
}
|
||||
return status;
|
||||
}
|
||||
const baselineYear = baseline.baseline_low_date?.split('-')[0];
|
||||
return `${baseline.status === 'low' ? 'Newly' : 'Widely'} available across major browsers (Baseline since ${baselineYear})`;
|
||||
}
|
||||
function getEntryBaselineImage(baseline) {
|
||||
if (!baseline) {
|
||||
return '';
|
||||
}
|
||||
let baselineImg;
|
||||
switch (baseline?.status) {
|
||||
case 'low':
|
||||
baselineImg = BaselineImages.BASELINE_LOW;
|
||||
break;
|
||||
case 'high':
|
||||
baselineImg = BaselineImages.BASELINE_HIGH;
|
||||
break;
|
||||
default:
|
||||
baselineImg = BaselineImages.BASELINE_LIMITED;
|
||||
}
|
||||
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, '<').replace(/>/g, '>');
|
||||
}
|
||||
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) {
|
||||
let status = '';
|
||||
if (entry.status) {
|
||||
status = getEntryStatus(entry.status);
|
||||
result += status;
|
||||
}
|
||||
result += entry.description;
|
||||
if (entry.baseline && !status) {
|
||||
result += `\n\n${getEntryBaselineStatus(entry.baseline, entry.browsers)}`;
|
||||
}
|
||||
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) {
|
||||
let status = '';
|
||||
if (entry.status) {
|
||||
status = getEntryStatus(entry.status);
|
||||
result += status;
|
||||
}
|
||||
if (typeof entry.description === 'string') {
|
||||
result += textToMarkedString(entry.description);
|
||||
}
|
||||
else {
|
||||
result += entry.description.kind === MarkupKind.Markdown ? entry.description.value : textToMarkedString(entry.description.value);
|
||||
}
|
||||
if (entry.baseline && !status) {
|
||||
result += `\n\n${getEntryBaselineImage(entry.baseline)} _${getEntryBaselineStatus(entry.baseline, entry.browsers)}_`;
|
||||
}
|
||||
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;
|
||||
}
|
||||
// TODO: Remove "as any" when tsconfig supports es2021+
|
||||
const missingBaselineBrowserFormatter = new Intl.ListFormat("en", {
|
||||
style: "long",
|
||||
type: "disjunction",
|
||||
});
|
||||
/**
|
||||
* Input is like [E12, FF28, FM28, C29, CM29, IE11, O16]
|
||||
* Output is like `Safari`
|
||||
*/
|
||||
export function getMissingBaselineBrowsers(browsers) {
|
||||
if (!browsers) {
|
||||
return '';
|
||||
}
|
||||
const missingBrowsers = new Map(Object.entries(browserNames));
|
||||
for (const shortCompatString of browsers) {
|
||||
const match = shortCompatPattern.exec(shortCompatString);
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
const browser = match[1];
|
||||
missingBrowsers.delete(browser);
|
||||
}
|
||||
return missingBaselineBrowserFormatter.format(Object.values(Array.from(missingBrowsers.entries()).reduce((browsers, [browserId, browser]) => {
|
||||
if (browser.name in browsers || browserId === 'E') {
|
||||
browsers[browser.name] = browser.name;
|
||||
return browsers;
|
||||
}
|
||||
// distinguish between platforms when applicable
|
||||
browsers[browser.name] = `${browser.name} on ${browser.platform}`;
|
||||
return browsers;
|
||||
}, {})));
|
||||
}
|
||||
+8
@@ -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';
|
||||
Reference in New Issue
Block a user