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
tailwindlabs · Apr 23, 2021 · 4114c0b · 4114c0b
1 parent 2e01cd8
commit 4114c0b
Show file tree

Hide file tree

Showing 12 changed files with 319 additions and 4 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__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;
   }

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__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;
   }

diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__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;
   }