Add grid-auto-flow utilities

adamwathan · adamwathan · commit a14e53ef7ddb · 2019-12-30T08:23:12.000-05:00
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -8461,6 +8461,22 @@ video {
   gap: 1px !important;
 }
 
+.grid-flow-row {
+  grid-auto-flow: row !important;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column !important;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense !important;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense !important;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 }
@@ -18046,6 +18062,22 @@ video {
     gap: 1px !important;
   }
 
+  .sm\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .sm\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .sm\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -27632,6 +27664,22 @@ video {
     gap: 1px !important;
   }
 
+  .md\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .md\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .md\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -37218,6 +37266,22 @@ video {
     gap: 1px !important;
   }
 
+  .lg\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .lg\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .lg\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .lg\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -46804,6 +46868,22 @@ video {
     gap: 1px !important;
   }
 
+  .xl\:grid-flow-row {
+    grid-auto-flow: row !important;
+  }
+
+  .xl\:grid-flow-col {
+    grid-auto-flow: column !important;
+  }
+
+  .xl\:grid-flow-row-dense {
+    grid-auto-flow: row dense !important;
+  }
+
+  .xl\:grid-flow-col-dense {
+    grid-auto-flow: column dense !important;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -8461,6 +8461,22 @@ video {
   gap: 1px;
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -18046,6 +18062,22 @@ video {
     gap: 1px;
   }
 
+  .sm\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .sm\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .sm\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -27632,6 +27664,22 @@ video {
     gap: 1px;
   }
 
+  .md\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .md\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .md\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -37218,6 +37266,22 @@ video {
     gap: 1px;
   }
 
+  .lg\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .lg\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .lg\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .lg\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -46804,6 +46868,22 @@ video {
     gap: 1px;
   }
 
+  .xl\:grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  .xl\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .xl\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
+  .xl\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
   .xl\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -74,6 +74,7 @@ import translate from './plugins/translate'
 import gap from './plugins/gap'
 import columnGap from './plugins/columnGap'
 import rowGap from './plugins/rowGap'
+import gridAutoFlow from './plugins/gridAutoFlow'
 import gridTemplateColumns from './plugins/gridTemplateColumns'
 import gridColumn from './plugins/gridColumn'
 import gridColumnStart from './plugins/gridColumnStart'
@@ -158,6 +159,7 @@ export default function({ corePlugins: corePluginConfig }) {
     gap,
     columnGap,
     rowGap,
+    gridAutoFlow,
     gridTemplateColumns,
     gridColumn,
     gridColumnStart,
diff --git a/src/plugins/gridAutoFlow.js b/src/plugins/gridAutoFlow.js
@@ -0,0 +1,13 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.grid-flow-row': { gridAutoFlow: 'row' },
+        '.grid-flow-col': { gridAutoFlow: 'column' },
+        '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
+        '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
+      },
+      variants('gridAutoFlow')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -585,6 +585,7 @@ module.exports = {
     gap: ['responsive'],
     columnGap: ['responsive'],
     rowGap: ['responsive'],
+    gridAutoFlow: ['responsive'],
     gridTemplateColumns: ['responsive'],
     gridColumn: ['responsive'],
     gridColumnStart: ['responsive'],
