diff --git a/src/index.js b/src/index.js index 725b626..abf7ae6 100644 --- a/src/index.js +++ b/src/index.js @@ -541,20 +541,23 @@ export function analyze(css, options = {}) { return this.skip } - if (namedColors.has(nodeName)) { + // A keyword is most likely to be 'transparent' or 'currentColor' + if (colorKeywords.has(nodeName)) { let stringified = stringifyNode(valueNode) colors.push(stringified, property, loc) - colorFormats.p('named', loc) + colorFormats.p(nodeName.toLowerCase(), loc) return } - if (colorKeywords.has(nodeName)) { + // Or it can be a named color + if (namedColors.has(nodeName)) { let stringified = stringifyNode(valueNode) colors.push(stringified, property, loc) - colorFormats.p(nodeName.toLowerCase(), loc) + colorFormats.p('named', loc) return } + // Or it can be a system color if (systemColors.has(nodeName)) { let stringified = stringifyNode(valueNode) colors.push(stringified, property, loc) @@ -569,6 +572,7 @@ export function analyze(css, options = {}) { return this.skip } + // rgb(a), hsl(a), color(), hwb(), lch(), lab(), oklab(), oklch() if (colorFunctions.has(nodeName)) { colors.push(stringifyNode(valueNode), property, valueNode.loc) colorFormats.p(nodeName.toLowerCase(), valueNode.loc) diff --git a/src/values/colors.js b/src/values/colors.js index b148e12..5a09f18 100644 --- a/src/values/colors.js +++ b/src/values/colors.js @@ -5,193 +5,209 @@ export const namedColors = new KeywordSet([ // Spec: https://drafts.csswg.org/css-color/#named-colors // Heuristic: popular names first for quick finding in set.has() + // See: https://docs.google.com/spreadsheets/d/1OU8ahxC5oYU8VRryQs9BzHToaXcOntVlh6KUHjm15G4/edit#gid=2096495459 'white', 'black', 'red', - 'blue', 'gray', + 'silver', 'grey', 'green', - 'rebeccapurple', - 'yellow', 'orange', - - 'aliceblue', - 'antiquewhite', - 'aqua', - 'aquamarine', - 'azure', - 'beige', - 'bisque', - 'blanchedalmond', - 'blueviolet', + 'blue', + 'dimgray', + 'whitesmoke', + 'lightgray', + 'lightgrey', + 'yellow', + 'gold', + 'pink', + 'gainsboro', + 'magenta', + 'purple', + 'darkgray', + 'navy', + 'darkred', + 'teal', + 'maroon', + 'darkgrey', + 'tomato', + 'darkorange', 'brown', - 'burlywood', - 'cadetblue', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', 'crimson', - 'cyan', + 'lightyellow', + 'slategray', + 'salmon', + 'lightgreen', + 'lightblue', + 'orangered', + 'aliceblue', + 'dodgerblue', + 'lime', 'darkblue', - 'darkcyan', 'darkgoldenrod', - 'darkgray', + 'skyblue', + 'royalblue', 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'deeppink', - 'deepskyblue', - 'dimgray', + 'ivory', + 'olive', + 'aqua', + 'turquoise', + 'cyan', + 'khaki', + 'beige', + 'snow', + 'ghostwhite', + 'limegreen', + 'coral', 'dimgrey', - 'dodgerblue', + 'hotpink', + 'midnightblue', 'firebrick', - 'floralwhite', + 'indigo', + 'wheat', + 'mediumblue', + 'lightpink', + 'plum', + 'azure', + 'violet', + 'lavender', + 'deepskyblue', + 'darkslategrey', + 'goldenrod', + 'cornflowerblue', + 'lightskyblue', + 'indianred', + 'yellowgreen', + 'saddlebrown', + 'palegreen', + 'bisque', + 'tan', + 'antiquewhite', + 'steelblue', 'forestgreen', 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', + 'mediumaquamarine', + 'seagreen', + 'sienna', + 'deeppink', + 'mediumseagreen', + 'peru', 'greenyellow', - 'honeydew', - 'hotpink', - 'indianred', - 'indigo', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', + 'orchid', + 'cadetblue', + 'navajowhite', 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', + 'slategrey', 'linen', - 'magenta', - 'maroon', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', + 'lightseagreen', + 'darkcyan', + 'lightcoral', + 'aquamarine', + 'blueviolet', + 'cornsilk', + 'lightsalmon', + 'chocolate', + 'lightslategray', + 'floralwhite', + 'darkturquoise', + 'darkslategray', + 'rebeccapurple', + 'burlywood', + 'chartreuse', + 'lightcyan', + 'lemonchiffon', + 'palevioletred', + 'darkslateblue', 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'midnightblue', - 'mintcream', + 'lawngreen', + 'slateblue', + 'darkseagreen', + 'blanchedalmond', 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'oldlace', - 'olive', + 'darkolivegreen', + 'seashell', 'olivedrab', - 'orangered', - 'orchid', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', 'peachpuff', - 'peru', - 'pink', - 'plum', + 'darkviolet', 'powderblue', - 'purple', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', + 'darkmagenta', + 'lightslategrey', + 'honeydew', + 'palegoldenrod', + 'darkkhaki', + 'oldlace', + 'mintcream', 'sandybrown', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'springgreen', - 'steelblue', - 'tan', - 'teal', + 'mediumturquoise', + 'papayawhip', + 'paleturquoise', + 'mediumvioletred', 'thistle', - 'tomato', - 'turquoise', - 'violet', - 'wheat', - 'whitesmoke', - 'yellowgreen', + 'springgreen', + 'moccasin', + 'rosybrown', + 'lavenderblush', + 'mediumslateblue', + 'darkorchid', + 'mediumorchid', + 'darksalmon', + 'mediumspringgreen', ]) export const systemColors = new KeywordSet([ // CSS System Colors // Spec: https://drafts.csswg.org/css-color/#css-system-colors + // TODO: Deprecated CSS System colors + // Spec: https://drafts.csswg.org/css-color/#deprecated-system-colors + 'background', + 'buttontext', + 'highlight', + 'windowtext', + 'graytext', + 'highlighttext', + 'buttonface', + 'window', + 'buttonshadow', + 'buttonhighlight', + 'menu', + 'windowframe', + 'activeborder', + 'infotext', + 'infobackground', + 'activecaption', + 'menutext', + 'scrollbar', + 'inactivecaption', + 'appworkspace', + 'inactiveborder', + 'inactivecaptiontext', 'canvas', 'canvastext', 'linktext', 'visitedtext', 'activetext', - 'buttonface', - 'buttontext', 'buttonborder', 'field', 'fieldtext', - 'highlight', - 'highlighttext', 'selecteditem', 'selecteditemtext', 'mark', 'marktext', - 'graytext', - - // TODO: Deprecated CSS System colors - // Spec: https://drafts.csswg.org/css-color/#deprecated-system-colors ]) export const colorFunctions = new KeywordSet([ - 'rgb', 'rgba', - 'hsl', + 'rgb', 'hsla', + 'hsl', + 'color', 'hwb', - 'lab', 'lch', + 'lab', 'oklab', 'oklch', - 'color', ]) export const colorKeywords = new KeywordSet([