diff --git a/package.json b/package.json index 8e1fa6f..5fba470 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss-theme-swapper", - "version": "0.7.3", + "version": "0.8.0", "main": "src/index.js", "license": "MIT", "devDependencies": { diff --git a/src/utils.js b/src/utils.js index 6db5bd0..335c3fd 100644 --- a/src/utils.js +++ b/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}` } @@ -93,7 +84,7 @@ function defaultCustomPropValueTransformer (keys, value) { function defaultConfigValueTransformer (keys, value) { if (colorConfigKeys.includes(keys[0])) { - if (!hasAlpha(value) && toRgba(value)) { + if (toRgba(value)) { return tailwindVariableHelper(getTailwindKeyName(keys)) } } diff --git a/test/index.test.js b/test/index.test.js index 0d67c68..5f2ce29 100644 --- a/test/index.test.js +++ b/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', @@ -70,7 +70,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": { @@ -87,7 +87,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; diff --git a/test/utils.test.js b/test/utils.test.js index d0f363a..e54d9de 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -138,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) }) })