Skip to content

Commit bd7eb39

Browse files
mertasanmertasan
committed
fixes for colorVariable() helper
1 parent 73a0596 commit bd7eb39

File tree

6 files changed

+111
-27
lines changed

6 files changed

+111
-27
lines changed

‎README.md

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ module.exports = {
506506
variables: {
507507
DEFAULT: {
508508
colors: {
509-
primary: '#ffffff',
509+
primary: '#ff0',
510510
secondary: '#000000',
511511
gray: '#6B7280'
512512
},
@@ -515,7 +515,9 @@ module.exports = {
515515
},
516516
},
517517
plugins: [
518-
require('@mertasan/tailwindcss-variables')
518+
require('@mertasan/tailwindcss-variables'){
519+
colorVariables: true
520+
}
519521
]
520522
}
521523
```
@@ -524,19 +526,22 @@ module.exports = {
524526

525527
```css
526528
:root {
527-
--colors-primary: #ffffff;
528-
--colors-secondary: #000000;
529-
--colors-gray: #6B7280
529+
--colors-primary: #ff0;
530+
--colors-secondary: #000000;
531+
--colors-gray: #6B7280;
532+
--colors-primary-rgb: 255,255,0;
533+
--colors-secondary-rgb: 0,0,0;
534+
--colors-gray-rgb: 107,114,128
530535
}
531536

532537
.text-primary {
533538
--tw-text-opacity: 1;
534-
color: rgba(var(--colors-primary), var(--tw-text-opacity))
539+
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
535540
}
536541

537542
.bg-secondary {
538543
--tw-bg-opacity: 1;
539-
background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
544+
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
540545
}
541546

542547
.bg-gray {

‎README.tr.md

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ module.exports = {
507507
variables: {
508508
DEFAULT: {
509509
colors: {
510-
primary: '#ffffff',
510+
primary: '#ff0',
511511
secondary: '#000000',
512512
gray: '#6B7280'
513513
},
@@ -516,7 +516,9 @@ module.exports = {
516516
},
517517
},
518518
plugins: [
519-
require('@mertasan/tailwindcss-variables')
519+
require('@mertasan/tailwindcss-variables'){
520+
colorVariables: true
521+
}
520522
]
521523
}
522524
```
@@ -525,19 +527,22 @@ module.exports = {
525527

526528
```css
527529
:root {
528-
--colors-primary: #ffffff;
529-
--colors-secondary: #000000;
530-
--colors-gray: #6B7280
530+
--colors-primary: #ff0;
531+
--colors-secondary: #000000;
532+
--colors-gray: #6B7280;
533+
--colors-primary-rgb: 255,255,0;
534+
--colors-secondary-rgb: 0,0,0;
535+
--colors-gray-rgb: 107,114,128
531536
}
532537

533538
.text-primary {
534539
--tw-text-opacity: 1;
535-
color: rgba(var(--colors-primary), var(--tw-text-opacity))
540+
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
536541
}
537542

538543
.bg-secondary {
539544
--tw-bg-opacity: 1;
540-
background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
545+
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
541546
}
542547

543548
.bg-gray {

‎__tests__/color-variable-helper.test.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<div class="text-primary text-opacity-50"></div>
2-
<div class="bg-secondary bg-opacity-50"></div>
3-
<div class="bg-gray bg-opacity-50"></div>
1+
<div class="text-primary text-opacity-50">tailwindcss-variables</div>
2+
<div class="bg-secondary bg-opacity-50">tailwindcss-variables</div>
3+
<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
4+
<div class="bg-red bg-opacity-50">tailwindcss-variables</div>
5+
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>

‎__tests__/color-variable-helper.test.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,48 @@ test('colorVariable helper', async () => {
1717
primary: colorVariable('--colors-primary'),
1818
secondary: colorVariable('var(--colors-secondary)'),
1919
gray: 'var(--colors-gray)',
20+
white: '#ffffff',
2021
},
2122
variables: {
2223
DEFAULT: {
2324
colors: {
24-
primary: '#ffffff',
25+
primary: '#ff0',
2526
secondary: '#000000',
2627
gray: '#6B7280',
2728
},
29+
sizes: {
30+
small: '10px',
31+
medium: '2rem',
32+
large: '100%',
33+
},
2834
},
2935
},
3036
},
31-
plugins: [tailwindcssVariables],
37+
plugins: [
38+
tailwindcssVariables({
39+
colorVariables: true,
40+
}),
41+
],
3242
})
3343
).toMatchInlineSnapshot(`
3444
"
3545
3646
3747
+ :root {
38-
+ --colors-primary: #ffffff;
48+
+ --colors-primary: #ff0;
3949
+ --colors-secondary: #000000;
40-
+ --colors-gray: #6B7280
50+
+ --colors-gray: #6B7280;
51+
+ --colors-primary-rgb: 255,255,0;
52+
+ --colors-secondary-rgb: 0,0,0;
53+
+ --colors-gray-rgb: 107,114,128;
54+
+ --sizes-small: 10px;
55+
+ --sizes-medium: 2rem;
56+
+ --sizes-large: 100%
4157
+ }
4258
+
4359
+ .text-primary {
4460
+ --tw-text-opacity: 1;
45-
+ color: rgba(var(--colors-primary), var(--tw-text-opacity))
61+
+ color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
4662
+ }
4763
+
4864
+ .text-opacity-50 {
@@ -51,13 +67,18 @@ test('colorVariable helper', async () => {
5167
+
5268
+ .bg-secondary {
5369
+ --tw-bg-opacity: 1;
54-
+ background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
70+
+ background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
5571
+ }
5672
+
5773
+ .bg-gray {
5874
+ background-color: var(--colors-gray)
5975
+ }
6076
+
77+
+ .bg-white {
78+
+ --tw-bg-opacity: 1;
79+
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
80+
+ }
81+
+
6182
+ .bg-opacity-50 {
6283
+ --tw-bg-opacity: 0.5
6384
+ }

‎src/helpers.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
const startsWith = require('lodash/startsWith')
22

3+
const withRgb = (variable) => {
4+
return startsWith(variable, 'var') ? variable.replace(')', '-rgb)') : 'var(' + variable + '-rgb)'
5+
}
36
const colorVariable = (variable) => {
47
return function ({ opacityVariable, opacityValue }) {
5-
variable = startsWith(variable, 'var') ? variable : 'var(' + variable + ')'
68
if (opacityValue !== undefined) {
7-
return `rgba(${variable}, ${opacityValue})`
9+
return `rgba(${withRgb(variable)}, ${opacityValue})`
810
}
911
if (opacityVariable !== undefined) {
10-
return `rgba(${variable}, var(${opacityVariable}, 1))`
12+
return `rgba(${withRgb(variable)}, var(${opacityVariable}, 1))`
1113
}
12-
return `rgb(${variable})`
14+
return `rgb(${withRgb(variable)})`
1315
}
1416
}
1517
module.exports.colorVariable = colorVariable

‎src/utils.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ const isPlainObject = require('lodash/isPlainObject')
88
const hasOwn = require('lodash/has')
99
const _forEach = require('lodash/forEach')
1010
const _replace = require('lodash/replace')
11+
const startsWith = require('lodash/startsWith')
12+
const trimStart = require('lodash/trimStart')
13+
const trimEnd = require('lodash/trimEnd')
1114
const get = require('lodash/get')
1215

1316
const setComponent = (component, modifier, options) => {
@@ -75,8 +78,50 @@ const parseVariables = (object, varPrefix) => {
7578
return results
7679
}
7780

81+
const hexToRGB = (key, h) => {
82+
if (startsWith(h, 'rgba') || !startsWith(h, '#')) {
83+
return [key, h]
84+
} else if (startsWith(h, 'rgb')) {
85+
h = trimStart(h, 'rgb(')
86+
h = trimEnd(h, ')')
87+
}
88+
89+
let r = 0,
90+
g = 0,
91+
b = 0
92+
93+
// 3 digits
94+
if (h.length === 4) {
95+
r = '0x' + h[1] + h[1]
96+
g = '0x' + h[2] + h[2]
97+
b = '0x' + h[3] + h[3]
98+
99+
// 6 digits
100+
} else if (h.length === 7) {
101+
r = '0x' + h[1] + h[2]
102+
g = '0x' + h[3] + h[4]
103+
b = '0x' + h[5] + h[6]
104+
}
105+
106+
return [key + '-rgb', '' + +r + ',' + +g + ',' + +b + '']
107+
}
108+
109+
const setColorVariables = (source) => {
110+
return merge(
111+
source,
112+
...toPairs(source).map(([keys, value]) => {
113+
const flattenValue = isPlainObject(value) ? setColorVariables(value) : value
114+
return fromPairs(keys.split(', ').map((key) => hexToRGB(key, flattenValue)))
115+
})
116+
)
117+
}
118+
78119
const build = (options, source) => {
79120
let varPrefix = formatVariableKey(get(options, 'variablePrefix', ''))
121+
let colorVariables = get(options, 'colorVariables', false)
122+
if (colorVariables) {
123+
source = setColorVariables(source)
124+
}
80125
if (!varPrefix) {
81126
varPrefix = ''
82127
}
@@ -99,6 +144,10 @@ const darkBuild = (options, darkMode, source) => {
99144
if (!varPrefix) {
100145
varPrefix = ''
101146
}
147+
let colorVariables = get(options, 'colorVariables', false)
148+
if (colorVariables) {
149+
source = setColorVariables(source)
150+
}
102151
let darkSelector = get(options, 'darkSelector', '.dark')
103152
if (!darkSelector) {
104153
darkSelector = '.dark'

0 commit comments

Comments
 (0)