Merge pull request #632 from ChrisEbert/feature/add-break-utilities

added break- utilities
ben-rogerson · Mar 23, 2022 · e3ebc5d · e3ebc5d
2 parents 14ee2df + 60a11d0
commit e3ebc5d
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 40 deletions.
diff --git a/__fixtures__/utilitiesLayout/breakAfter.js b/__fixtures__/utilitiesLayout/breakAfter.js
@@ -1,11 +1,11 @@
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-after
-// tw`break-after-auto`
-// tw`break-after-avoid`
-// tw`break-after-all`
-// tw`break-after-avoid-page`
-// tw`break-after-page`
-// tw`break-after-left`
-// tw`break-after-right`
-// tw`break-after-column`
+tw`break-after-auto`
+tw`break-after-avoid`
+tw`break-after-all`
+tw`break-after-avoid-page`
+tw`break-after-page`
+tw`break-after-left`
+tw`break-after-right`
+tw`break-after-column`
diff --git a/__fixtures__/utilitiesLayout/breakBefore.js b/__fixtures__/utilitiesLayout/breakBefore.js
@@ -1,11 +1,11 @@
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-before
-// tw`break-before-auto`
-// tw`break-before-avoid`
-// tw`break-before-all`
-// tw`break-before-avoid-page`
-// tw`break-before-page`
-// tw`break-before-left`
-// tw`break-before-right`
-// tw`break-before-column`
+tw`break-before-auto`
+tw`break-before-avoid`
+tw`break-before-all`
+tw`break-before-avoid-page`
+tw`break-before-page`
+tw`break-before-left`
+tw`break-before-right`
+tw`break-before-column`
diff --git a/__fixtures__/utilitiesLayout/breakInside.js b/__fixtures__/utilitiesLayout/breakInside.js
@@ -1,7 +1,7 @@
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-inside
-// tw`break-inside-auto`
-// tw`break-inside-avoid`
-// tw`break-inside-avoid-page`
-// tw`break-inside-avoid-column`
+tw`break-inside-auto`
+tw`break-inside-avoid`
+tw`break-inside-avoid-page`
+tw`break-inside-avoid-column`
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -17070,17 +17070,42 @@ exports[`twin.macro breakAfter.js: breakAfter.js 1`] = `
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-after
-// tw\`break-after-auto\`
-// tw\`break-after-avoid\`
-// tw\`break-after-all\`
-// tw\`break-after-avoid-page\`
-// tw\`break-after-page\`
-// tw\`break-after-left\`
-// tw\`break-after-right\`
-// tw\`break-after-column\`
+tw\`break-after-auto\`
+tw\`break-after-avoid\`
+tw\`break-after-all\`
+tw\`break-after-avoid-page\`
+tw\`break-after-page\`
+tw\`break-after-left\`
+tw\`break-after-right\`
+tw\`break-after-column\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
+// https://tailwindcss.com/docs/break-after
+;({
+  breakAfter: 'auto',
+})
+;({
+  breakAfter: 'avoid',
+})
+;({
+  breakAfter: 'all',
+})
+;({
+  breakAfter: 'avoid-page',
+})
+;({
+  breakAfter: 'page',
+})
+;({
+  breakAfter: 'left',
+})
+;({
+  breakAfter: 'right',
+})
+;({
+  breakAfter: 'column',
+})
 
 
 `;
@@ -17090,17 +17115,42 @@ exports[`twin.macro breakBefore.js: breakBefore.js 1`] = `
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-before
-// tw\`break-before-auto\`
-// tw\`break-before-avoid\`
-// tw\`break-before-all\`
-// tw\`break-before-avoid-page\`
-// tw\`break-before-page\`
-// tw\`break-before-left\`
-// tw\`break-before-right\`
-// tw\`break-before-column\`
+tw\`break-before-auto\`
+tw\`break-before-avoid\`
+tw\`break-before-all\`
+tw\`break-before-avoid-page\`
+tw\`break-before-page\`
+tw\`break-before-left\`
+tw\`break-before-right\`
+tw\`break-before-column\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
+// https://tailwindcss.com/docs/break-before
+;({
+  breakBefore: 'auto',
+})
+;({
+  breakBefore: 'avoid',
+})
+;({
+  breakBefore: 'all',
+})
+;({
+  breakBefore: 'avoid-page',
+})
+;({
+  breakBefore: 'page',
+})
+;({
+  breakBefore: 'left',
+})
+;({
+  breakBefore: 'right',
+})
+;({
+  breakBefore: 'column',
+})
 
 
 `;
@@ -17110,13 +17160,26 @@ exports[`twin.macro breakInside.js: breakInside.js 1`] = `
 import tw from './macro'
 
 // https://tailwindcss.com/docs/break-inside
-// tw\`break-inside-auto\`
-// tw\`break-inside-avoid\`
-// tw\`break-inside-avoid-page\`
-// tw\`break-inside-avoid-column\`
+tw\`break-inside-auto\`
+tw\`break-inside-avoid\`
+tw\`break-inside-avoid-page\`
+tw\`break-inside-avoid-column\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
+// https://tailwindcss.com/docs/break-inside
+;({
+  breakInside: 'auto',
+})
+;({
+  breakInside: 'avoid',
+})
+;({
+  breakInside: 'avoid-page',
+})
+;({
+  breakInside: 'avoid-column',
+})
 
 
 `;

diff --git a/src/config/staticStyles.js b/src/config/staticStyles.js
@@ -20,6 +20,32 @@ export default {
   // https://tailwindcss.com/docs/container
   // See dynamicStyles.js
 
+  // https://tailwindcss.com/docs/break-after
+  'break-after-auto': { output: { breakAfter: 'auto' } },
+  'break-after-avoid': { output: { breakAfter: 'avoid' } },
+  'break-after-all': { output: { breakAfter: 'all' } },
+  'break-after-avoid-page': { output: { breakAfter: 'avoid-page' } },
+  'break-after-page': { output: { breakAfter: 'page' } },
+  'break-after-left': { output: { breakAfter: 'left' } },
+  'break-after-right': { output: { breakAfter: 'right' } },
+  'break-after-column': { output: { breakAfter: 'column' } },
+
+  // https://tailwindcss.com/docs/break-before
+  'break-before-auto': { output: { breakBefore: 'auto' } },
+  'break-before-avoid': { output: { breakBefore: 'avoid' } },
+  'break-before-all': { output: { breakBefore: 'all' } },
+  'break-before-avoid-page': { output: { breakBefore: 'avoid-page' } },
+  'break-before-page': { output: { breakBefore: 'page' } },
+  'break-before-left': { output: { breakBefore: 'left' } },
+  'break-before-right': { output: { breakBefore: 'right' } },
+  'break-before-column': { output: { breakBefore: 'column' } },
+
+  // https://tailwindcss.com/docs/break-inside
+  'break-inside-auto': { output: { breakInside: 'auto' } },
+  'break-inside-avoid': { output: { breakInside: 'avoid' } },
+  'break-inside-avoid-page': { output: { breakInside: 'avoid-page' } },
+  'break-inside-avoid-column': { output: { breakInside: 'avoid-column' } },
+
   // https://tailwindcss.com/docs/box-decoration-break
   'decoration-slice': { output: { boxDecorationBreak: 'slice' } },
   'decoration-clone': { output: { boxDecorationBreak: 'clone' } },