From 99067a4b18b165d0c1c4908ab94f69192e328af6 Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Wed, 10 Nov 2021 23:09:48 +0000
Subject: [PATCH 1/2] Add variants for orientation media feature

---
 src/corePlugins.js           |  5 +++++
 src/lib/setupContextUtils.js |  1 +
 tests/variants.test.css      | 12 ++++++++++++
 tests/variants.test.html     |  4 ++++
 4 files changed, 22 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 5309475ce4ca..07d980ff7c8c 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -163,6 +163,11 @@ export let variantPlugins = {
       addVariant(screen, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('orientation-portrait', '@media (orientation: portrait)')
+    addVariant('orientation-landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 2701adb9a3a2..dfd3d253b7fb 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -575,6 +575,7 @@ function resolvePlugins(context, root) {
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
diff --git a/tests/variants.test.css b/tests/variants.test.css
index f1c9b0e495a3..9ba825e4c7e9 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -899,3 +899,15 @@
     }
   }
 }
+@media (orientation: portrait) {
+  .orientation-portrait\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
+@media (orientation: landscape) {
+  .orientation-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
index 8a671fe235a2..5c6cc23f5983 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -134,6 +134,10 @@
     <div class="lg:animate-spin"></div>
     <div class="hover:animate-spin"></div>
 
+    <!-- Orientation variants -->
+    <div class="orientation-portrait:bg-yellow-300"></div>
+    <div class="orientation-landscape:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>

From b69df06f9dda0c71fa23165a43785ec30775fad3 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 23 Nov 2021 14:57:25 -0500
Subject: [PATCH 2/2] Rename to portrait and landscape

---
 src/corePlugins.js           | 4 ++--
 tests/kitchen-sink.test.css  | 5 -----
 tests/kitchen-sink.test.html | 2 +-
 tests/kitchen-sink.test.js   | 1 -
 tests/variants.test.css      | 4 ++--
 tests/variants.test.html     | 4 ++--
 6 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 07d980ff7c8c..b60f66cfaa26 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -165,8 +165,8 @@ export let variantPlugins = {
   },
 
   orientationVariants: ({ addVariant }) => {
-    addVariant('orientation-portrait', '@media (orientation: portrait)')
-    addVariant('orientation-landscape', '@media (orientation: landscape)')
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
   },
 }
 
diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css
index 0ebe1f76cb76..729049b24f57 100644
--- 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
index 6a57cfe0f187..5215db2ad388 100644
--- 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
index 6fcbe0be0121..83b3e6e73653 100644
--- 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
index 9ba825e4c7e9..e1d671c29f5e 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -900,13 +900,13 @@
   }
 }
 @media (orientation: portrait) {
-  .orientation-portrait\:bg-yellow-300 {
+  .portrait\:bg-yellow-300 {
     --tw-bg-opacity: 1;
     background-color: rgb(253 224 71 / var(--tw-bg-opacity));
   }
 }
 @media (orientation: landscape) {
-  .orientation-landscape\:bg-yellow-300 {
+  .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
index 5c6cc23f5983..a6b701b71f6c 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -135,8 +135,8 @@
     <div class="hover:animate-spin"></div>
 
     <!-- Orientation variants -->
-    <div class="orientation-portrait:bg-yellow-300"></div>
-    <div class="orientation-landscape:bg-yellow-300"></div>
+    <div class="portrait:bg-yellow-300"></div>
+    <div class="landscape:bg-yellow-300"></div>
 
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>