Merge pull request #30 from crswll/support-fontfamily

package.json

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

src/utils.js

@@ -75,6 +75,10 @@ function defaultCustomPropValueTransformer (keys, value) {
     }
   }
 
+  if (keys[0] === 'fontSize' && typeof value !== 'string') {
+    return value[0]
+  }
+
   if (Array.isArray(value)) {
     return value.join(', ')
   }
@@ -89,6 +93,14 @@ function defaultConfigValueTransformer (keys, value) {
     }
   }
 
+  if (keys[0] === 'fontSize' && typeof value === 'object') {
+    if (process.env.NODE_ENV !== 'test') {
+      console.warn(`tailwindcss-theme-swapper: Only using the font size defined at ${keys.join('.')}. Support for this may come if enough people complain about it.`)
+    }
+
+    return `var(--${getTailwindKeyName(keys)}, ${value[0]})`
+  }
+
   return `var(--${getTailwindKeyName(keys)}, ${value})`
 }
 
@@ -116,7 +128,7 @@ function resolveThemeConfig (
       const keyPath = [ ...previousKeys, key ]
       return {
         ...acc,
-        [key]: typeof value === "object"
+        [key]: typeof value === 'object' && !Array.isArray(value)
           ? resolveThemeConfig(value, keyPath)
           : valueTransformer(keyPath, value)
       }

test/index.test.js

@@ -23,7 +23,13 @@ const defaultTheme = {
   borderRadius: {
     default: '5px',
   },
-  fontFamily: ['a', 'b', '"C 4"']
+  fontFamily: {
+    sans: ['Font A', 'Font B', 'Font C']
+  },
+  fontSize: {
+    sm: '12px',
+    complex: ['22px', { lineHeight: '1.2rem' }]
+  },
 }
 
 const darkTheme = {
@@ -92,7 +98,9 @@ postcss(tailwindcss({
         --colors-primary-darker: 68 0 0;
         --spacing-fart: 69px;
         --border-radius: 5px;
-        --font-family: a, b, "C 4"
+        --font-family-sans: Font A, Font B, Font C;
+        --font-size-sm: 12px;
+        --font-size-complex: 22px;
       }
 
       @media (prefers-color-scheme: dark) {

test/utils.test.js

@@ -150,16 +150,21 @@ describe('getThemeAsCustomProps', () => {
     })
   })
 
-  describe('defaultCustomVarTransformer', () => {
+  describe('defaultCustomPropValueTransformer', () => {
     test('should return a string in rgb for colors', () => {
       expect(defaultCustomPropValueTransformer(['colors'], 'rgb(255, 0, 0)')).toEqual('255 0 0')
       expect(defaultCustomPropValueTransformer(['backgroundColor'], 'rgb(255, 0, 0)')).toEqual('255 0 0')
       expect(defaultCustomPropValueTransformer(['borderColor'], 'rgb(255, 0, 0)')).toEqual('255 0 0')
       expect(defaultCustomPropValueTransformer(['textColor'], 'rgb(255, 0, 0)')).toEqual('255 0 0')
     })
 
+    test('should return a joined string when array', () => {
+      expect(defaultCustomPropValueTransformer(['fontFamily'], [1, 2, 3])).toEqual('1, 2, 3')
+    })
+
     test('should just return the value when it is not a color', () => {
       expect(defaultCustomPropValueTransformer(['fontSize'], '16px')).toEqual('16px')
+      expect(defaultCustomPropValueTransformer(['fontSize'], ['16px', '1'])).toEqual('16px')
     })
   })
 
@@ -170,8 +175,17 @@ describe('getThemeAsCustomProps', () => {
       expect(defaultConfigValueTransformer(['colors', 'primary'], 'rgb(255, 0, 0)')()).toEqual('rgb(var(--colors-primary))')
     })
 
+    test('should return a joined string when an array', () => {
+      expect(defaultConfigValueTransformer(['fontFamily', 'sans'], ['font a', 'font b'])).toEqual('var(--font-family-sans, font a,font b)')
+    })
+
+    test('should just use the font-size when using a more complex value for fontSize', () => {
+      expect(defaultConfigValueTransformer(['fontSize', 'complex'], ['24px', { lineHeight: '1.2' }])).toEqual('var(--font-size-complex, 24px)')
+      expect(defaultConfigValueTransformer(['fontSize', 'complex'], ['22px', '1.2'])).toEqual('var(--font-size-complex, 22px)')
+    })
+
     test('should just return the value when it is not a color', () => {
-      expect(defaultConfigValueTransformer(['fontSize'], '16px')).toEqual('var(--font-size, 16px)')
+      expect(defaultConfigValueTransformer(['fontSize', 'base'], '16px')).toEqual('var(--font-size-base, 16px)')
     })
   })