Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


NPM Package Build Status License: MIT

PostCSS plugin to fallback break- properties with page-break- alias.

'Can I use' table

/* before */
.foo {
  break-inside: avoid;
  break-after: page;

/* after */
.foo {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  break-after: page;

Available fallbacks:

break-inside: auto        =>  page-break-inside: auto
break-inside: avoid       =>  page-break-inside: avoid
break-inside: avoid-page  =>  page-break-inside: avoid
break-inside: inherit     =>  page-break-inside: inherit
break-inside: initial     =>  page-break-inside: initial
break-inside: unset       =>  page-break-inside: unset

break-before: auto        =>  page-break-before: auto;
break-before: avoid       =>  page-break-before: avoid;
break-before: avoid-page  =>  page-break-before: avoid;
break-before: page        =>  page-break-before: always;
break-before: always      =>  page-break-before: always;
break-before: left        =>  page-break-before: left;
break-before: right       =>  page-break-before: right;
break-before: recto       =>  page-break-before: recto;
break-before: verso       =>  page-break-before: verso;
break-before: inherit     =>  page-break-before: inherit;
break-before: initial     =>  page-break-before: initial;
break-before: unset       =>  page-break-before: unset;

break-after: auto         =>  page-break-after: auto;
break-after: avoid        =>  page-break-after: avoid;
break-after: avoid-page   =>  page-break-after: avoid;
break-after: page         =>  page-break-after: always;
break-after: always       =>  page-break-after: always;
break-after: left         =>  page-break-after: left;
break-after: right        =>  page-break-after: right;
break-after: recto        =>  page-break-after: recto;
break-after: verso        =>  page-break-after: verso;
break-after: inherit      =>  page-break-after: inherit;
break-after: initial      =>  page-break-after: initial;
break-after: unset        =>  page-break-after: unset;


npm install --save-dev postcss postcss-page-break


postcss([ require('postcss-page-break') ])

See PostCSS docs for examples for your environment (webpack, gulp, grunt).