Refactor preserving rgb/hsl when adding alpha channel

tailwindlabs · Apr 30, 2021 · f9d54f0 · f9d54f0
1 parent 92bb81e
commit f9d54f0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/jit/pluginUtils.js b/jit/pluginUtils.js
@@ -1,6 +1,6 @@
 const selectorParser = require('postcss-selector-parser')
 const postcss = require('postcss')
-const { toRgba } = require('../lib/util/withAlphaVariable')
+const createColor = require('color')
 const { nameClass, escapeCommas } = require('./lib/utils')
 
 function updateAllClasses(selectors, updateClass) {
@@ -166,7 +166,7 @@ module.exports = {
     return asValue(modifier, lookup, {
       validate: (value) => {
         try {
-          toRgba(value)
+          createColor(value)
           return true
         } catch (e) {
           return false

diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
@@ -2,27 +2,15 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
-import { toRgba, toHsla } from '../util/withAlphaVariable'
+import { withAlphaValue } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('gradientColorStops'))
 
     const utilities = _(colors)
       .map((value, modifier) => {
-        const transparentTo = (() => {
-          if (_.isFunction(value)) {
-            return value({ opacityValue: 0 })
-          }
-
-          try {
-            const isHSL = value.startsWith('hsl')
-            const [i, j, k] = isHSL ? toHsla(value) : toRgba(value)
-            return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, 0)`
-          } catch (_error) {
-            return `rgba(255, 255, 255, 0)`
-          }
-        })()
+        const transparentTo = withAlphaValue(value, 0, 'rgba(255, 255, 255, 0)')
 
         return [
           [

diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
@@ -1,21 +1,15 @@
 import _ from 'lodash'
 import nameClass from '../util/nameClass'
-import { toHsla, toRgba } from '../util/withAlphaVariable'
+import { withAlphaValue } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
-    const ringColorDefault = (() => {
-      const isHSL = (theme('ringColor.DEFAULT') || '').startsWith('hsl')
-      const opacity = theme('ringOpacity.DEFAULT', '0.5')
-      try {
-        const [i, j, k] = isHSL
-          ? toHsla(theme('ringColor.DEFAULT'))
-          : toRgba(theme('ringColor.DEFAULT'))
-        return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${opacity})`
-      } catch (_error) {
-        return `rgba(147, 197, 253, ${opacity})`
-      }
-    })()
+    const ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+    const ringColorDefault = withAlphaValue(
+      theme('ringColor.DEFAULT'),
+      ringOpacityDefault,
+      `rgba(147, 197, 253, ${ringOpacityDefault})`
+    )
 
     addUtilities(
       {

diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
@@ -22,6 +22,20 @@ export function toHsla(color) {
   return [h, `${s}%`, `${l}%`, a === undefined && hasAlpha(color) ? 1 : a]
 }
 
+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
+  }
+}
+
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {