Skip to content

Commit cbced23

Browse files
ZeeCoderZeeCoder
committed
Fixed style application for custom properties
1 parent b59a8de commit cbced23

File tree

17 files changed

+126
-13114
lines changed

17 files changed

+126
-13114
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ yarn-error.log
77
.idea
88
.DS_Store
99
yarn.lock
10+
package-lock.json

‎CHANGELOG.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10-
## [3.0.0]
10+
## [3.0.0-alpha.1]
11+
12+
### Fixed
13+
14+
- Tests now check if custom props are properly set
15+
- Change sets are tested with hyphenated prop names instead of camel cased ones
16+
17+
## [3.0.0-alpha.0]
1118

1219
### Added
1320

‎packages/container-query/src/adjustContainer.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ test("should apply changed styles", () => {
6363
getChangedStyles.mockImplementationOnce(() => ({
6464
".Container": {
6565
addStyle: {
66-
lineHeight: "10px",
66+
"line-height": "10px",
6767
background: "none"
6868
},
6969
removeProps: ["fontSize", "border"]

‎packages/container-query/src/applyStylesToElements.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ export default function applyStylesToElements(styles, elements) {
77

88
for (let i = 0; i < elementsLength; i++) {
99
for (let prop in styles) {
10-
elements[i].style[prop] = styles[prop];
11-
// Equivalent to setProperty, see: https://devdocs.io/dom/cssstyledeclaration/setproperty
10+
// Even though `style[prop] = value` is equivalent for the most part, we
11+
// need to use setProperty to support setting css custom props as well.
12+
elements[i].style.setProperty(prop, styles[prop]);
1213
}
1314
}
1415
}

‎packages/container-query/src/applyStylesToElements.spec.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,49 @@
11
import applyStylesToElements from "./applyStylesToElements";
22

3+
// For some reason "setProperty" here in Node doesn't work with custom props for
4+
// elements created via `document.createElement`, that's why I'm mocking the
5+
// styles object here.
6+
class Style {
7+
constructor() {
8+
this.style = {};
9+
}
10+
11+
setProperty(name, value) {
12+
this.style[name] = value;
13+
}
14+
15+
getPropertyValue(name) {
16+
return this.style[name];
17+
}
18+
}
19+
320
test("should apply all declarations to all the elements", () => {
421
const element1 = {
5-
style: {}
22+
style: new Style()
623
};
724
const element2 = {
8-
style: {}
25+
style: new Style()
926
};
1027

1128
const elements = [element1, element2];
1229

1330
const style = {
1431
"font-size": "42px",
15-
"line-height": "50px"
32+
"line-height": "50px",
33+
"--custom-prop": "50px"
1634
};
1735

1836
applyStylesToElements(style, elements);
1937

20-
expect(element1.style).toEqual(style);
21-
expect(element2.style).toEqual(style);
38+
elements.forEach(element => {
39+
expect(element.style.getPropertyValue("font-size")).toEqual(
40+
style["font-size"]
41+
);
42+
expect(element.style.getPropertyValue("line-height")).toEqual(
43+
style["line-height"]
44+
);
45+
expect(element.style.getPropertyValue("custom-prop")).toEqual(
46+
style["custom-prop"]
47+
);
48+
});
2249
});

‎packages/container-query/src/getChangedStyles.spec.js‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@ test("should apply default queries without a condition function", () => {
3030
{
3131
[SELECTOR]: ".Container",
3232
[VALUES]: {
33-
fontSize: `2rh`,
34-
lineHeight: `1rh`
33+
"font-size": `2rh`,
34+
"line-height": `1rh`
3535
}
3636
},
3737
{
3838
[SELECTOR]: ".Container__element",
3939
[VALUES]: {
40-
lineHeight: `3rh`
40+
"line-height": `3rh`
4141
}
4242
}
4343
]
@@ -48,14 +48,14 @@ test("should apply default queries without a condition function", () => {
4848
{
4949
[SELECTOR]: ".Container",
5050
[VALUES]: {
51-
fontSize: `4rh`,
52-
lineHeight: `2rh`
51+
"font-size": `4rh`,
52+
"line-height": `2rh`
5353
}
5454
},
5555
{
5656
[SELECTOR]: ".Container__element",
5757
[STYLES]: {
58-
lineHeight: "10px"
58+
"line-height": "10px"
5959
}
6060
}
6161
]
@@ -70,13 +70,13 @@ test("should apply default queries without a condition function", () => {
7070
expect(getChangedStyles(element, size)).toEqual({
7171
".Container": {
7272
addStyle: {
73-
fontSize: "4.000px",
74-
lineHeight: "2.000px"
73+
"font-size": "4.000px",
74+
"line-height": "2.000px"
7575
}
7676
},
7777
".Container__element": {
7878
addStyle: {
79-
lineHeight: "10px"
79+
"line-height": "10px"
8080
}
8181
}
8282
});
@@ -94,11 +94,11 @@ test("should return change sets on first run", () => {
9494
{
9595
[SELECTOR]: ".Container__element",
9696
[STYLES]: {
97-
fontSize: "12px",
97+
"font-size": "12px",
9898
background: "#ccc"
9999
},
100100
[VALUES]: {
101-
lineHeight: `1rh`
101+
"line-height": `1rh`
102102
}
103103
}
104104
]
@@ -115,7 +115,7 @@ test("should return change sets on first run", () => {
115115
{
116116
[SELECTOR]: ".Container__element",
117117
[STYLES]: {
118-
fontSize: "14px"
118+
"font-size": "14px"
119119
}
120120
}
121121
]
@@ -136,8 +136,8 @@ test("should return change sets on first run", () => {
136136
},
137137
".Container__element": {
138138
addStyle: {
139-
fontSize: "14px",
140-
lineHeight: "1.00px",
139+
"font-size": "14px",
140+
"line-height": "1.00px",
141141
background: "#ccc"
142142
}
143143
}
@@ -188,7 +188,7 @@ test("should generate remove change set", () => {
188188
[SELECTOR]: ".Container",
189189
[STYLES]: {},
190190
[VALUES]: {
191-
lineHeight: `10rh`
191+
"line-height": `10rh`
192192
}
193193
}
194194
]
@@ -199,11 +199,11 @@ test("should generate remove change set", () => {
199199
{
200200
[SELECTOR]: ".Container",
201201
[STYLES]: {
202-
fontSize: "14px",
202+
"font-size": "14px",
203203
background: "#bbb"
204204
},
205205
[VALUES]: {
206-
lineHeight: `2rh`
206+
"line-height": `2rh`
207207
}
208208
},
209209
{
@@ -213,7 +213,7 @@ test("should generate remove change set", () => {
213213
border: "none"
214214
},
215215
[VALUES]: {
216-
fontSize: `1rh`
216+
"font-size": `1rh`
217217
}
218218
}
219219
]
@@ -230,15 +230,15 @@ test("should generate remove change set", () => {
230230
".Container": {
231231
addStyle: {
232232
background: "#aaa",
233-
lineHeight: "10.00px"
233+
"line-height": "10.00px"
234234
},
235-
removeProps: ["fontSize"]
235+
removeProps: ["font-size"]
236236
},
237237
".Container__element": {
238238
addStyle: {
239239
background: "#bbb"
240240
},
241-
removeProps: ["border", "fontSize"]
241+
removeProps: ["border", "font-size"]
242242
}
243243
});
244244
expect(registryData.queryState).toEqual([true, true, false]);
@@ -256,15 +256,15 @@ test("should generate empty change set if conditions allow", () => {
256256
{
257257
[SELECTOR]: ".Container",
258258
[STYLES]: {
259-
fontSize: "14px",
259+
"font-size": "14px",
260260
background: "#bbb",
261-
lineHeight: "16px"
261+
"line-height": "16px"
262262
}
263263
},
264264
{
265265
[SELECTOR]: ".Container__element",
266266
[STYLES]: {
267-
fontSize: "8px",
267+
"font-size": "8px",
268268
background: "#eee"
269269
}
270270
}
@@ -276,15 +276,15 @@ test("should generate empty change set if conditions allow", () => {
276276
{
277277
[SELECTOR]: ".Container",
278278
[STYLES]: {
279-
fontSize: "16px",
279+
"font-size": "16px",
280280
background: "#ccc",
281-
lineHeight: "18px"
281+
"line-height": "18px"
282282
}
283283
},
284284
{
285285
[SELECTOR]: ".Container__element",
286286
[STYLES]: {
287-
fontSize: "9px",
287+
"font-size": "9px",
288288
background: "#fff"
289289
}
290290
}
@@ -317,13 +317,13 @@ test("should always recalculate values", () => {
317317
{
318318
[SELECTOR]: ".Container",
319319
[VALUES]: {
320-
fontSize: `2rh`
320+
"font-size": `2rh`
321321
}
322322
},
323323
{
324324
[SELECTOR]: ".Container__element",
325325
[VALUES]: {
326-
fontSize: `4rh`
326+
"font-size": `4rh`
327327
}
328328
}
329329
]
@@ -334,7 +334,7 @@ test("should always recalculate values", () => {
334334
{
335335
[SELECTOR]: ".Container",
336336
[VALUES]: {
337-
fontSize: `3rh`
337+
"font-size": `3rh`
338338
}
339339
}
340340
]
@@ -345,13 +345,13 @@ test("should always recalculate values", () => {
345345
{
346346
[SELECTOR]: ".Container",
347347
[VALUES]: {
348-
lineHeight: `4rh`
348+
"line-height": `4rh`
349349
}
350350
},
351351
{
352352
[SELECTOR]: ".Container__element",
353353
[VALUES]: {
354-
lineHeight: `3rh`
354+
"line-height": `3rh`
355355
}
356356
}
357357
]
@@ -366,14 +366,14 @@ test("should always recalculate values", () => {
366366
expect(getChangedStyles(element, size)).toEqual({
367367
".Container": {
368368
addStyle: {
369-
lineHeight: "8.00px",
370-
fontSize: "6.00px"
369+
"line-height": "8.00px",
370+
"font-size": "6.00px"
371371
}
372372
},
373373
".Container__element": {
374374
addStyle: {
375-
lineHeight: "6.00px",
376-
fontSize: "8.00px"
375+
"line-height": "6.00px",
376+
"font-size": "8.00px"
377377
}
378378
}
379379
});
@@ -392,8 +392,8 @@ test("should be able to limit the precision of generated css values", () => {
392392
{
393393
[SELECTOR]: ".Container",
394394
[VALUES]: {
395-
fontSize: `22.5rh`,
396-
lineHeight: `22.4rh`
395+
"font-size": `22.5rh`,
396+
"line-height": `22.4rh`
397397
}
398398
}
399399
]
@@ -409,8 +409,8 @@ test("should be able to limit the precision of generated css values", () => {
409409
expect(getChangedStyles(element, size)).toEqual({
410410
".Container": {
411411
addStyle: {
412-
fontSize: "27.68px",
413-
lineHeight: "27.55px"
412+
"font-size": "27.68px",
413+
"line-height": "27.55px"
414414
}
415415
}
416416
});
@@ -430,8 +430,8 @@ test("should handle multiple prop removal over multiple queries", () => {
430430
[SELECTOR]: ".Container",
431431
[STYLES]: {
432432
border: "none",
433-
fontSize: "12px",
434-
lineHeight: "15px"
433+
"font-size": "12px",
434+
"line-height": "15px"
435435
}
436436
}
437437
]
@@ -442,7 +442,7 @@ test("should handle multiple prop removal over multiple queries", () => {
442442
{
443443
[SELECTOR]: ".Container",
444444
[STYLES]: {
445-
fontSize: "13px"
445+
"font-size": "13px"
446446
}
447447
}
448448
]
@@ -456,7 +456,7 @@ test("should handle multiple prop removal over multiple queries", () => {
456456
border: "1px solid"
457457
},
458458
[VALUES]: {
459-
lineHeight: `2rh`
459+
"line-height": `2rh`
460460
}
461461
}
462462
]
@@ -473,8 +473,8 @@ test("should handle multiple prop removal over multiple queries", () => {
473473
".Container": {
474474
addStyle: {
475475
border: "none",
476-
fontSize: "13px",
477-
lineHeight: "15px"
476+
"font-size": "13px",
477+
"line-height": "15px"
478478
}
479479
}
480480
});

0 commit comments

Comments
 (0)