diff --git a/package-lock.json b/package-lock.json index 4ef6114..afbdf2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.5.0", "license": "EUPL-1.2", "dependencies": { - "@projectwallace/css-analyzer": "^7.5.1", + "@projectwallace/css-analyzer": "^7.6.0", "color-sorter": "^7.0.0", "colorjs.io": "^0.6.0-alpha.1", "css-time-sort": "^3.0.0", @@ -591,9 +591,9 @@ } }, "node_modules/@projectwallace/css-analyzer": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/@projectwallace/css-analyzer/-/css-analyzer-7.5.1.tgz", - "integrity": "sha512-iSfZBGwLbisecZTDZQrqeCk4ocUysCIyWHMvW5MRlSq4RwHECfL6imcbq/Y9RmFXtJDBJLvePZ9eygwRyAaYbw==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@projectwallace/css-analyzer/-/css-analyzer-7.6.0.tgz", + "integrity": "sha512-up4GNW2WM/L0cKBrwhoKKcKB+Q9gRvlL9+llGRh9wZraUSzlJSoVvv76Olsx6K/gfQjZZxQiwQEBwcsVcVfDlg==", "license": "MIT", "dependencies": { "@bramus/specificity": "^2.4.2", diff --git a/package.json b/package.json index 2173cb1..9739a9d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "check": "tsc --noEmit" }, "dependencies": { - "@projectwallace/css-analyzer": "^7.5.1", + "@projectwallace/css-analyzer": "^7.6.0", "color-sorter": "^7.0.0", "colorjs.io": "^0.6.0-alpha.1", "css-time-sort": "^3.0.0", diff --git a/src/colors.ts b/src/colors.ts index 25299b4..069e7f6 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -1,4 +1,4 @@ -import { KeywordSet } from './keyword-set.js' +import { colorKeywords as color_keywords, cssKeywords as css_keywords } from '@projectwallace/css-analyzer' import { EXTENSION_AUTHORED_AS, type ColorToken, type UnparsedToken } from './types.js' import { parse, @@ -51,209 +51,6 @@ ColorSpace.register(OKLab) ColorSpace.register(OKLCH) ColorSpace.register(OKLrab) -export const named_colors = new KeywordSet([ - // CSS Named Colors - // 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', - 'gray', - 'silver', - 'grey', - 'green', - 'orange', - 'blue', - 'dimgray', - 'whitesmoke', - 'lightgray', - 'lightgrey', - 'yellow', - 'gold', - 'pink', - 'gainsboro', - 'magenta', - 'purple', - 'darkgray', - 'navy', - 'darkred', - 'teal', - 'maroon', - 'darkgrey', - 'tomato', - 'darkorange', - 'brown', - 'crimson', - 'lightyellow', - 'slategray', - 'salmon', - 'lightgreen', - 'lightblue', - 'orangered', - 'aliceblue', - 'dodgerblue', - 'lime', - 'darkblue', - 'darkgoldenrod', - 'skyblue', - 'royalblue', - 'darkgreen', - 'ivory', - 'olive', - 'aqua', - 'turquoise', - 'cyan', - 'khaki', - 'beige', - 'snow', - 'ghostwhite', - 'limegreen', - 'coral', - 'dimgrey', - 'hotpink', - 'midnightblue', - 'firebrick', - 'indigo', - 'wheat', - 'mediumblue', - 'lightpink', - 'plum', - 'azure', - 'violet', - 'lavender', - 'deepskyblue', - 'darkslategrey', - 'goldenrod', - 'cornflowerblue', - 'lightskyblue', - 'indianred', - 'yellowgreen', - 'saddlebrown', - 'palegreen', - 'bisque', - 'tan', - 'antiquewhite', - 'steelblue', - 'forestgreen', - 'fuchsia', - 'mediumaquamarine', - 'seagreen', - 'sienna', - 'deeppink', - 'mediumseagreen', - 'peru', - 'greenyellow', - 'lightgoldenrodyellow', - 'orchid', - 'cadetblue', - 'navajowhite', - 'lightsteelblue', - 'slategrey', - 'linen', - 'lightseagreen', - 'darkcyan', - 'lightcoral', - 'aquamarine', - 'blueviolet', - 'cornsilk', - 'lightsalmon', - 'chocolate', - 'lightslategray', - 'floralwhite', - 'darkturquoise', - 'darkslategray', - 'rebeccapurple', - 'burlywood', - 'chartreuse', - 'lightcyan', - 'lemonchiffon', - 'palevioletred', - 'darkslateblue', - 'mediumpurple', - 'lawngreen', - 'slateblue', - 'darkseagreen', - 'blanchedalmond', - 'mistyrose', - 'darkolivegreen', - 'seashell', - 'olivedrab', - 'peachpuff', - 'darkviolet', - 'powderblue', - 'darkmagenta', - 'lightslategrey', - 'honeydew', - 'palegoldenrod', - 'darkkhaki', - 'oldlace', - 'mintcream', - 'sandybrown', - 'mediumturquoise', - 'papayawhip', - 'paleturquoise', - 'mediumvioletred', - 'thistle', - 'springgreen', - 'moccasin', - 'rosybrown', - 'lavenderblush', - 'mediumslateblue', - 'darkorchid', - 'mediumorchid', - 'darksalmon', - 'mediumspringgreen', -]) - -export const system_colors = new KeywordSet([ - // CSS System Colors - // Spec: https://drafts.csswg.org/css-color/#css-system-colors - 'accentcolor', - 'accentcolortext', - 'activetext', - 'buttonborder', - 'buttonface', - 'buttontext', - 'canvas', - 'canvastext', - 'field', - 'fieldtext', - 'graytext', - 'highlight', - 'highlighttext', - 'linktext', - 'mark', - 'marktext', - 'selecteditem', - 'selecteditemtext', - 'visitedtext', -]) - -export const color_functions = new KeywordSet([ - 'rgba', - 'rgb', - 'hsla', - 'hsl', - 'oklch', - 'color', - 'hwb', - 'lch', - 'lab', - 'oklab', -]) - -// List of CSS keywords that we will treat as full black colors. -const color_keywords = new KeywordSet([ - 'currentcolor', - 'inherit', - 'initial', - 'unset', - 'revert', - 'revert-layer', -]) - export function color_to_token(color: string): ColorToken | UnparsedToken | null { let lowercased = color.toLowerCase() @@ -273,7 +70,7 @@ export function color_to_token(color: string): ColorToken | UnparsedToken | null } } - if (color_keywords.has(lowercased)) { + if (css_keywords.has(lowercased) || color_keywords.has(lowercased)) { return null } diff --git a/src/destructure-box-shadow.ts b/src/destructure-box-shadow.ts index 3a35c66..fecc1a1 100644 --- a/src/destructure-box-shadow.ts +++ b/src/destructure-box-shadow.ts @@ -1,6 +1,7 @@ import { parse, type CssNode, type Value } from 'css-tree' -import { named_colors, system_colors, color_functions, color_to_token } from './colors.js' +import { color_to_token } from './colors.js' import type { ColorToken, ColorValue } from './types.js' +import { namedColors as named_colors, systemColors as system_colors, colorFunctions as color_functions } from '@projectwallace/css-analyzer' type CssLength = { value: number diff --git a/src/keyword-set.test.ts b/src/keyword-set.test.ts deleted file mode 100644 index bca3b04..0000000 --- a/src/keyword-set.test.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { KeywordSet } from './keyword-set' -import { test, expect } from 'vitest' - -test('happy path', () => { - expect.soft(new KeywordSet([]).has('a')).toBeFalsy() - expect.soft(new KeywordSet([]).has('')).toBeFalsy() - expect.soft(new KeywordSet(['a', 'b']).has('a')).toBeTruthy() - expect.soft(new KeywordSet(['a', 'b']).has('A')).toBeTruthy() - expect.soft(new KeywordSet(['a', 'b']).has('aa')).toBeFalsy() - - expect.soft(new KeywordSet(['currentcolor']).has('currentColor')).toBeTruthy() - expect.soft(new KeywordSet(['marktext']).has('MarkText')).toBeTruthy() - expect.soft(new KeywordSet(['revert-layer']).has('Revert-Layer')).toBeTruthy() -}) diff --git a/src/keyword-set.ts b/src/keyword-set.ts deleted file mode 100644 index cbd3248..0000000 --- a/src/keyword-set.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @description A Set-like construct to search CSS keywords in a case-insensitive way - */ -export class KeywordSet { - private set: Set - - constructor(items: Lowercase[]) { - this.set = new Set(items) - } - - has(item: string) { - return this.set.has(item.toLowerCase()) - } -}