Add background-origin utilities (#4117)

* Add background-origin utilities

* Update fixtures

* Update basic usage test

* Change sort order for background origin

* Move background origin after other background properties

__tests__/fixtures/tailwind-output-flagged.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -7862,6 +7862,18 @@ video {
   background-size: contain;
 }
 
+.bg-origin-border {
+  background-origin: border-box;
+}
+
+.bg-origin-padding {
+  background-origin: padding-box;
+}
+
+.bg-origin-content {
+  background-origin: content-box;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -37108,6 +37120,18 @@ video {
     background-size: contain;
   }
 
+  .sm\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .sm\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .sm\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .sm\:border-collapse {
     border-collapse: collapse;
   }
@@ -66219,6 +66243,18 @@ video {
     background-size: contain;
   }
 
+  .md\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .md\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .md\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .md\:border-collapse {
     border-collapse: collapse;
   }
@@ -95330,6 +95366,18 @@ video {
     background-size: contain;
   }
 
+  .lg\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .lg\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .lg\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .lg\:border-collapse {
     border-collapse: collapse;
   }
@@ -124441,6 +124489,18 @@ video {
     background-size: contain;
   }
 
+  .xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .xl\:border-collapse {
     border-collapse: collapse;
   }
@@ -153552,6 +153612,18 @@ video {
     background-size: contain;
   }
 
+  .\32xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .\32xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .\32xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .\32xl\:border-collapse {
     border-collapse: collapse;
   }

__tests__/fixtures/tailwind-output-important.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -7862,6 +7862,18 @@ video {
   background-size: contain !important;
 }
 
+.bg-origin-border {
+  background-origin: border-box !important;
+}
+
+.bg-origin-padding {
+  background-origin: padding-box !important;
+}
+
+.bg-origin-content {
+  background-origin: content-box !important;
+}
+
 .border-collapse {
   border-collapse: collapse !important;
 }
@@ -37108,6 +37120,18 @@ video {
     background-size: contain !important;
   }
 
+  .sm\:bg-origin-border {
+    background-origin: border-box !important;
+  }
+
+  .sm\:bg-origin-padding {
+    background-origin: padding-box !important;
+  }
+
+  .sm\:bg-origin-content {
+    background-origin: content-box !important;
+  }
+
   .sm\:border-collapse {
     border-collapse: collapse !important;
   }
@@ -66219,6 +66243,18 @@ video {
     background-size: contain !important;
   }
 
+  .md\:bg-origin-border {
+    background-origin: border-box !important;
+  }
+
+  .md\:bg-origin-padding {
+    background-origin: padding-box !important;
+  }
+
+  .md\:bg-origin-content {
+    background-origin: content-box !important;
+  }
+
   .md\:border-collapse {
     border-collapse: collapse !important;
   }
@@ -95330,6 +95366,18 @@ video {
     background-size: contain !important;
   }
 
+  .lg\:bg-origin-border {
+    background-origin: border-box !important;
+  }
+
+  .lg\:bg-origin-padding {
+    background-origin: padding-box !important;
+  }
+
+  .lg\:bg-origin-content {
+    background-origin: content-box !important;
+  }
+
   .lg\:border-collapse {
     border-collapse: collapse !important;
   }
@@ -124441,6 +124489,18 @@ video {
     background-size: contain !important;
   }
 
+  .xl\:bg-origin-border {
+    background-origin: border-box !important;
+  }
+
+  .xl\:bg-origin-padding {
+    background-origin: padding-box !important;
+  }
+
+  .xl\:bg-origin-content {
+    background-origin: content-box !important;
+  }
+
   .xl\:border-collapse {
     border-collapse: collapse !important;
   }
@@ -153552,6 +153612,18 @@ video {
     background-size: contain !important;
   }
 
+  .\32xl\:bg-origin-border {
+    background-origin: border-box !important;
+  }
+
+  .\32xl\:bg-origin-padding {
+    background-origin: padding-box !important;
+  }
+
+  .\32xl\:bg-origin-content {
+    background-origin: content-box !important;
+  }
+
   .\32xl\:border-collapse {
     border-collapse: collapse !important;
   }

__tests__/fixtures/tailwind-output-no-color-opacity.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -7010,6 +7010,18 @@ video {
   background-size: contain;
 }
 
+.bg-origin-border {
+  background-origin: border-box;
+}
+
+.bg-origin-padding {
+  background-origin: padding-box;
+}
+
+.bg-origin-content {
+  background-origin: content-box;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -33700,6 +33712,18 @@ video {
     background-size: contain;
   }
 
+  .sm\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .sm\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .sm\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .sm\:border-collapse {
     border-collapse: collapse;
   }
@@ -60255,6 +60279,18 @@ video {
     background-size: contain;
   }
 
+  .md\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .md\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .md\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .md\:border-collapse {
     border-collapse: collapse;
   }
@@ -86810,6 +86846,18 @@ video {
     background-size: contain;
   }
 
+  .lg\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .lg\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .lg\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .lg\:border-collapse {
     border-collapse: collapse;
   }
@@ -113365,6 +113413,18 @@ video {
     background-size: contain;
   }
 
+  .xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .xl\:border-collapse {
     border-collapse: collapse;
   }
@@ -139920,6 +139980,18 @@ video {
     background-size: contain;
   }
 
+  .\32xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .\32xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .\32xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .\32xl\:border-collapse {
     border-collapse: collapse;
   }

__tests__/fixtures/tailwind-output.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -7862,6 +7862,18 @@ video {
   background-size: contain;
 }
 
+.bg-origin-border {
+  background-origin: border-box;
+}
+
+.bg-origin-padding {
+  background-origin: padding-box;
+}
+
+.bg-origin-content {
+  background-origin: content-box;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -37108,6 +37120,18 @@ video {
     background-size: contain;
   }
 
+  .sm\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .sm\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .sm\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .sm\:border-collapse {
     border-collapse: collapse;
   }
@@ -66219,6 +66243,18 @@ video {
     background-size: contain;
   }
 
+  .md\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .md\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .md\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .md\:border-collapse {
     border-collapse: collapse;
   }
@@ -95330,6 +95366,18 @@ video {
     background-size: contain;
   }
 
+  .lg\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .lg\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .lg\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .lg\:border-collapse {
     border-collapse: collapse;
   }
@@ -124441,6 +124489,18 @@ video {
     background-size: contain;
   }
 
+  .xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .xl\:border-collapse {
     border-collapse: collapse;
   }
@@ -153552,6 +153612,18 @@ video {
     background-size: contain;
   }
 
+  .\32xl\:bg-origin-border {
+    background-origin: border-box;
+  }
+
+  .\32xl\:bg-origin-padding {
+    background-origin: padding-box;
+  }
+
+  .\32xl\:bg-origin-content {
+    background-origin: content-box;
+  }
+
   .\32xl\:border-collapse {
     border-collapse: collapse;
   }

jit/corePlugins/backgroundOrigin.js

@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/backgroundOrigin').default()

jit/corePlugins/index.js

@@ -254,6 +254,7 @@ module.exports = {
   backgroundClip: require('./backgroundClip'),
   backgroundPosition: require('./backgroundPosition'),
   backgroundRepeat: require('./backgroundRepeat'),
+  backgroundOrigin: require('./backgroundOrigin'),
 
   fill: require('./fill'),
   stroke: require('./stroke'),

jit/tests/basic-usage.test.css

@@ -456,6 +456,15 @@
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
+.bg-origin-border {
+  background-origin: border-box;
+}
+.bg-origin-padding {
+  background-origin: padding-box;
+}
+.bg-origin-content {
+  background-origin: content-box;
+}
 .fill-current {
   fill: currentColor;
 }

jit/tests/basic-usage.test.html

@@ -23,6 +23,7 @@
     <div class="bg-top"></div>
     <div class="bg-no-repeat"></div>
     <div class="bg-cover"></div>
+    <div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
     <div class="border-collapse"></div>
     <div class="border-black"></div>
     <div class="border-opacity-10"></div>

src/corePluginList.js

@@ -17,6 +17,7 @@ export const corePluginList = [
   'backgroundPosition',
   'backgroundRepeat',
   'backgroundSize',
+  'backgroundOrigin',
   'borderCollapse',
   'borderColor',
   'borderOpacity',

src/plugins/backgroundOrigin.js

@@ -0,0 +1,12 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.bg-origin-border': { 'background-origin': 'border-box' },
+        '.bg-origin-padding': { 'background-origin': 'padding-box' },
+        '.bg-origin-content': { 'background-origin': 'content-box' },
+      },
+      variants('backgroundOrigin')
+    )
+  }
+}

src/plugins/index.js

@@ -23,6 +23,7 @@ export { default as backgroundOpacity } from './backgroundOpacity'
 export { default as backgroundPosition } from './backgroundPosition'
 export { default as backgroundRepeat } from './backgroundRepeat'
 export { default as backgroundSize } from './backgroundSize'
+export { default as backgroundOrigin } from './backgroundOrigin'
 export { default as blur } from './blur'
 export { default as borderCollapse } from './borderCollapse'
 export { default as borderColor } from './borderColor'

stubs/defaultConfig.stub.js

@@ -842,6 +842,7 @@ module.exports = {
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
+    backgroundOrigin: ['responsive'],
     blur: ['responsive'],
     borderCollapse: ['responsive'],
     borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],