Merge pull request #50 from crswll/simplification

crswll · Jan 15, 2024 · 10d37ec · 10d37ec
2 parents f8839e9 + 3666a66
commit 10d37ec
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "main": "src/index.js",
   "license": "MIT",
   "devDependencies": {

diff --git a/src/utils.js b/src/utils.js
@@ -16,36 +16,39 @@ const colorConfigKeys = [
 
 function kebabCase (string) {
   return string
-  .replace(/([a-z])([A-Z])/g, '$1-$2')
-  .replace(/\s+/g, '-')
-  .toLowerCase()
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase()
 }
 
 function flatten (
-  obj,
-  transformKeyCallback = key => key.join('.'),
-  transformValueCallback = (keys, value) => value,
-  previousKeys = [],
-  flattened = {}
+  someObject,
+  transformKey = (keys, value) => keys.join('.'),
+  transformValue = (keys, value) => value,
 ) {
-  return Object
-    .entries(obj)
-    .reduce((acc, [key, value]) => {
-      const keyPath = [...previousKeys, key]
+  const result = {}
 
+  function flat (object, parentKeys) {
+    for (const [key, value] of Object.entries(object)) {
+      const keyPath = [...parentKeys, key]
       if (typeof value === 'object' && !Array.isArray(value)) {
-        flatten(value, transformKeyCallback, transformValueCallback, keyPath, acc)
+        flat(value, keyPath)
       } else {
-        flattened[transformKeyCallback(keyPath)] = transformValueCallback(keyPath, value)
+        result[transformKey(keyPath)] = transformValue(keyPath, value)
       }
-      return acc
-    }, flattened)
+    }
+  }
+
+  flat(someObject, [])
+
+  return result
 }
 
-const getTailwindKeyName = keys =>
-  keys.filter(key => key.toLowerCase() !== 'default').map(kebabCase).join('-')
+function getTailwindKeyName (keys) {
+  return keys.filter(key => key.toLowerCase() !== 'default').map(kebabCase).join('-')
+}
 
-function defaultCustomPropValueTransformer (keys, value) {
+function toCustomPropertyValue (keys, value) {
   if (keys[0] === 'fontSize' && typeof value !== 'string') {
     return value[0]
   }
@@ -57,7 +60,7 @@ function defaultCustomPropValueTransformer (keys, value) {
   return value
 }
 
-function defaultConfigValueTransformer (keys, value) {
+function toConfigValue (keys, value) {
   if (
     keys[0] === 'fontSize' &&
     typeof value !== 'string' &&
@@ -73,40 +76,37 @@ function defaultConfigValueTransformer (keys, value) {
   return `var(--${getTailwindKeyName(keys)})`
 }
 
-function getThemeAsCustomProps (
-  tokenValues,
-  transformer = defaultCustomPropValueTransformer
-) {
+function getThemeAsCustomProps (themeConfig) {
   return flatten(
-    tokenValues,
+    themeConfig,
     keys => `--${getTailwindKeyName(keys)}`,
-    transformer
+    toCustomPropertyValue
   )
 }
 
 
-function resolveThemeConfig (
-  tokenValue,
-  previousKeys = [],
-  valueTransformer = defaultConfigValueTransformer
+function resolveTailwindThemeConfig (
+  themeConfig,
+  previousKeys = []
 ) {
-  return Object
-    .entries(tokenValue)
-    .reduce((acc, [key, value]) => {
-      const keyPath = [ ...previousKeys, key ]
-      return {
-        ...acc,
-        [key]: typeof value === 'object' && !Array.isArray(value)
-          ? resolveThemeConfig(value, keyPath)
-          : valueTransformer(keyPath, value)
-      }
-    }, {})
+  const config = {}
+
+  for (const [key, value] of Object.entries(themeConfig)) {
+    const keyPath = [...previousKeys, key]
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      config[key] = resolveTailwindThemeConfig(value, keyPath)
+    } else {
+      config[key] = toConfigValue(keyPath, value)
+    }
+  }
+
+  return config
 }
 
-module.exports.defaultConfigValueTransformer = defaultConfigValueTransformer
-module.exports.defaultCustomPropValueTransformer = defaultCustomPropValueTransformer
+module.exports.tailwindConfigValueTransformer = toConfigValue
+module.exports.toCustomPropertyValue = toCustomPropertyValue
 module.exports.flatten = flatten
 module.exports.getTailwindKeyName = getTailwindKeyName
 module.exports.getThemeAsCustomProps = getThemeAsCustomProps
-module.exports.resolveThemeConfig = resolveThemeConfig
+module.exports.resolveThemeConfig = resolveTailwindThemeConfig
 module.exports.colorConfigKeys = colorConfigKeys
diff --git a/test/utils.test.js b/test/utils.test.js
@@ -1,11 +1,10 @@
 const {
-  defaultConfigValueTransformer,
-  defaultCustomPropValueTransformer,
+  tailwindConfigValueTransformer,
+  toCustomPropertyValue,
   flatten,
   getTailwindKeyName,
   getThemeAsCustomProps,
   resolveThemeConfig,
-  colorConfigKeys
 } = require('../src/utils')
 
 describe('getTailwindKeyName', () => {
@@ -137,28 +136,28 @@ describe('getThemeAsCustomProps', () => {
 
   describe('defaultCustomVarTransformer', () => {
     test('should return a joined string when array', () => {
-      expect(defaultCustomPropValueTransformer(['fontFamily'], [1, 2, 3])).toEqual('1, 2, 3')
+      expect(toCustomPropertyValue(['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')
+      expect(toCustomPropertyValue(['fontSize'], '16px')).toEqual('16px')
+      expect(toCustomPropertyValue(['fontSize'], ['16px', '1'])).toEqual('16px')
     })
   })
 
-  describe('defaultConfigValueTransformer', () => {
+  describe('tailwindConfigValueTransformer', () => {
     test('should return a joined string when an array', () => {
-      expect(defaultConfigValueTransformer(['fontFamily', 'sans'], ['font a', 'font b'])).toEqual('var(--font-family-sans)')
+      expect(tailwindConfigValueTransformer(['fontFamily', 'sans'], ['font a', 'font b'])).toEqual('var(--font-family-sans)')
     })
 
     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)')
-      expect(defaultConfigValueTransformer(['fontSize', 'complex'], ['22px', '1.2'])).toEqual('var(--font-size-complex)')
+      expect(tailwindConfigValueTransformer(['fontSize', 'complex'], ['24px', { lineHeight: '1.2' }])).toEqual('var(--font-size-complex)')
+      expect(tailwindConfigValueTransformer(['fontSize', 'complex'], ['22px', '1.2'])).toEqual('var(--font-size-complex)')
     })
 
     test('should just return the value when it is not a color', () => {
-      expect(defaultConfigValueTransformer(['colors', 'primary'], 'rgb(255, 0, 0)')).toEqual('color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))')
-      expect(defaultConfigValueTransformer(['fontSize'], '16px')).toEqual('var(--font-size)')
+      expect(tailwindConfigValueTransformer(['colors', 'primary'], 'rgb(255, 0, 0)')).toEqual('color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))')
+      expect(tailwindConfigValueTransformer(['fontSize'], '16px')).toEqual('var(--font-size)')
     })
   })
 })