Replace color with culori

Author: htunnicliff

package-lock.json

@@ -70,8 +70,8 @@
     "arg": "^5.0.1",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.2",
-    "color": "^4.0.1",
     "cosmiconfig": "^7.0.1",
+    "culori": "^0.19.1",
     "detective": "^5.2.0",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",

package.json

@@ -1,6 +1,6 @@
 import selectorParser from 'postcss-selector-parser'
 import postcss from 'postcss'
-import createColor from 'color'
+import culori from 'culori'
 import escapeCommas from './escapeCommas'
 import { withAlphaValue } from './withAlphaVariable'
 import isKeyframeRule from './isKeyframeRule'
@@ -222,12 +222,7 @@ function splitAlpha(modifier) {
 }
 
 function isColor(value) {
-  try {
-    createColor(value)
-    return true
-  } catch (e) {
-    return false
-  }
+  return culori.parse(value) !== undefined
 }
 
 export function asColor(modifier, lookup = {}, tailwindConfig = {}) {

src/util/pluginUtils.js

@@ -1,39 +1,31 @@
-import createColor from 'color'
+import culori from 'culori'
 import _ from 'lodash'
 
-function hasAlpha(color) {
-  return (
-    color.startsWith('rgba(') ||
-    color.startsWith('hsla(') ||
-    (color.startsWith('#') && color.length === 9) ||
-    (color.startsWith('#') && color.length === 5)
-  )
-}
-
-export function toRgba(color) {
-  const [r, g, b, a] = createColor(color).rgb().array()
-
-  return [r, g, b, a === undefined && hasAlpha(color) ? 1 : a]
-}
-
-export function toHsla(color) {
-  const [h, s, l, a] = createColor(color).hsl().array()
-
-  return [h, `${s}%`, `${l}%`, a === undefined && hasAlpha(color) ? 1 : a]
+function isValidColor(color) {
+  return culori.parse(color) !== undefined
 }
 
 export function withAlphaValue(color, alphaValue, defaultValue) {
   if (_.isFunction(color)) {
     return color({ opacityValue: alphaValue })
   }
 
-  try {
-    const isHSL = color.startsWith('hsl')
-    const [i, j, k] = isHSL ? toHsla(color) : toRgba(color)
-    return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${alphaValue})`
-  } catch {
-    return defaultValue
+  if (isValidColor(color)) {
+    // Parse color
+    const parsed = culori.parse(color)
+
+    // Apply alpha value
+    parsed.alpha = alphaValue
+
+    // Return formatted string
+    if (parsed.mode === 'hsl') {
+      return culori.formatHsl(parsed)
+    } else {
+      return culori.formatRgb(parsed)
+    }
   }
+
+  return defaultValue
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
@@ -44,24 +36,32 @@ export default function withAlphaVariable({ color, property, variable }) {
     }
   }
 
-  try {
-    const isHSL = color.startsWith('hsl')
-
-    const [i, j, k, a] = isHSL ? toHsla(color) : toRgba(color)
+  if (isValidColor(color)) {
+    const { alpha = 1, mode } = culori.parse(color)
 
-    if (a !== undefined) {
+    if (alpha !== 1) {
+      // Has an alpha value, return color as-is
       return {
         [property]: color,
       }
     }
 
-    return {
-      [variable]: '1',
-      [property]: `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, var(${variable}))`,
+    let value
+    if (mode === 'hsl') {
+      const { h, s, l } = culori.hsl(color)
+      value = `hsla(${h}, ${s}, ${l}, var(${variable}))`
+    } else {
+      const { r, g, b } = culori.rgb(color)
+      value = `rgba(${r}, ${g}, ${b}, var(${variable}))`
     }
-  } catch (error) {
+
     return {
-      [property]: color,
+      [variable]: '1',
+      [property]: value,
     }
   }
+
+  return {
+    [property]: color,
+  }
 }