From 12fa78b9ca14b5062eb4fb5c7f16c48501f27385 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 9 Sep 2021 09:29:44 -0400
Subject: [PATCH] Add column utilities (#5457)

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-Authored-By: Cody <codytooker@gmail.com>
---
 src/corePlugins.js               |  2 ++
 stubs/defaultConfig.stub.js      | 28 ++++++++++++++++++++++++++++
 tests/arbitrary-values.test.css  |  6 ++++++
 tests/arbitrary-values.test.html |  1 +
 tests/basic-usage.test.css       |  6 ++++++
 tests/basic-usage.test.html      |  1 +
 6 files changed, 44 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 566d75468f49..4f34c9cf7885 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -813,6 +813,8 @@ export let appearance = ({ addUtilities }) => {
   })
 }
 
+export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
+
 export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
   ['auto-cols', ['gridAutoColumns']],
 ])
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 8be05ea55c75..02324cb2cb5e 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -38,6 +38,34 @@ module.exports = {
       pink: colors.pink,
       rose: colors.rose,
     }),
+    columns: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      '3xs': '16rem',
+      '2xs': '18rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    },
     spacing: {
       px: '1px',
       0: '0px',
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 0a4b2ab8a18b..9f0cdc0a4898 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -181,6 +181,12 @@
   --tw-skew-y: 3px;
   transform: var(--tw-transform);
 }
+.columns-\[20\] {
+  columns: 20;
+}
+.columns-\[var\(--columns\)\] {
+  columns: var(--columns);
+}
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 5945c1dfff6f..3c55dd90406b 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -39,6 +39,7 @@
     <div class="max-h-[var(--height)]"></div>
     <div class="space-x-[20cm]"></div>
     <div class="space-x-[calc(20%-1cm)]"></div>
+    <div class="columns-[20] columns-[var(--columns)]"></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index e78a9b0a7c87..a86cfe8b2787 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -314,6 +314,12 @@
 .appearance-none {
   appearance: none;
 }
+.columns-1 {
+  columns: 1;
+}
+.columns-md {
+  columns: 28rem;
+}
 .auto-cols-min {
   grid-auto-columns: min-content;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 18e239879050..69ce7b89342a 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -61,6 +61,7 @@
     <div class="font-medium"></div>
     <div class="gap-x-2 gap-y-3 gap-4"></div>
     <div class="from-red-300 via-purple-200 to-blue-400"></div>
+    <div class="columns-1 columns-md"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
     <div class="auto-rows-max"></div>