From 744249d6319ce626a20d60c01be3db3f2ba982da Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 23 Sep 2021 14:31:23 -0400
Subject: [PATCH] Add `break-before`, `break-inside` and `break-after`
 utilities (#5530)

* Add `break-before` utilities

* Add `break-inside` utilities

* Add `break-after` utilities

* Add `break-before/inside/after` utilities to basic usage test

* Remove `break-before` and `break-after` utilities that have no browser support

* Rename `break-inside: avoid-column` utility to `break-inside-avoid-column`
---
 src/corePlugins.js          | 35 +++++++++++++++++++++++++++++++++++
 tests/basic-usage.test.css  |  9 +++++++++
 tests/basic-usage.test.html |  1 +
 3 files changed, 45 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 80a610ab2..e6026ddaf 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -813,6 +813,41 @@ export let appearance = ({ addUtilities }) => {
 
 export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
 
+export let breakBefore = ({ addUtilities }) => {
+  addUtilities({
+    '.break-before-auto': { 'break-before': 'auto' },
+    '.break-before-avoid': { 'break-before': 'avoid' },
+    '.break-before-all': { 'break-before': 'all' },
+    '.break-before-avoid-page': { 'break-before': 'avoid-page' },
+    '.break-before-page': { 'break-before': 'page' },
+    '.break-before-left': { 'break-before': 'left' },
+    '.break-before-right': { 'break-before': 'right' },
+    '.break-before-column': { 'break-before': 'column' },
+  })
+}
+
+export let breakInside = ({ addUtilities }) => {
+  addUtilities({
+    '.break-inside-auto': { 'break-inside': 'auto' },
+    '.break-inside-avoid': { 'break-inside': 'avoid' },
+    '.break-inside-avoid-page': { 'break-inside': 'avoid-page' },
+    '.break-inside-avoid-column': { 'break-inside': 'avoid-column' },
+  })
+}
+
+export let breakAfter = ({ addUtilities }) => {
+  addUtilities({
+    '.break-after-auto': { 'break-after': 'auto' },
+    '.break-after-avoid': { 'break-after': 'avoid' },
+    '.break-after-all': { 'break-after': 'all' },
+    '.break-after-avoid-page': { 'break-after': 'avoid-page' },
+    '.break-after-page': { 'break-after': 'page' },
+    '.break-after-left': { 'break-after': 'left' },
+    '.break-after-right': { 'break-after': 'right' },
+    '.break-after-column': { 'break-after': 'column' },
+  })
+}
+
 export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
   ['auto-cols', ['gridAutoColumns']],
 ])
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 86f5da88a..00bb9e411 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -320,6 +320,15 @@
 .columns-md {
   columns: 28rem;
 }
+.break-before-page  {
+  break-before: page;
+}
+.break-inside-avoid-column  {
+  break-inside: avoid-column;
+}
+.break-after-auto {
+  break-after: auto;
+}
 .auto-cols-min {
   grid-auto-columns: min-content;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 539fc1a51..01103fc3b 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -62,6 +62,7 @@
     <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="break-before-page break-inside-avoid-column break-after-auto"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
     <div class="auto-rows-max"></div>