From bd7eb39348a42e07e50b9fa1f3d1ca57f382d205 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20A=C5=9Fan?= Date: Thu, 29 Apr 2021 14:39:54 +0300 Subject: [PATCH] fixes for colorVariable() helper --- README.md | 19 +++++---- README.tr.md | 19 +++++---- __tests__/color-variable-helper.test.html | 8 ++-- __tests__/color-variable-helper.test.js | 33 ++++++++++++--- src/helpers.js | 10 +++-- src/utils.js | 49 +++++++++++++++++++++++ 6 files changed, 111 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 79f3e1d..c0cb470 100644 --- a/README.md +++ b/README.md @@ -506,7 +506,7 @@ module.exports = { variables: { DEFAULT: { colors: { - primary: '#ffffff', + primary: '#ff0', secondary: '#000000', gray: '#6B7280' }, @@ -515,7 +515,9 @@ module.exports = { }, }, plugins: [ - require('@mertasan/tailwindcss-variables') + require('@mertasan/tailwindcss-variables'){ + colorVariables: true + } ] } ``` @@ -524,19 +526,22 @@ module.exports = { ```css :root { - --colors-primary: #ffffff; - --colors-secondary: #000000; - --colors-gray: #6B7280 + --colors-primary: #ff0; + --colors-secondary: #000000; + --colors-gray: #6B7280; + --colors-primary-rgb: 255,255,0; + --colors-secondary-rgb: 0,0,0; + --colors-gray-rgb: 107,114,128 } .text-primary { --tw-text-opacity: 1; - color: rgba(var(--colors-primary), var(--tw-text-opacity)) + color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity)) } .bg-secondary { --tw-bg-opacity: 1; - background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity)) + background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity)) } .bg-gray { diff --git a/README.tr.md b/README.tr.md index f8647c1..89539ed 100644 --- a/README.tr.md +++ b/README.tr.md @@ -507,7 +507,7 @@ module.exports = { variables: { DEFAULT: { colors: { - primary: '#ffffff', + primary: '#ff0', secondary: '#000000', gray: '#6B7280' }, @@ -516,7 +516,9 @@ module.exports = { }, }, plugins: [ - require('@mertasan/tailwindcss-variables') + require('@mertasan/tailwindcss-variables'){ + colorVariables: true + } ] } ``` @@ -525,19 +527,22 @@ module.exports = { ```css :root { - --colors-primary: #ffffff; - --colors-secondary: #000000; - --colors-gray: #6B7280 + --colors-primary: #ff0; + --colors-secondary: #000000; + --colors-gray: #6B7280; + --colors-primary-rgb: 255,255,0; + --colors-secondary-rgb: 0,0,0; + --colors-gray-rgb: 107,114,128 } .text-primary { --tw-text-opacity: 1; - color: rgba(var(--colors-primary), var(--tw-text-opacity)) + color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity)) } .bg-secondary { --tw-bg-opacity: 1; - background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity)) + background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity)) } .bg-gray { diff --git a/__tests__/color-variable-helper.test.html b/__tests__/color-variable-helper.test.html index b04e561..d8eb742 100644 --- a/__tests__/color-variable-helper.test.html +++ b/__tests__/color-variable-helper.test.html @@ -1,3 +1,5 @@ -
-
-
+
tailwindcss-variables
+
tailwindcss-variables
+
tailwindcss-variables
+
tailwindcss-variables
+
tailwindcss-variables
diff --git a/__tests__/color-variable-helper.test.js b/__tests__/color-variable-helper.test.js index 5822fef..4d3940c 100644 --- a/__tests__/color-variable-helper.test.js +++ b/__tests__/color-variable-helper.test.js @@ -17,32 +17,48 @@ test('colorVariable helper', async () => { primary: colorVariable('--colors-primary'), secondary: colorVariable('var(--colors-secondary)'), gray: 'var(--colors-gray)', + white: '#ffffff', }, variables: { DEFAULT: { colors: { - primary: '#ffffff', + primary: '#ff0', secondary: '#000000', gray: '#6B7280', }, + sizes: { + small: '10px', + medium: '2rem', + large: '100%', + }, }, }, }, - plugins: [tailwindcssVariables], + plugins: [ + tailwindcssVariables({ + colorVariables: true, + }), + ], }) ).toMatchInlineSnapshot(` " + :root { - + --colors-primary: #ffffff; + + --colors-primary: #ff0; + --colors-secondary: #000000; - + --colors-gray: #6B7280 + + --colors-gray: #6B7280; + + --colors-primary-rgb: 255,255,0; + + --colors-secondary-rgb: 0,0,0; + + --colors-gray-rgb: 107,114,128; + + --sizes-small: 10px; + + --sizes-medium: 2rem; + + --sizes-large: 100% + } + + .text-primary { + --tw-text-opacity: 1; - + color: rgba(var(--colors-primary), var(--tw-text-opacity)) + + color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity)) + } + + .text-opacity-50 { @@ -51,13 +67,18 @@ test('colorVariable helper', async () => { + + .bg-secondary { + --tw-bg-opacity: 1; - + background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity)) + + background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity)) + } + + .bg-gray { + background-color: var(--colors-gray) + } + + + .bg-white { + + --tw-bg-opacity: 1; + + background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) + + } + + + .bg-opacity-50 { + --tw-bg-opacity: 0.5 + } diff --git a/src/helpers.js b/src/helpers.js index e912f44..d58362b 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -1,15 +1,17 @@ const startsWith = require('lodash/startsWith') +const withRgb = (variable) => { + return startsWith(variable, 'var') ? variable.replace(')', '-rgb)') : 'var(' + variable + '-rgb)' +} const colorVariable = (variable) => { return function ({ opacityVariable, opacityValue }) { - variable = startsWith(variable, 'var') ? variable : 'var(' + variable + ')' if (opacityValue !== undefined) { - return `rgba(${variable}, ${opacityValue})` + return `rgba(${withRgb(variable)}, ${opacityValue})` } if (opacityVariable !== undefined) { - return `rgba(${variable}, var(${opacityVariable}, 1))` + return `rgba(${withRgb(variable)}, var(${opacityVariable}, 1))` } - return `rgb(${variable})` + return `rgb(${withRgb(variable)})` } } module.exports.colorVariable = colorVariable diff --git a/src/utils.js b/src/utils.js index 5b860f4..d61cbf2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,6 +8,9 @@ const isPlainObject = require('lodash/isPlainObject') const hasOwn = require('lodash/has') const _forEach = require('lodash/forEach') const _replace = require('lodash/replace') +const startsWith = require('lodash/startsWith') +const trimStart = require('lodash/trimStart') +const trimEnd = require('lodash/trimEnd') const get = require('lodash/get') const setComponent = (component, modifier, options) => { @@ -75,8 +78,50 @@ const parseVariables = (object, varPrefix) => { return results } +const hexToRGB = (key, h) => { + if (startsWith(h, 'rgba') || !startsWith(h, '#')) { + return [key, h] + } else if (startsWith(h, 'rgb')) { + h = trimStart(h, 'rgb(') + h = trimEnd(h, ')') + } + + let r = 0, + g = 0, + b = 0 + + // 3 digits + if (h.length === 4) { + r = '0x' + h[1] + h[1] + g = '0x' + h[2] + h[2] + b = '0x' + h[3] + h[3] + + // 6 digits + } else if (h.length === 7) { + r = '0x' + h[1] + h[2] + g = '0x' + h[3] + h[4] + b = '0x' + h[5] + h[6] + } + + return [key + '-rgb', '' + +r + ',' + +g + ',' + +b + ''] +} + +const setColorVariables = (source) => { + return merge( + source, + ...toPairs(source).map(([keys, value]) => { + const flattenValue = isPlainObject(value) ? setColorVariables(value) : value + return fromPairs(keys.split(', ').map((key) => hexToRGB(key, flattenValue))) + }) + ) +} + const build = (options, source) => { let varPrefix = formatVariableKey(get(options, 'variablePrefix', '')) + let colorVariables = get(options, 'colorVariables', false) + if (colorVariables) { + source = setColorVariables(source) + } if (!varPrefix) { varPrefix = '' } @@ -99,6 +144,10 @@ const darkBuild = (options, darkMode, source) => { if (!varPrefix) { varPrefix = '' } + let colorVariables = get(options, 'colorVariables', false) + if (colorVariables) { + source = setColorVariables(source) + } let darkSelector = get(options, 'darkSelector', '.dark') if (!darkSelector) { darkSelector = '.dark'