Skip to content

Commit 744249d

Browse files
authored
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`
1 parent f2bc50a commit 744249d

File tree

3 files changed

+45
-0
lines changed

3 files changed

+45
-0
lines changed

src/corePlugins.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,41 @@ export let appearance = ({ addUtilities }) => {
813813

814814
export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
815815

816+
export let breakBefore = ({ addUtilities }) => {
817+
addUtilities({
818+
'.break-before-auto': { 'break-before': 'auto' },
819+
'.break-before-avoid': { 'break-before': 'avoid' },
820+
'.break-before-all': { 'break-before': 'all' },
821+
'.break-before-avoid-page': { 'break-before': 'avoid-page' },
822+
'.break-before-page': { 'break-before': 'page' },
823+
'.break-before-left': { 'break-before': 'left' },
824+
'.break-before-right': { 'break-before': 'right' },
825+
'.break-before-column': { 'break-before': 'column' },
826+
})
827+
}
828+
829+
export let breakInside = ({ addUtilities }) => {
830+
addUtilities({
831+
'.break-inside-auto': { 'break-inside': 'auto' },
832+
'.break-inside-avoid': { 'break-inside': 'avoid' },
833+
'.break-inside-avoid-page': { 'break-inside': 'avoid-page' },
834+
'.break-inside-avoid-column': { 'break-inside': 'avoid-column' },
835+
})
836+
}
837+
838+
export let breakAfter = ({ addUtilities }) => {
839+
addUtilities({
840+
'.break-after-auto': { 'break-after': 'auto' },
841+
'.break-after-avoid': { 'break-after': 'avoid' },
842+
'.break-after-all': { 'break-after': 'all' },
843+
'.break-after-avoid-page': { 'break-after': 'avoid-page' },
844+
'.break-after-page': { 'break-after': 'page' },
845+
'.break-after-left': { 'break-after': 'left' },
846+
'.break-after-right': { 'break-after': 'right' },
847+
'.break-after-column': { 'break-after': 'column' },
848+
})
849+
}
850+
816851
export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
817852
['auto-cols', ['gridAutoColumns']],
818853
])

tests/basic-usage.test.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,15 @@
320320
.columns-md {
321321
columns: 28rem;
322322
}
323+
.break-before-page {
324+
break-before: page;
325+
}
326+
.break-inside-avoid-column {
327+
break-inside: avoid-column;
328+
}
329+
.break-after-auto {
330+
break-after: auto;
331+
}
323332
.auto-cols-min {
324333
grid-auto-columns: min-content;
325334
}

tests/basic-usage.test.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<div class="gap-x-2 gap-y-3 gap-4"></div>
6363
<div class="from-red-300 via-purple-200 to-blue-400"></div>
6464
<div class="columns-1 columns-md"></div>
65+
<div class="break-before-page break-inside-avoid-column break-after-auto"></div>
6566
<div class="auto-cols-min"></div>
6667
<div class="grid-flow-row"></div>
6768
<div class="auto-rows-max"></div>

0 commit comments

Comments
 (0)