Add support for visibility: collapse with new collapsed utility (tailwindlabs#9181)

brandonmcconnell · thecrypticace · web-flow · commit cc1be47a4fa2 · 2022-09-09T13:19:24.000-04:00
* Add support for `visibility: collapse` with new `collapsed` utility

* fixup

* Update changelog

Co-authored-by: Jordan Pittman &lt;jordan@cryptica.me&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
 - Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
 - Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
+- Add new `collapse` utility for `visibility: collapse` ([#9181](https://github.com/tailwindlabs/tailwindcss/pull/9181))
 
 ### Fixed
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -397,6 +397,7 @@ export let corePlugins = {
     addUtilities({
       '.visible': { visibility: 'visible' },
       '.invisible': { visibility: 'hidden' },
+      '.collapse': { visibility: 'collapse' },
     })
   },
 
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -137,6 +137,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
@@ -183,6 +183,7 @@
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>
+    <div class="collapse"></div>
     <div class="whitespace-nowrap"></div>
     <div class="w-12"></div>
     <div class="break-words"></div>
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
@@ -43,6 +43,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }
diff --git a/tests/raw-content.test.html b/tests/raw-content.test.html
@@ -139,6 +139,7 @@
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>
+    <div class="collapse"></div>
     <div class="whitespace-nowrap"></div>
     <div class="w-12"></div>
     <div class="break-words"></div>

Original file line number	Diff line number	Diff line change
`@@ -137,6 +137,9 @@`
`137`	`137`	`.invisible {`
`138`	`138`	`visibility: hidden;`
`139`	`139`	`}`
	`140`	`+.collapse {`
	`141`	`+ visibility: collapse;`
	`142`	`+}`
`140`	`143`	`.absolute {`
`141`	`144`	`position: absolute;`
`142`	`145`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,9 @@`
`43`	`43`	`.invisible {`
`44`	`44`	`visibility: hidden;`
`45`	`45`	`}`
	`46`	`+.collapse {`
	`47`	`+ visibility: collapse;`
	`48`	`+}`
`46`	`49`	`.absolute {`
`47`	`50`	`position: absolute;`
`48`	`51`	`}`