Merge pull request #439 from peterramsing/424-lost-reset-flex

Fixes bug where flexed column doesn't reset
peterramsing · Nov 4, 2020 · 07321c2 · 07321c2
2 parents 9f27371 + f2501c8
commit 07321c2
Show file tree

Hide file tree

Showing 2 changed files with 202 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']
+          );
+        }
       }
     }
 

diff --git a/test/lost-column.js b/test/lost-column.js
@@ -18,6 +18,126 @@ describe('lost-column', () => {
         "lost-column-flexbox: property 'flexible' is unknown."
       );
     });
+    describe('reset', () => {
+      it('resets lost-column with global flex in LTR', () => {
+        check(
+          `
+            @lost flexbox flex;
+    
+            .grid { 
+              lost-flex-container: row; 
+            }
+    
+            .grid--alternate .right { 
+              lost-column: none; 
+            }
+          `,
+          `
+           .grid {
+             display: flex;
+             flex-flow: row wrap;
+            }
+            .grid--alternate .right {
+              flex: unset;
+              max-width: unset;
+              width: unset;
+            }
+            .grid--alternate .right:last-child {
+              margin-right: 0;
+            }
+            .grid--alternate .right:nth-child(1n) {
+              margin-right: 0;
+            }
+            .grid--alternate .right:nth-child(1n+1) {
+              margin-right: 0;
+            }
+          `
+        );
+        check(
+          `
+            .grid { 
+              lost-flex-container: row; 
+            }
+            
+            .grid--alternate .right { 
+              lost-column-flexbox: flex;
+              lost-column: none; 
+            }
+          `,
+          `
+           .grid {
+             display: flex;
+             flex-flow: row wrap;
+            }
+            .grid--alternate .right {
+              flex: unset;
+              max-width: unset;
+              width: unset;
+            }
+            .grid--alternate .right:last-child {
+              margin-right: 0;
+            }
+            .grid--alternate .right:nth-child(1n) {
+              margin-right: 0;
+            }
+            .grid--alternate .right:nth-child(1n+1) {
+              margin-right: 0;
+            }
+          `
+        );
+        throws(
+          `
+          @lost flexbox flex;
+  
+          .grid { 
+            lost-flex-container: row; 
+          }
+  
+          .grid--alternate .thing { 
+            lost-column-flexbox: flexible;
+            lost-column: none; 
+          }
+          `,
+          "lost-column-flexbox: property 'flexible' is unknown."
+        );
+      });
+      it('resets lost-column with global flex in RTL', () => {
+        check(
+          `
+            @lost flexbox flex;
+            @lost --beta-direction rtl;
+    
+            .grid { 
+              lost-flex-container: row; 
+            }
+    
+            .grid--alternate .thing { 
+              lost-column: none; 
+            }
+          `,
+          `
+           .grid {
+             display: flex;
+             flex-flow: row wrap;
+            }
+            .grid--alternate .thing {
+              flex: unset;
+              max-width: unset;
+              width: unset;
+            }
+            .grid--alternate .thing:last-child {
+              margin-left: 0;
+            }
+            .grid--alternate .thing:nth-child(1n) {
+              margin-left: 0;
+            }
+            .grid--alternate .thing:nth-child(1n+1) {
+              margin-left: 0;
+            }
+          `
+        );
+      });
+    });
   });
 
   it('provides 3 column layout', () => {