Merge pull request #45 from crswll/allow-alpha

* allow colors with alpha channels but ignore alpha channels * never use provided alpha channel * clear up tests * Release 0.8.0
crswll · Nov 11, 2023 · 4433836 · 4433836
2 parents 833f0fc + 64de27b
commit 4433836
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "main": "src/index.js",
   "license": "MIT",
   "devDependencies": {

diff --git a/src/utils.js b/src/utils.js
@@ -57,19 +57,10 @@ function flatten (
 const getTailwindKeyName = keys =>
   keys.filter(key => key.toLowerCase() !== 'default').map(kebabCase).join('-')
 
-function hasAlpha (color) {
-  return (
-    color.startsWith('rgba(') ||
-    color.startsWith('hsla(') ||
-    (color.startsWith('#') && color.length === 9) ||
-    (color.startsWith('#') && color.length === 5)
-  )
-}
-
 function toRgba (color) {
   try {
-    const [ r, g, b, a ] = Color(color).rgb().array()
-    return [ r, g, b, a === undefined && hasAlpha(color) ? 1 : a ]
+    const [ r, g, b ] = Color(color).rgb().array()
+    return [ r, g, b ]
   } catch {
     return null
   }
@@ -78,7 +69,7 @@ function toRgba (color) {
 function defaultCustomPropValueTransformer (keys, value) {
   if (colorConfigKeys.includes(keys[0])) {
     const color = toRgba(value)
-    if (!hasAlpha(value) && color) {
+    if (color) {
       const [ r, g, b ] = color
       return `${r} ${g} ${b}`
     }
@@ -93,7 +84,7 @@ function defaultCustomPropValueTransformer (keys, value) {
 
 function defaultConfigValueTransformer (keys, value) {
   if (colorConfigKeys.includes(keys[0])) {
-    if (!hasAlpha(value) && toRgba(value)) {
+    if (toRgba(value)) {
       return tailwindVariableHelper(getTailwindKeyName(keys))
     }
   }

diff --git a/test/index.test.js b/test/index.test.js
@@ -11,7 +11,7 @@ expect.extend({
 const defaultTheme = {
   colors: {
     hotpink: 'hotpink',
-    opacity: 'rgba(255, 0, 0, 0.5)',
+    'with-opacity-ignored': 'rgba(255, 0, 0, 0.5)',
     primary: {
       default: '#f00',
       darker: '#400',
@@ -70,7 +70,7 @@ postcss(tailwindcss({
       expect(resolvedConfig).toMatchObject({
         "theme": {
           "colors": {
-            "opacity": "var(--colors-opacity, rgba(255, 0, 0, 0.5))",
+            "with-opacity-ignored": expect.any(Function),
             "hotpink": expect.any(Function),
           },
           "spacing": {
@@ -87,7 +87,7 @@ postcss(tailwindcss({
       const sampleConfigOutput = `
       :root, .light {
         --colors-hotpink: 255 105 180;
-        --colors-opacity: rgba(255, 0, 0, 0.5);
+        --colors-with-opacity-ignored: 255 0 0;
         --colors-primary: 255 0 0;
         --colors-primary-darker: 68 0 0;
         --spacing-fart: 69px;

diff --git a/test/utils.test.js b/test/utils.test.js
@@ -138,14 +138,14 @@ describe('getThemeAsCustomProps', () => {
 
   describe('toRgba', () => {
     test('should return an array of rgba', () => {
-      expect(toRgba('#fff')).toEqual([255, 255, 255, undefined])
-      expect(toRgba('#ffff')).toEqual([255, 255, 255, 1])
-      expect(toRgba('#fff0')).toEqual([255, 255, 255, 0])
-      expect(toRgba('hotpink')).toEqual([255, 105, 180, undefined])
-      expect(toRgba('rgb(255, 0, 0)')).toEqual([255, 0, 0, undefined])
-      expect(toRgba('rgba(255, 0, 0, 0.5)')).toEqual([255, 0, 0, 0.5])
-      expect(toRgba('hsl(0, 100%, 50%)')).toEqual([255, 0, 0, undefined])
-      expect(toRgba('hsl(0, 100%, 50%, 0.5)')).toEqual([255, 0, 0, 0.5])
+      expect(toRgba('#fff')).toEqual([255, 255, 255])
+      expect(toRgba('#ffff')).toEqual([255, 255, 255])
+      expect(toRgba('#fff0')).toEqual([255, 255, 255])
+      expect(toRgba('hotpink')).toEqual([255, 105, 180])
+      expect(toRgba('rgb(255, 0, 0)')).toEqual([255, 0, 0])
+      expect(toRgba('rgba(255, 0, 0, 0.5)')).toEqual([255, 0, 0])
+      expect(toRgba('hsl(0, 100%, 50%)')).toEqual([255, 0, 0])
+      expect(toRgba('hsl(0, 100%, 50%, 0.5)')).toEqual([255, 0, 0])
       expect(toRgba('__DEFINITELY_NOT_A_COLOR_NO_WAY_NO_HOW__')).toEqual(null)
     })
   })