add caption-side utilities (#10470)

Co-authored-by: Michael Warner <[email protected]>

Author: MichaelAllenWarner

src/corePlugins.js

@@ -772,6 +772,13 @@ export let corePlugins = {
     })
   },
 
+  captionSide: ({ addUtilities }) => {
+    addUtilities({
+      '.caption-top': { 'caption-side': 'top' },
+      '.caption-bottom': { 'caption-side': 'bottom' },
+    })
+  },
+
   borderCollapse: ({ addUtilities }) => {
     addUtilities({
       '.border-collapse': { 'border-collapse': 'collapse' },

tests/basic-usage.oxide.test.css

@@ -252,6 +252,12 @@
 .table-fixed {
   table-layout: fixed;
 }
+.caption-top {
+  caption-side: top;
+}
+.caption-bottom {
+  caption-side: bottom;
+}
 .border-collapse {
   border-collapse: collapse;
 }

tests/basic-usage.test.css

@@ -252,6 +252,12 @@
 .table-fixed {
   table-layout: fixed;
 }
+.caption-top {
+  caption-side: top;
+}
+.caption-bottom {
+  caption-side: bottom;
+}
 .border-collapse {
   border-collapse: collapse;
 }

tests/basic-usage.test.js

@@ -161,6 +161,8 @@ crosscheck(({ stable, oxide }) => {
             <div class="stroke-current"></div>
             <div class="stroke-2"></div>
             <div class="table-fixed"></div>
+            <div class="caption-top"></div>
+            <div class="caption-bottom"></div>
             <div class="text-center"></div>
             <div class="indent-6 -indent-12"></div>
             <div class="text-indigo-500"></div>

tests/raw-content.oxide.test.css

@@ -179,6 +179,12 @@
 .table-fixed {
   table-layout: fixed;
 }
+.caption-top {
+  caption-side: top;
+}
+.caption-bottom {
+  caption-side: bottom;
+}
 .border-collapse {
   border-collapse: collapse;
 }

tests/raw-content.test.css

@@ -179,6 +179,12 @@
 .table-fixed {
   table-layout: fixed;
 }
+.caption-top {
+  caption-side: top;
+}
+.caption-bottom {
+  caption-side: bottom;
+}
 .border-collapse {
   border-collapse: collapse;
 }

tests/raw-content.test.js

@@ -123,6 +123,8 @@ crosscheck(({ stable, oxide }) => {
             <div class="stroke-current"></div>
             <div class="stroke-2"></div>
             <div class="table-fixed"></div>
+            <div class="caption-top"></div>
+            <div class="caption-bottom"></div>
             <div class="text-center"></div>
             <div class="text-indigo-500"></div>
             <div class="underline"></div>