Skip to content

Commit 619411e

Browse files
mertasanmertasan
committed
wip
1 parent 6176662 commit 619411e

8 files changed

+400
-400
lines changed

‎__tests__/basic-usage.test.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ test('basic usage', async () => {
3737
3838
3939
+ :root {
40-
+ --colors-black: rgb(0, 0, 0);
41-
+ --colors-white: #ffffff;
42-
+ --sizes-small: 10px;
43-
+ --sizes-medium: 2rem;
44-
+ --sizes-large: 100%
40+
+ --colors-black: rgb(0, 0, 0);
41+
+ --colors-white: #ffffff;
42+
+ --sizes-small: 10px;
43+
+ --sizes-medium: 2rem;
44+
+ --sizes-large: 100%
4545
+ }
4646
+ .container {
47-
+ --colors-primary: red;
48-
+ --colors-secondary: var(--colors-primary)
47+
+ --colors-primary: red;
48+
+ --colors-secondary: var(--colors-primary)
4949
+ }
5050
5151
"

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

Lines changed: 89 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -66,70 +66,70 @@ test('colorVariable helper', async () => {
6666
6767
6868
+ :root {
69-
+ --colors-primary: #ff0;
70-
+ --colors-secondary: #000000;
71-
+ --colors-gray: #6B7280;
72-
+ --colors-blue: rgb(0,0,254);
73-
+ --colors-red-400: rgba(254,0,0,0.5);
74-
+ --colors-red-500: rgba(254,0,0,1);
75-
+ --colors-red-400-rgb: 254,0,0;
76-
+ --colors-red-500-rgb: 254,0,0;
77-
+ --colors-green: rgb(0,255,0);
78-
+ --colors-yellow-400: rgb(255,255,0);
79-
+ --colors-yellow: rgb(255,255,0);
80-
+ --colors-yellow-400-rgb: 255,255,0;
81-
+ --colors-yellow-rgb: 255,255,0;
82-
+ --colors-primary-rgb: 255,255,0;
83-
+ --colors-secondary-rgb: 0,0,0;
84-
+ --colors-gray-rgb: 107,114,128;
85-
+ --colors-blue-rgb: 0,0,254;
86-
+ --colors-green-rgb: 0,255,0;
87-
+ --sizes-small: 10px;
88-
+ --sizes-medium: 2rem;
89-
+ --sizes-large: 100%
69+
+ --colors-primary: #ff0;
70+
+ --colors-secondary: #000000;
71+
+ --colors-gray: #6B7280;
72+
+ --colors-blue: rgb(0,0,254);
73+
+ --colors-red-400: rgba(254,0,0,0.5);
74+
+ --colors-red-500: rgba(254,0,0,1);
75+
+ --colors-red-400-rgb: 254,0,0;
76+
+ --colors-red-500-rgb: 254,0,0;
77+
+ --colors-green: rgb(0,255,0);
78+
+ --colors-yellow-400: rgb(255,255,0);
79+
+ --colors-yellow: rgb(255,255,0);
80+
+ --colors-yellow-400-rgb: 255,255,0;
81+
+ --colors-yellow-rgb: 255,255,0;
82+
+ --colors-primary-rgb: 255,255,0;
83+
+ --colors-secondary-rgb: 0,0,0;
84+
+ --colors-gray-rgb: 107,114,128;
85+
+ --colors-blue-rgb: 0,0,254;
86+
+ --colors-green-rgb: 0,255,0;
87+
+ --sizes-small: 10px;
88+
+ --sizes-medium: 2rem;
89+
+ --sizes-large: 100%
9090
+ }
9191
+ .bg-secondary {
92-
+ --tw-bg-opacity: 1;
93-
+ background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
92+
+ --tw-bg-opacity: 1;
93+
+ background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
9494
+ }
9595
+ .bg-gray {
96-
+ background-color: var(--colors-gray)
96+
+ background-color: var(--colors-gray)
9797
+ }
9898
+ .bg-red-400 {
99-
+ --tw-bg-opacity: 1;
100-
+ background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
99+
+ --tw-bg-opacity: 1;
100+
+ background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
101101
+ }
102102
+ .bg-red-500 {
103-
+ --tw-bg-opacity: 1;
104-
+ background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
103+
+ --tw-bg-opacity: 1;
104+
+ background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
105105
+ }
106106
+ .bg-red-600 {
107-
+ background-color: var(--colors-red-500)
107+
+ background-color: var(--colors-red-500)
108108
+ }
109109
+ .bg-green {
110-
+ background-color: var(--colors-green)
110+
+ background-color: var(--colors-green)
111111
+ }
112112
+ .bg-white {
113-
+ --tw-bg-opacity: 1;
114-
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
113+
+ --tw-bg-opacity: 1;
114+
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
115115
+ }
116116
+ .bg-yellow {
117-
+ --tw-bg-opacity: 1;
118-
+ background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))
117+
+ --tw-bg-opacity: 1;
118+
+ background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))
119119
+ }
120120
+ .bg-opacity-50 {
121-
+ --tw-bg-opacity: 0.5
121+
+ --tw-bg-opacity: 0.5
122122
+ }
123123
+ .text-primary {
124-
+ --tw-text-opacity: 1;
125-
+ color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
124+
+ --tw-text-opacity: 1;
125+
+ color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
126126
+ }
127127
+ .text-blue {
128-
+ --tw-text-opacity: 1;
129-
+ color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
128+
+ --tw-text-opacity: 1;
129+
+ color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
130130
+ }
131131
+ .text-opacity-50 {
132-
+ --tw-text-opacity: 0.5
132+
+ --tw-text-opacity: 0.5
133133
+ }
134134
135135
"
@@ -177,34 +177,34 @@ test('colorVariable - background and text color', async () => {
177177
178178
179179
+ .bg-indigo-400 {
180-
+ --tw-bg-opacity: 1;
181-
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
180+
+ --tw-bg-opacity: 1;
181+
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
182182
+ }
183183
+ .bg-indigo-500 {
184-
+ --tw-bg-opacity: 1;
185-
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
184+
+ --tw-bg-opacity: 1;
185+
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
186186
+ }
187187
+ .bg-indigo-600 {
188-
+ --tw-bg-opacity: 1;
189-
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
188+
+ --tw-bg-opacity: 1;
189+
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
190190
+ }
191191
+ .bg-opacity-50 {
192-
+ --tw-bg-opacity: 0.5
192+
+ --tw-bg-opacity: 0.5
193193
+ }
194194
+ .text-indigo-400 {
195-
+ --tw-text-opacity: 1;
196-
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
195+
+ --tw-text-opacity: 1;
196+
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
197197
+ }
198198
+ .text-indigo-500 {
199-
+ --tw-text-opacity: 1;
200-
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
199+
+ --tw-text-opacity: 1;
200+
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
201201
+ }
202202
+ .text-indigo-600 {
203-
+ --tw-text-opacity: 1;
204-
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
203+
+ --tw-text-opacity: 1;
204+
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
205205
+ }
206206
+ .text-opacity-50 {
207-
+ --tw-text-opacity: 0.5
207+
+ --tw-text-opacity: 0.5
208208
+ }
209209
210210
"
@@ -256,28 +256,28 @@ test('colorVariable - background and text color 2', async () => {
256256
257257
258258
+ .bg-indigo-400 {
259-
+ --tw-bg-opacity: 1;
260-
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
259+
+ --tw-bg-opacity: 1;
260+
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
261261
+ }
262262
+ .bg-indigo-500 {
263-
+ --tw-bg-opacity: 1;
264-
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
263+
+ --tw-bg-opacity: 1;
264+
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
265265
+ }
266266
+ .bg-indigo-600 {
267-
+ --tw-bg-opacity: 1;
268-
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
267+
+ --tw-bg-opacity: 1;
268+
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
269269
+ }
270270
+ .text-indigo-400 {
271-
+ --tw-text-opacity: 1;
272-
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
271+
+ --tw-text-opacity: 1;
272+
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
273273
+ }
274274
+ .text-indigo-500 {
275-
+ --tw-text-opacity: 1;
276-
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
275+
+ --tw-text-opacity: 1;
276+
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
277277
+ }
278278
+ .text-indigo-600 {
279-
+ --tw-text-opacity: 1;
280-
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
279+
+ --tw-text-opacity: 1;
280+
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
281281
+ }
282282
283283
"
@@ -325,27 +325,27 @@ test('colorVariable with gradient color stops', async () => {
325325
326326
327327
+ :root {
328-
+ --colors-red-400: rgba(254,0,0,1);
329-
+ --colors-red-500: rgba(254,0,0,0.5);
330-
+ --colors-red-600: #a20606;
331-
+ --colors-red-400-rgb: 254,0,0;
332-
+ --colors-red-500-rgb: 254,0,0;
333-
+ --colors-red-600-rgb: 162,6,6
328+
+ --colors-red-400: rgba(254,0,0,1);
329+
+ --colors-red-500: rgba(254,0,0,0.5);
330+
+ --colors-red-600: #a20606;
331+
+ --colors-red-400-rgb: 254,0,0;
332+
+ --colors-red-500-rgb: 254,0,0;
333+
+ --colors-red-600-rgb: 162,6,6
334334
+ }
335335
+ .from-red-400 {
336-
+ --tw-gradient-from: rgb(var(--colors-red-400-rgb));
337-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400-rgb), 0))
336+
+ --tw-gradient-from: rgb(var(--colors-red-400-rgb));
337+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400-rgb), 0))
338338
+ }
339339
+ .from-red-500 {
340-
+ --tw-gradient-from: rgb(var(--colors-red-500-rgb));
341-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500-rgb), 0))
340+
+ --tw-gradient-from: rgb(var(--colors-red-500-rgb));
341+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500-rgb), 0))
342342
+ }
343343
+ .from-red-600 {
344-
+ --tw-gradient-from: rgb(var(--colors-red-600-rgb));
345-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600-rgb), 0))
344+
+ --tw-gradient-from: rgb(var(--colors-red-600-rgb));
345+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600-rgb), 0))
346346
+ }
347347
+ .text-opacity-50 {
348-
+ --tw-text-opacity: 0.5
348+
+ --tw-text-opacity: 0.5
349349
+ }
350350
351351
"
@@ -394,24 +394,24 @@ test('colorVariable with gradient color stops (forceRGB)', async () => {
394394
395395
396396
+ :root {
397-
+ --colors-red-400: 254,0,0;
398-
+ --colors-red-500: 254,0,0;
399-
+ --colors-red-600: 162,6,6
397+
+ --colors-red-400: 254,0,0;
398+
+ --colors-red-500: 254,0,0;
399+
+ --colors-red-600: 162,6,6
400400
+ }
401401
+ .from-red-400 {
402-
+ --tw-gradient-from: rgb(var(--colors-red-400));
403-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400), 0))
402+
+ --tw-gradient-from: rgb(var(--colors-red-400));
403+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400), 0))
404404
+ }
405405
+ .from-red-500 {
406-
+ --tw-gradient-from: rgb(var(--colors-red-500));
407-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500), 0))
406+
+ --tw-gradient-from: rgb(var(--colors-red-500));
407+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500), 0))
408408
+ }
409409
+ .from-red-600 {
410-
+ --tw-gradient-from: rgb(var(--colors-red-600));
411-
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600), 0))
410+
+ --tw-gradient-from: rgb(var(--colors-red-600));
411+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600), 0))
412412
+ }
413413
+ .text-opacity-50 {
414-
+ --tw-text-opacity: 0.5
414+
+ --tw-text-opacity: 0.5
415415
+ }
416416
417417
"

‎__tests__/css-selectors.test.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,28 +56,28 @@ test('css selectors', async () => {
5656
5757
5858
+ #app {
59-
+ --colors-black: rgb(0, 0, 0);
60-
+ --colors-white: #ffffff
59+
+ --colors-black: rgb(0, 0, 0);
60+
+ --colors-white: #ffffff
6161
+ }
6262
+ input[type='text'] {
63-
+ --colors-primary: red;
64-
+ --colors-secondary: yellow
63+
+ --colors-primary: red;
64+
+ --colors-secondary: yellow
6565
+ }
6666
+ .container {
67-
+ --sizes-medium: 3rem
67+
+ --sizes-medium: 3rem
6868
+ }
6969
+ .container.card {
70-
+ --sizes-medium: 4rem
70+
+ --sizes-medium: 4rem
7171
+ }
7272
+ *,
7373
+ *::before,
7474
+ *::after {
75-
+ --hello-world: 100%
75+
+ --hello-world: 100%
7676
+ }
7777
+ [type='button'],
7878
+ [type='reset'] {
79-
+ --colors-primary: blue;
80-
+ --colors-secondary: green
79+
+ --colors-primary: blue;
80+
+ --colors-secondary: green
8181
+ }
8282
8383
"

0 commit comments

Comments
 (0)