find colors quicker by sorting by most-used (#384)

closes #383
projectwallace · Jan 21, 2024 · 5384f6f · 5384f6f
1 parent 6bfcda7
commit 5384f6f
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 138 deletions.
diff --git 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
@@ -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([