Skip to content

Commit 07321c2

Browse files
peterramsingpeterramsing
authored
Merge pull request #439 from peterramsing/424-lost-reset-flex
Fixes bug where flexed column doesn't reset
2 parents 9f27371 + f2501c8 commit 07321c2

File tree

2 files changed

+202
-44
lines changed

2 files changed

+202
-44
lines changed

‎lib/lost-column.js‎

Lines changed: 82 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -269,53 +269,91 @@ module.exports = function lostColumnDecl(css, settings, result) {
269269
),
270270
});
271271
} else {
272-
decl.cloneBefore({
273-
prop: 'width',
274-
value: 'auto',
272+
decl.parent.nodes.forEach((declaration) => {
273+
if (declaration.prop === 'lost-column-flexbox') {
274+
if (declaration.value === 'flex') {
275+
lostColumnFlexbox = 'flex';
276+
} else {
277+
throw declaration.error(
278+
`lost-column-flexbox: property '${declaration.value}' is unknown.`
279+
);
280+
}
281+
282+
declaration.remove();
283+
}
275284
});
276285

277-
if (gridDirection === 'rtl') {
278-
newBlock(
279-
decl,
280-
':nth-child(1n + 1)',
281-
['float', 'clear', 'margin-left', 'width'],
282-
['none', 'none', 0, 'auto']
283-
);
284-
285-
newBlock(
286-
decl,
287-
':nth-child(1n)',
288-
['float', 'clear', 'margin-left', 'width'],
289-
['none', 'none', 0, 'auto']
290-
);
291-
292-
newBlock(
293-
decl,
294-
':last-child',
295-
['float', 'clear', 'margin-left', 'width'],
296-
['none', 'none', 0, 'auto']
297-
);
286+
if (lostColumnFlexbox === 'flex') {
287+
decl.cloneBefore({
288+
prop: 'flex',
289+
value: 'unset',
290+
});
291+
decl.cloneBefore({
292+
prop: 'max-width',
293+
value: 'unset',
294+
});
295+
decl.cloneBefore({
296+
prop: 'width',
297+
value: 'unset',
298+
});
299+
if (gridDirection === 'rtl') {
300+
newBlock(decl, ':nth-child(1n + 1)', ['margin-left'], [0]);
301+
newBlock(decl, ':nth-child(1n)', ['margin-left'], [0]);
302+
newBlock(decl, ':last-child', ['margin-left'], [0]);
303+
} else {
304+
newBlock(decl, ':nth-child(1n + 1)', ['margin-right'], [0]);
305+
newBlock(decl, ':nth-child(1n)', ['margin-right'], [0]);
306+
newBlock(decl, ':last-child', ['margin-right'], [0]);
307+
}
298308
} else {
299-
newBlock(
300-
decl,
301-
':nth-child(1n + 1)',
302-
['float', 'clear', 'margin-right', 'width'],
303-
['none', 'none', 0, 'auto']
304-
);
305-
306-
newBlock(
307-
decl,
308-
':nth-child(1n)',
309-
['float', 'clear', 'margin-right', 'width'],
310-
['none', 'none', 0, 'auto']
311-
);
312-
313-
newBlock(
314-
decl,
315-
':last-child',
316-
['float', 'clear', 'margin-right', 'width'],
317-
['none', 'none', 0, 'auto']
318-
);
309+
decl.cloneBefore({
310+
prop: 'width',
311+
value: 'auto',
312+
});
313+
314+
if (gridDirection === 'rtl') {
315+
newBlock(
316+
decl,
317+
':nth-child(1n + 1)',
318+
['float', 'clear', 'margin-left', 'width'],
319+
['none', 'none', 0, 'auto']
320+
);
321+
322+
newBlock(
323+
decl,
324+
':nth-child(1n)',
325+
['float', 'clear', 'margin-left', 'width'],
326+
['none', 'none', 0, 'auto']
327+
);
328+
329+
newBlock(
330+
decl,
331+
':last-child',
332+
['float', 'clear', 'margin-left', 'width'],
333+
['none', 'none', 0, 'auto']
334+
);
335+
} else {
336+
newBlock(
337+
decl,
338+
':nth-child(1n + 1)',
339+
['float', 'clear', 'margin-right', 'width'],
340+
['none', 'none', 0, 'auto']
341+
);
342+
343+
newBlock(
344+
decl,
345+
':nth-child(1n)',
346+
['float', 'clear', 'margin-right', 'width'],
347+
['none', 'none', 0, 'auto']
348+
);
349+
350+
newBlock(
351+
decl,
352+
':last-child',
353+
['float', 'clear', 'margin-right', 'width'],
354+
['none', 'none', 0, 'auto']
355+
);
356+
}
319357
}
320358
}
321359

‎test/lost-column.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,126 @@ describe('lost-column', () => {
1818
"lost-column-flexbox: property 'flexible' is unknown."
1919
);
2020
});
21+
describe('reset', () => {
22+
it('resets lost-column with global flex in LTR', () => {
23+
check(
24+
`
25+
@lost flexbox flex;
26+
27+
.grid {
28+
lost-flex-container: row;
29+
}
30+
31+
.grid--alternate .right {
32+
lost-column: none;
33+
}
34+
`,
35+
`
36+
.grid {
37+
display: flex;
38+
flex-flow: row wrap;
39+
}
40+
.grid--alternate .right {
41+
flex: unset;
42+
max-width: unset;
43+
width: unset;
44+
}
45+
.grid--alternate .right:last-child {
46+
margin-right: 0;
47+
}
48+
.grid--alternate .right:nth-child(1n) {
49+
margin-right: 0;
50+
}
51+
.grid--alternate .right:nth-child(1n+1) {
52+
margin-right: 0;
53+
}
54+
`
55+
);
56+
check(
57+
`
58+
.grid {
59+
lost-flex-container: row;
60+
}
61+
62+
.grid--alternate .right {
63+
lost-column-flexbox: flex;
64+
lost-column: none;
65+
}
66+
`,
67+
`
68+
.grid {
69+
display: flex;
70+
flex-flow: row wrap;
71+
}
72+
.grid--alternate .right {
73+
flex: unset;
74+
max-width: unset;
75+
width: unset;
76+
}
77+
.grid--alternate .right:last-child {
78+
margin-right: 0;
79+
}
80+
.grid--alternate .right:nth-child(1n) {
81+
margin-right: 0;
82+
}
83+
.grid--alternate .right:nth-child(1n+1) {
84+
margin-right: 0;
85+
}
86+
`
87+
);
88+
throws(
89+
`
90+
@lost flexbox flex;
91+
92+
.grid {
93+
lost-flex-container: row;
94+
}
95+
96+
.grid--alternate .thing {
97+
lost-column-flexbox: flexible;
98+
lost-column: none;
99+
}
100+
`,
101+
"lost-column-flexbox: property 'flexible' is unknown."
102+
);
103+
});
104+
it('resets lost-column with global flex in RTL', () => {
105+
check(
106+
`
107+
@lost flexbox flex;
108+
@lost --beta-direction rtl;
109+
110+
.grid {
111+
lost-flex-container: row;
112+
}
113+
114+
.grid--alternate .thing {
115+
lost-column: none;
116+
}
117+
`,
118+
`
119+
.grid {
120+
display: flex;
121+
flex-flow: row wrap;
122+
}
123+
.grid--alternate .thing {
124+
flex: unset;
125+
max-width: unset;
126+
width: unset;
127+
}
128+
.grid--alternate .thing:last-child {
129+
margin-left: 0;
130+
}
131+
.grid--alternate .thing:nth-child(1n) {
132+
margin-left: 0;
133+
}
134+
.grid--alternate .thing:nth-child(1n+1) {
135+
margin-left: 0;
136+
}
137+
`
138+
);
139+
});
140+
});
21141
});
22142

23143
it('provides 3 column layout', () => {

0 commit comments

Comments
 (0)