perf: decrease bundle size 25%; reuse keyword lists from analyzer

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",

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
 	}
 

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