Merge branch 'hsl-spaces'

Author: RobinMalfait

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 * as 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,42 @@
-import createColor from 'color'
+import * as 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
+
+    // Format string
+    let value
+    if (parsed.mode === 'hsl') {
+      value = culori.formatHsl(parsed)
+    } else {
+      value = culori.formatRgb(parsed)
+    }
+
+    // Correctly apply CSS variable alpha value
+    if (typeof alphaValue === 'string' && alphaValue.startsWith('var(') && value.endsWith('NaN)')) {
+      value = value.replace('NaN)', `${alphaValue})`)
+    }
+
+    // Color could not be formatted correctly
+    if (!value.includes('NaN')) {
+      return value
+    }
   }
+
+  return defaultValue
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
@@ -44,24 +47,29 @@ 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 parsed = culori.parse(color)
 
-    if (a !== undefined) {
+    if ('alpha' in parsed) {
+      // Has an alpha value, return color as-is
       return {
         [property]: color,
       }
     }
 
+    const formatFn = parsed.mode === 'hsl' ? 'formatHsl' : 'formatRgb'
+    const value = culori[formatFn]({
+      ...parsed,
+      alpha: NaN, // intentionally set to `NaN` for replacing
+    }).replace('NaN)', `var(${variable}))`)
+
     return {
       [variable]: '1',
-      [property]: `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, var(${variable}))`,
-    }
-  } catch (error) {
-    return {
-      [property]: color,
+      [property]: value,
     }
   }
+
+  return {
+    [property]: color,
+  }
 }

src/util/withAlphaVariable.js

@@ -7,6 +7,16 @@ test('it adds the right custom property', () => {
     '--tw-text-opacity': '1',
     color: 'rgba(255, 0, 0, var(--tw-text-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: 'hsl(240 100% 50%)',
+      property: 'color',
+      variable: '--tw-text-opacity',
+    })
+  ).toEqual({
+    '--tw-text-opacity': '1',
+    color: 'hsla(240, 100%, 50%, var(--tw-text-opacity))',
+  })
 })
 
 test('it ignores colors that cannot be parsed', () => {
@@ -76,6 +86,15 @@ test('it ignores colors that already have an alpha channel', () => {
   ).toEqual({
     'background-color': 'rgba(255, 255, 255, 0.5)',
   })
+  expect(
+    withAlphaVariable({
+      color: 'rgba(255 255 255 / 0.5)',
+      property: 'background-color',
+      variable: '--tw-bg-opacity',
+    })
+  ).toEqual({
+    'background-color': 'rgba(255 255 255 / 0.5)',
+  })
   expect(
     withAlphaVariable({
       color: 'hsla(240, 100%, 50%, 1)',
@@ -94,6 +113,15 @@ test('it ignores colors that already have an alpha channel', () => {
   ).toEqual({
     'background-color': 'hsla(240, 100%, 50%, 0.5)',
   })
+  expect(
+    withAlphaVariable({
+      color: 'hsl(240 100% 50% / 0.5)',
+      property: 'background-color',
+      variable: '--tw-bg-opacity',
+    })
+  ).toEqual({
+    'background-color': 'hsl(240 100% 50% / 0.5)',
+  })
 })
 
 test('it allows a closure to be passed', () => {
@@ -130,6 +158,16 @@ test('it transforms rgb and hsl to rgba and hsla', () => {
     '--tw-bg-opacity': '1',
     'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: 'rgb(50 50 50)',
+      property: 'background-color',
+      variable: '--tw-bg-opacity',
+    })
+  ).toEqual({
+    '--tw-bg-opacity': '1',
+    'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))',
+  })
   expect(
     withAlphaVariable({
       color: 'hsl(50, 50%, 50%)',
@@ -140,4 +178,14 @@ test('it transforms rgb and hsl to rgba and hsla', () => {
     '--tw-bg-opacity': '1',
     'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: 'hsl(50 50% 50%)',
+      property: 'background-color',
+      variable: '--tw-bg-opacity',
+    })
+  ).toEqual({
+    '--tw-bg-opacity': '1',
+    'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))',
+  })
 })