Fix formatting

tailwindlabs · Aug 5, 2021 · 81bf797 · 81bf797
1 parent 28dd158
commit 81bf797
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
@@ -46,14 +46,11 @@ export default function withAlphaVariable({ color, property, 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}))`
-    }
+    const formatFn = mode === 'hsl' ? 'formatHsl' : 'formatRgb'
+    const value = culori[formatFn]({
+      ...color,
+      alpha: 0.3,
+    }).replace('0.3)', `var(${variable})`)
 
     return {
       [variable]: '1',

diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.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', () => {