diff --git a/src/utils.js b/src/utils.js index 2c38212..f7c05d1 100644 --- 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 index 43f9247..d1cd872 100644 --- 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% * ))') - 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% * ))') + expect(tailwindConfigValueTransformer(['fontSize'], '16px')).toEqual('var(--font-size)') }) }) })