Skip to content

Commit 20f8b29

Browse files
author
streamich
committed
nested lists
1 parent 81ec271 commit 20f8b29

File tree

8 files changed

+141
-30
lines changed

8 files changed

+141
-30
lines changed

‎README.md

+19
Original file line numberDiff line numberDiff line change
@@ -233,3 +233,22 @@ Output:
233233
@media (max-width: 600px){
234234
.facet_sidebar{display:none}
235235
}
236+
237+
## Nested lists
238+
239+
```js
240+
console.log(css.css({
241+
'section, div': {
242+
'h1, h2': {
243+
'span, .light': {
244+
td: 'none'
245+
},
246+
},
247+
},
248+
}));
249+
```
250+
251+
Output:
252+
253+
section h1 span, div h1 span,section h2 span, div h2 span,section h1 .light, div h1 .light,section h2 .light, div h2 .light{text-decoration:none}
254+

‎index.js

+24-9
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ function toBlocks(pojo) {
4545
blocks.push([selector, toBlocks(styles)]);
4646
return;
4747
}
48+
var selectors = selector.split(',');
4849
if (!(styles instanceof Array))
4950
styles = [styles];
5051
var tmp = {};
@@ -64,7 +65,8 @@ function toBlocks(pojo) {
6465
}
6566
styles = tmp;
6667
var statements = [];
67-
blocks.push([selector, statements]);
68+
var block = [selector, statements];
69+
blocks.push(block);
6870
for (var prop in styles) {
6971
if (styles.hasOwnProperty(prop)) {
7072
(function process_style(style) {
@@ -75,20 +77,33 @@ function toBlocks(pojo) {
7577
statements.push(prop + ':' + style);
7678
break;
7779
case 'object':
78-
var innerpojo;
79-
if (prop.indexOf('&') > -1) {
80-
innerpojo = (_a = {}, _a[prop.replace('&', selector)] = style, _a);
81-
}
82-
else {
83-
innerpojo = (_b = {}, _b[selector + ' ' + prop] = style, _b);
80+
var props = prop.split(',');
81+
var selector_list = [];
82+
for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {
83+
var p = props_1[_i];
84+
if (p.indexOf('&') > -1) {
85+
for (var _a = 0, selectors_1 = selectors; _a < selectors_1.length; _a++) {
86+
var sel = selectors_1[_a];
87+
selector_list.push(p.replace('&', sel));
88+
}
89+
}
90+
else {
91+
for (var _b = 0, selectors_2 = selectors; _b < selectors_2.length; _b++) {
92+
var sel = selectors_2[_b];
93+
selector_list.push(sel + ' ' + p);
94+
}
95+
}
8496
}
97+
var selectors_combined = selector_list.join(',');
98+
var innerpojo = (_c = {}, _c[selectors_combined] = style, _c);
99+
block[0] = selectors_combined;
85100
blocks = blocks.concat(toBlocks(innerpojo));
86101
break;
87102
case 'function':
88-
process_style(style(selector, styles, prop));
103+
process_style(style(sel, styles, prop));
89104
break;
90105
}
91-
var _a, _b;
106+
var _c;
92107
})(styles[prop]);
93108
}
94109
}

‎index.ts

+42-20
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export function toBlocks(pojo): (Tblock|Tmediablock)[] {
4949
return;
5050
}
5151

52+
var selectors = selector.split(',');
53+
5254
if(!(styles instanceof Array)) styles = [styles];
5355

5456
var tmp: any = {};
@@ -65,29 +67,49 @@ export function toBlocks(pojo): (Tblock|Tmediablock)[] {
6567
})(s);}
6668
styles = tmp;
6769

70+
6871
var statements = [];
69-
blocks.push([selector, statements]);
70-
for(var prop in styles) { if(styles.hasOwnProperty(prop)) { (function process_style(style) {
71-
switch(typeof style) {
72-
case 'string':
73-
case 'number':
74-
prop = atoms[prop] || prop;
75-
statements.push(prop + ':' + style);
76-
break;
77-
case 'object':
78-
var innerpojo: any;
79-
if(prop.indexOf('&') > -1) {
80-
innerpojo = {[prop.replace('&', selector)]: style};
81-
} else {
82-
innerpojo = {[selector + ' ' + prop]: style};
72+
var block = [selector, statements];
73+
blocks.push(block);
74+
for (var prop in styles) {
75+
if (styles.hasOwnProperty(prop)) {
76+
(function process_style(style) {
77+
switch (typeof style) {
78+
case 'string':
79+
case 'number':
80+
prop = atoms[prop] || prop;
81+
statements.push(prop + ':' + style);
82+
break;
83+
case 'object':
84+
var props = prop.split(',');
85+
var selector_list = [];
86+
87+
for(var p of props) {
88+
if (p.indexOf('&') > -1) {
89+
for(var sel of selectors) {
90+
selector_list.push(p.replace('&', sel));
91+
}
92+
} else {
93+
for(var sel of selectors) {
94+
selector_list.push(sel + ' ' + p);
95+
}
96+
}
97+
}
98+
99+
var selectors_combined = selector_list.join(',');
100+
var innerpojo = {[selectors_combined]: style};
101+
102+
block[0] = selectors_combined;
103+
blocks = blocks.concat(toBlocks(innerpojo));
104+
break;
105+
case 'function':
106+
process_style(style(sel, styles, prop));
107+
break;
83108
}
84-
blocks = blocks.concat(toBlocks(innerpojo));
85-
break;
86-
case 'function':
87-
process_style(style(selector, styles, prop));
88-
break;
109+
})(styles[prop]);
89110
}
90-
})(styles[prop]);}}
111+
}
112+
91113
})(pojo[selector]);}}
92114

93115
return blocks;

‎list.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var css = require('./index');
2+
// ## Neste Lists
3+
var pojo = {
4+
'h1, h2': {
5+
'span, .light': {
6+
td: 'none'
7+
}
8+
}
9+
};
10+
var bl = css.toBlocks(pojo);
11+
console.log(bl);
12+
console.log(bl[0][1]);
13+
console.log(css.css(pojo));

‎list.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
declare var require: any;
2+
var css = require('./index');
3+
4+
5+
// ## Neste Lists
6+
var pojo = {
7+
'h1, h2': {
8+
'span, .light': {
9+
td: 'none',
10+
},
11+
},
12+
};
13+
var bl = css.toBlocks(pojo);
14+
15+
console.log(bl);
16+
console.log(bl[0][1]);
17+
console.log(css.css(pojo));
18+

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "css-light",
33
"description": "Write CSS in JavaScript",
4-
"version": "1.0.4",
4+
"version": "1.0.5",
55
"keywords": [
66
"css",
77
"javascript",

‎test.js

+11
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,14 @@ console.log(css.css({
130130
}
131131
}));
132132
// @media (max-width: 600px){.facet_sidebar{display:none}}
133+
// ## Nested lists
134+
console.log(css.css({
135+
'section, div': {
136+
'h1, h2': {
137+
'span, .light': {
138+
td: 'none'
139+
}
140+
}
141+
}
142+
}));
143+
// section h1 span, div h1 span,section h2 span, div h2 span,section h1 .light, div h1 .light,section h2 .light, div h2 .light{text-decoration:none}

‎test.ts

+13
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,16 @@ console.log(css.css({
151151
}
152152
}));
153153
// @media (max-width: 600px){.facet_sidebar{display:none}}
154+
155+
156+
// ## Nested lists
157+
console.log(css.css({
158+
'section, div': {
159+
'h1, h2': {
160+
'span, .light': {
161+
td: 'none'
162+
},
163+
},
164+
},
165+
}));
166+
// section h1 span, div h1 span,section h2 span, div h2 span,section h1 .light, div h1 .light,section h2 .light, div h2 .light{text-decoration:none}

0 commit comments

Comments
 (0)