adjust tests

README.md

@@ -21,7 +21,7 @@ npm install tailwindcss-theme-swapper --save-dev
 ## Try It Out
 
 ### Minimal
-https://play.tailwindcss.com/a16eJQSf4a
+https://play.tailwindcss.com/Gt21fePNvv
 
 ### Fancier (radix colors, multiple themes)
 https://play.tailwindcss.com/jskI9McL20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.6.5",
+  "version": "0.8.0",
   "main": "src/index.js",
   "license": "MIT",
   "devDependencies": {

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}`
     }
@@ -89,15 +80,15 @@ function defaultCustomPropValueTransformer (keys, value) {
   }
 
   if (Array.isArray(value)) {
-    return value.join(',')
+    return value.join(', ')
   }
 
   return value
 }
 
 function defaultConfigValueTransformer (keys, value) {
   if (colorConfigKeys.includes(keys[0])) {
-    if (!hasAlpha(value) && toRgba(value)) {
+    if (toRgba(value)) {
       return tailwindVariableHelper(getTailwindKeyName(keys))
     }
   }

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',
@@ -76,7 +76,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": {
@@ -93,7 +93,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;

test/utils.test.js

@@ -35,12 +35,14 @@ describe('flatten', () => {
         deep: true,
       },
       shallow: 2,
+      list: [1, 2],
     })
 
     expect(result).toEqual({
       'foo.bar.baz': 'whoa',
       'not.deep': true,
       'shallow': 2,
+      'list': [1, 2],
     })
   })
 
@@ -87,6 +89,7 @@ describe('getThemeAsCustomProps', () => {
       ringColor: { test: '#444' },
       fontSize: { base: '16px' },
       borderRadius: { default: '5px' },
+      fontFamily: { foo: ['a', 'b', '"C 4"'] },
     })
 
     expect(result).toEqual({
@@ -99,6 +102,7 @@ describe('getThemeAsCustomProps', () => {
       '--ring-color-test': '68 68 68',
       '--font-size-base': '16px',
       '--border-radius': '5px',
+      '--font-family-foo': 'a, b, "C 4"',
     })
   })
 
@@ -134,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)
     })
   })
@@ -155,7 +159,7 @@ describe('getThemeAsCustomProps', () => {
     })
 
     test('should return a joined string when array', () => {
-      expect(defaultCustomPropValueTransformer(['fontFamily'], [1, 2, 3])).toEqual('1,2,3')
+      expect(defaultCustomPropValueTransformer(['fontFamily'], [1, 2, 3])).toEqual('1, 2, 3')
     })
 
     test('should just return the value when it is not a color', () => {