Fixes issue where reset didn't work for flexbox #424

peterramsing · Feb 10, 2019 · 37cd828 · 37cd828
1 parent 5b4960e
commit 37cd828
Showing 1 changed file with 82 additions and 44 deletions.
diff --git a/lib/lost-column.js b/lib/lost-column.js
@@ -269,53 +269,91 @@ module.exports = function lostColumnDecl(css, settings, result) {
  ),
  });
  } else {
- decl.cloneBefore({
- prop: 'width',
- value: 'auto',
+ decl.parent.nodes.forEach(declaration => {
+ if (declaration.prop === 'lost-column-flexbox') {
+ if (declaration.value === 'flex') {
+ lostColumnFlexbox = 'flex';
+ } else {
+ throw declaration.error(
+ `lost-column-flexbox: property '${declaration.value}' is unknown.`
+ );
+ }
+
+ declaration.remove();
+ }
  });
 
- if (gridDirection === 'rtl') {
- newBlock(
- decl,
- ':nth-child(1n + 1)',
- ['float', 'clear', 'margin-left', 'width'],
- ['none', 'none', 0, 'auto']
- );
-
- newBlock(
- decl,
- ':nth-child(1n)',
- ['float', 'clear', 'margin-left', 'width'],
- ['none', 'none', 0, 'auto']
- );
-
- newBlock(
- decl,
- ':last-child',
- ['float', 'clear', 'margin-left', 'width'],
- ['none', 'none', 0, 'auto']
- );
+ if (lostColumnFlexbox === 'flex') {
+ decl.cloneBefore({
+ prop: 'flex',
+ value: 'unset',
+ });
+ decl.cloneBefore({
+ prop: 'max-width',
+ value: 'unset',
+ });
+ decl.cloneBefore({
+ prop: 'width',
+ value: 'unset',
+ });
+ if (gridDirection === 'rtl') {
+ newBlock(decl, ':nth-child(1n + 1)', ['margin-left'], [0]);
+ newBlock(decl, ':nth-child(1n)', ['margin-left'], [0]);
+ newBlock(decl, ':last-child', ['margin-left'], [0]);
+ } else {
+ newBlock(decl, ':nth-child(1n + 1)', ['margin-right'], [0]);
+ newBlock(decl, ':nth-child(1n)', ['margin-right'], [0]);
+ newBlock(decl, ':last-child', ['margin-right'], [0]);
+ }
  } else {
- newBlock(
- decl,
- ':nth-child(1n + 1)',
- ['float', 'clear', 'margin-right', 'width'],
- ['none', 'none', 0, 'auto']
- );
-
- newBlock(
- decl,
- ':nth-child(1n)',
- ['float', 'clear', 'margin-right', 'width'],
- ['none', 'none', 0, 'auto']
- );
-
- newBlock(
- decl,
- ':last-child',
- ['float', 'clear', 'margin-right', 'width'],
- ['none', 'none', 0, 'auto']
- );
+ decl.cloneBefore({
+ prop: 'width',
+ value: 'auto',
+ });
+
+ if (gridDirection === 'rtl') {
+ newBlock(
+ decl,
+ ':nth-child(1n + 1)',
+ ['float', 'clear', 'margin-left', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+
+ newBlock(
+ decl,
+ ':nth-child(1n)',
+ ['float', 'clear', 'margin-left', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+
+ newBlock(
+ decl,
+ ':last-child',
+ ['float', 'clear', 'margin-left', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+ } else {
+ newBlock(
+ decl,
+ ':nth-child(1n + 1)',
+ ['float', 'clear', 'margin-right', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+
+ newBlock(
+ decl,
+ ':nth-child(1n)',
+ ['float', 'clear', 'margin-right', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+
+ newBlock(
+ decl,
+ ':last-child',
+ ['float', 'clear', 'margin-right', 'width'],
+ ['none', 'none', 0, 'auto']
+ );
+ }
  }
  }