Make isColor faster (#13404)

When the arrays of colors were split, both smaller, and had different values to lookup an `includes` check was faster. Since they’ve been merged a Set is now beneficial.
tailwindlabs · Mar 29, 2024 · a79fa45 · a79fa45
1 parent 500372e
commit a79fa45
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/tailwindcss/src/utils/infer-data-type.bench.ts b/packages/tailwindcss/src/utils/infer-data-type.bench.ts
@@ -3,6 +3,8 @@ import { inferDataType } from './infer-data-type'
 
 const colors = [
   'slateblue',
+  'black',
+  'orange',
   'rgb(255, 255, 255)',
   'rgba(255, 255, 255, 1)',
   'hsl(0, 0%, 100%)',

diff --git a/packages/tailwindcss/src/utils/is-color.ts b/packages/tailwindcss/src/utils/is-color.ts
@@ -1,4 +1,4 @@
-const NAMED_COLORS = [
+const NAMED_COLORS = new Set([
   // CSS Level 1 colors
   'black',
   'silver',
@@ -191,14 +191,14 @@ const NAMED_COLORS = [
   'graytext',
   'accentcolor',
   'accentcolortext',
-]
+])
 
 const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix)\(/i
 
 export function isColor(value: string): boolean {
   return (
     value.charCodeAt(0) === 35 /* "#" */ ||
     IS_COLOR_FN.test(value) ||
-    NAMED_COLORS.includes(value.toLowerCase())
+    NAMED_COLORS.has(value.toLowerCase())
   )
 }