Skip to content

Commit

Permalink
fixes for colorVariable() helper
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertasan
mertasan committed Apr 29, 2021
1 parent 73a0596 commit bd7eb39
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 27 deletions.
19 changes: 12 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,7 @@ module.exports = {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
primary: '#ff0',
secondary: '#000000',
gray: '#6B7280'
},
Expand All @@ -515,7 +515,9 @@ module.exports = {
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
require('@mertasan/tailwindcss-variables'){
colorVariables: true
}
]
}
```
Expand All @@ -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 {
Expand Down
19 changes: 12 additions & 7 deletions README.tr.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ module.exports = {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
primary: '#ff0',
secondary: '#000000',
gray: '#6B7280'
},
Expand All @@ -516,7 +516,9 @@ module.exports = {
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
require('@mertasan/tailwindcss-variables'){
colorVariables: true
}
]
}
```
Expand All @@ -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 {
Expand Down
8 changes: 5 additions & 3 deletions __tests__/color-variable-helper.test.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<div class="text-primary text-opacity-50"></div>
<div class="bg-secondary bg-opacity-50"></div>
<div class="bg-gray bg-opacity-50"></div>
<div class="text-primary text-opacity-50">tailwindcss-variables</div>
<div class="bg-secondary bg-opacity-50">tailwindcss-variables</div>
<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
<div class="bg-red bg-opacity-50">tailwindcss-variables</div>
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
33 changes: 27 additions & 6 deletions __tests__/color-variable-helper.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
+ }
Expand Down
10 changes: 6 additions & 4 deletions src/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -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
49 changes: 49 additions & 0 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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 = ''
}
Expand All @@ -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'
Expand Down

0 comments on commit bd7eb39

Please sign in to comment.