Add variants for orientation media feature (tailwindlabs#6046)

lukewarlow · adamwathan · web-flow · commit a321e3c84366 · 2021-11-23T14:59:25.000-05:00
* Add variants for orientation media feature

* Rename to portrait and landscape

Co-authored-by: Adam Wathan &lt;adam.wathan@gmail.com&gt;
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -165,6 +165,11 @@ export let variantPlugins = {
       addVariant(screen.name, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -518,6 +518,7 @@ function resolvePlugins(context, root) {
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css
@@ -509,11 +509,6 @@ div {
     }
   }
 }
-@media (orientation: portrait) {
-  .portrait\:text-center {
-    text-align: center;
-  }
-}
 @media (min-width: 1280px) and (max-width: 1535px) {
   .range\:text-right {
     text-align: right;
diff --git a/tests/kitchen-sink.test.html b/tests/kitchen-sink.test.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
   <body>
-    <div class="portrait:text-center range:text-right multi:text-left"></div>
+    <div class="range:text-right multi:text-left"></div>
     <div
       class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
     ></div>
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -11,7 +11,6 @@ test('it works', () => {
     theme: {
       extend: {
         screens: {
-          portrait: { raw: '(orientation: portrait)' },
           range: { min: '1280px', max: '1535px' },
           multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
         },
diff --git a/tests/variants.test.css b/tests/variants.test.css
@@ -906,3 +906,15 @@
     }
   }
 }
+@media (orientation: portrait) {
+  .portrait\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
+@media (orientation: landscape) {
+  .landscape\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
diff --git a/tests/variants.test.html b/tests/variants.test.html
@@ -135,6 +135,10 @@
     <div class="lg:animate-spin"></div>
     <div class="hover:animate-spin"></div>
 
+    <!-- Orientation variants -->
+    <div class="portrait:bg-yellow-300"></div>
+    <div class="landscape:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>

Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,11 @@ export let variantPlugins = {`
`165`	`165`	addVariant(screen.name, `@media ${query}`)
`166`	`166`	`}`
`167`	`167`	`},`
	`168`	`+`
	`169`	`+ orientationVariants: ({ addVariant }) => {`
	`170`	`+ addVariant('portrait', '@media (orientation: portrait)')`
	`171`	`+ addVariant('landscape', '@media (orientation: landscape)')`
	`172`	`+ },`
`168`	`173`	`}`
`169`	`174`
`170`	`175`	`export let corePlugins = {`
Original file line number	Diff line number	Diff line change
`@@ -518,6 +518,7 @@ function resolvePlugins(context, root) {`
`518`	`518`	`variantPlugins['darkVariants'],`
`519`	`519`	`variantPlugins['printVariant'],`
`520`	`520`	`variantPlugins['screenVariants'],`
	`521`	`+ variantPlugins['orientationVariants'],`
`521`	`522`	`]`
`522`	`523`
`523`	`524`	`return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]`
Original file line number	Diff line number	Diff line change
`@@ -509,11 +509,6 @@ div {`
`509`	`509`	`}`
`510`	`510`	`}`
`511`	`511`	`}`
`512`		`-@media (orientation: portrait) {`
`513`		`- .portrait\:text-center {`
`514`		`- text-align: center;`
`515`		`- }`
`516`		`-}`
`517`	`512`	`@media (min-width: 1280px) and (max-width: 1535px) {`
`518`	`513`	`.range\:text-right {`
`519`	`514`	`text-align: right;`
Original file line number	Diff line number	Diff line change
`@@ -906,3 +906,15 @@`
`906`	`906`	`}`
`907`	`907`	`}`
`908`	`908`	`}`
	`909`	`+@media (orientation: portrait) {`
	`910`	`+ .portrait\:bg-yellow-300 {`
	`911`	`+ --tw-bg-opacity: 1;`
	`912`	`+ background-color: rgb(253 224 71 / var(--tw-bg-opacity));`
	`913`	`+ }`
	`914`	`+}`
	`915`	`+@media (orientation: landscape) {`
	`916`	`+ .landscape\:bg-yellow-300 {`
	`917`	`+ --tw-bg-opacity: 1;`
	`918`	`+ background-color: rgb(253 224 71 / var(--tw-bg-opacity));`
	`919`	`+ }`
	`920`	`+}`