From bf7117455897d3da6c012883da72d31df71aed50 Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Thu, 2 Jun 2022 23:21:59 -0400 Subject: [PATCH 1/6] fix some edge cases --- .gitignore | 1 + src/utils.js | 20 ++++++++++++++++++-- test/index.test.js | 12 +++++++++++- test/utils.test.js | 18 ++++++++++++++++-- 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 3077f7a..d9cd6ce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store +.vscode coverage node_modules diff --git a/src/utils.js b/src/utils.js index cc536dd..a49d8c3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -45,7 +45,7 @@ function flatten ( .reduce((acc, [key, value]) => { const keyPath = [...previousKeys, key] - if (typeof value === 'object') { + if (typeof value === "object" && !Array.isArray(value)) { flatten(value, transformKeyCallback, transformValueCallback, keyPath, acc) } else { flattened[transformKeyCallback(keyPath)] = transformValueCallback(keyPath, value) @@ -84,6 +84,14 @@ function defaultCustomPropValueTransformer (keys, value) { } } + if (keys[0] === 'fontSize' && typeof value !== 'string') { + return value[0] + } + + if (Array.isArray(value)) { + return value.join(',') + } + return value } @@ -94,6 +102,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 font-size from", value, 'for', keys) + } + + return `var(--${getTailwindKeyName(keys)}, ${value[0]})` + } + return `var(--${getTailwindKeyName(keys)}, ${value})` } @@ -121,7 +137,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) } diff --git a/test/index.test.js b/test/index.test.js index 6821593..bda46a6 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -23,6 +23,13 @@ const defaultTheme = { borderRadius: { default: '5px', }, + fontFamily: { + sans: ['Font A', 'Font B', 'Font C'] + }, + fontSize: { + sm: '12px', + complex: ['22px', { lineHeight: '1.2rem' }] + }, } const darkTheme = { @@ -90,7 +97,10 @@ postcss(tailwindcss({ --colors-primary: 255 0 0; --colors-primary-darker: 68 0 0; --spacing-fart: 69px; - --border-radius: 5px + --border-radius: 5px; + --font-family-sans: Font A, Font B, Font C; + --font-size-sm: 12px; + --font-size-complex: 22px; } @media (prefers-color-scheme: dark) { diff --git a/test/utils.test.js b/test/utils.test.js index 9f39467..4ae86ae 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -146,7 +146,7 @@ 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') @@ -154,8 +154,13 @@ describe('getThemeAsCustomProps', () => { 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') }) }) @@ -166,8 +171,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 throw a warning when using the more complex allowed value for font size', () => { + 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)') }) }) From fca9100d390c9c73ab869316184a8b844e3976c9 Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Fri, 3 Jun 2022 10:09:33 -0400 Subject: [PATCH 2/6] better warning message --- src/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index a49d8c3..c377edf 100644 --- a/src/utils.js +++ b/src/utils.js @@ -104,7 +104,7 @@ function defaultConfigValueTransformer (keys, value) { if (keys[0] === 'fontSize' && typeof value === "object") { if (process.env.NODE_ENV !== "test") { - console.warn("tailwindcss-theme-swapper: Only using font-size from", value, 'for', keys) + 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]})` From 27372a4d72d2d277825b33e4b895dbfea85ef7e7 Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Fri, 3 Jun 2022 11:02:02 -0400 Subject: [PATCH 3/6] consistent quotey boys --- src/utils.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils.js b/src/utils.js index c377edf..68b221a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -45,7 +45,7 @@ function flatten ( .reduce((acc, [key, value]) => { const keyPath = [...previousKeys, key] - if (typeof value === "object" && !Array.isArray(value)) { + if (typeof value === 'object' && !Array.isArray(value)) { flatten(value, transformKeyCallback, transformValueCallback, keyPath, acc) } else { flattened[transformKeyCallback(keyPath)] = transformValueCallback(keyPath, value) @@ -102,8 +102,8 @@ function defaultConfigValueTransformer (keys, value) { } } - if (keys[0] === 'fontSize' && typeof value === "object") { - if (process.env.NODE_ENV !== "test") { + 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.`) } @@ -137,7 +137,7 @@ function resolveThemeConfig ( const keyPath = [ ...previousKeys, key ] return { ...acc, - [key]: typeof value === "object" && !Array.isArray(value) + [key]: typeof value === 'object' && !Array.isArray(value) ? resolveThemeConfig(value, keyPath) : valueTransformer(keyPath, value) } From 7294eec92c6157a6fddbd8bcca51c24cc81539a7 Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Fri, 3 Jun 2022 11:12:08 -0400 Subject: [PATCH 4/6] clearer description for test --- test/utils.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils.test.js b/test/utils.test.js index 4ae86ae..c6245e4 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -175,7 +175,7 @@ describe('getThemeAsCustomProps', () => { expect(defaultConfigValueTransformer(['fontFamily', 'sans'], ['font a', 'font b'])).toEqual('var(--font-family-sans, font a,font b)') }) - test('should throw a warning when using the more complex allowed value for font size', () => { + 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)') }) From e375a6b5482a2b76686b68af776bfd6965f59db0 Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Sun, 17 Dec 2023 19:18:31 -0500 Subject: [PATCH 5/6] adjust gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index d9cd6ce..3077f7a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ .DS_Store -.vscode coverage node_modules From db4edf04fa069bee35a0e7be1c8059996f5f8e0a Mon Sep 17 00:00:00 2001 From: Bill Criswell Date: Sun, 17 Dec 2023 19:22:35 -0500 Subject: [PATCH 6/6] Release 0.9.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5fba470..e28f38a 100644 --- a/package.json +++ b/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": {