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`
This commit is contained in:
Jonathan Reinink 2021-09-23 14:31:23 -04:00 • committed by GitHub
parent f2bc50accf
commit 744249d631
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 0 deletions

View file

@ -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']],
])