From 1d80b0436ca024695f9ebe42fdf58feb1f6ed909 Mon Sep 17 00:00:00 2001
From: Brice Maron <brice@bmaron.net>
Date: Thu, 8 Sep 2022 08:24:17 +0200
Subject: [PATCH] chore: remove deprecations following tailwind update

---
 UI/Base/SubtleButton.ts        |   2 +-
 UI/BigComponents/MoreScreen.ts |   2 +-
 css/index-tailwind-output.css  | 463 ++++++++++++++++++++-------------
 index.css                      |  72 +++--
 tailwind.config.js             |  50 ++--
 5 files changed, 340 insertions(+), 249 deletions(-)

diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts
index ccc09b156..87206e13f 100644
--- a/UI/Base/SubtleButton.ts
+++ b/UI/Base/SubtleButton.ts
@@ -29,7 +29,7 @@ export class SubtleButton extends UIElement {
 
     protected InnerRender(): string | BaseUIElement {
         const classes = "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline";
-        const message = Translations.W(this.message)?.SetClass("block overflow-ellipsis no-images flex-shrink");
+        const message = Translations.W(this.message)?.SetClass("block text-ellipsis no-images flex-shrink");
         let img;
         const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11")
         if ((this.imageUrl ?? "") === "") {
diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts
index dcb8a45de..cc32e738a 100644
--- a/UI/BigComponents/MoreScreen.ts
+++ b/UI/BigComponents/MoreScreen.ts
@@ -42,7 +42,7 @@ export default class MoreScreen extends Combine {
         let themeButtonStyle = ""
         let themeListStyle = ""
         if (onMainScreen) {
-            themeButtonStyle = "h-32 min-h-32 max-h-32 overflow-ellipsis overflow-hidden"
+            themeButtonStyle = "h-32 min-h-32 max-h-32 text-ellipsis overflow-hidden"
             themeListStyle = "md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-g4 gap-4"
         }
 
diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css
index 0e5063b79..7efd1c66b 100644
--- a/css/index-tailwind-output.css
+++ b/css/index-tailwind-output.css
@@ -562,58 +562,34 @@ video {
   width: 100%;
 }
 
-.\!container {
-  width: 100% !important;
-}
-
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
   }
-
-  .\!container {
-    max-width: 640px !important;
-  }
 }
 
 @media (min-width: 768px) {
   .container {
     max-width: 768px;
   }
-
-  .\!container {
-    max-width: 768px !important;
-  }
 }
 
 @media (min-width: 1024px) {
   .container {
     max-width: 1024px;
   }
-
-  .\!container {
-    max-width: 1024px !important;
-  }
 }
 
 @media (min-width: 1280px) {
   .container {
     max-width: 1280px;
   }
-
-  .\!container {
-    max-width: 1280px !important;
-  }
 }
 
 @media (min-width: 1536px) {
   .container {
     max-width: 1536px;
   }
-
-  .\!container {
-    max-width: 1536px !important;
-  }
 }
 
 .pointer-events-none {
@@ -644,10 +620,6 @@ video {
   position: absolute;
 }
 
-.\!absolute {
-  position: absolute !important;
-}
-
 .relative {
   position: relative;
 }
@@ -748,10 +720,6 @@ video {
   float: left;
 }
 
-.float-none {
-  float: none;
-}
-
 .m-8 {
   margin: 2rem;
 }
@@ -760,6 +728,14 @@ video {
   margin: 0.25rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
+.m-auto {
+  margin: auto;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -776,10 +752,6 @@ video {
   margin: 0.125rem;
 }
 
-.m-0 {
-  margin: 0px;
-}
-
 .m-3 {
   margin: 0.75rem;
 }
@@ -792,6 +764,21 @@ video {
   margin: 1px;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -807,6 +794,26 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -835,10 +842,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -855,26 +858,14 @@ video {
   margin-bottom: 6rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .ml-12 {
   margin-left: 3rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -951,38 +942,6 @@ video {
   display: table;
 }
 
-.table-caption {
-  display: table-caption;
-}
-
-.table-cell {
-  display: table-cell;
-}
-
-.table-column {
-  display: table-column;
-}
-
-.table-column-group {
-  display: table-column-group;
-}
-
-.table-footer-group {
-  display: table-footer-group;
-}
-
-.table-header-group {
-  display: table-header-group;
-}
-
-.table-row-group {
-  display: table-row-group;
-}
-
-.table-row {
-  display: table-row;
-}
-
 .grid {
   display: grid;
 }
@@ -991,10 +950,6 @@ video {
   display: contents;
 }
 
-.list-item {
-  display: list-item;
-}
-
 .hidden {
   display: none;
 }
@@ -1012,6 +967,22 @@ video {
   height: min-content;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
 .h-64 {
   height: 16rem;
 }
@@ -1020,18 +991,10 @@ video {
   height: 2.5rem;
 }
 
-.h-12 {
-  height: 3rem;
-}
-
 .h-8 {
   height: 2rem;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .h-1\/2 {
   height: 50%;
 }
@@ -1056,10 +1019,6 @@ video {
   height: 24rem;
 }
 
-.h-16 {
-  height: 4rem;
-}
-
 .h-0 {
   height: 0px;
 }
@@ -1072,6 +1031,10 @@ video {
   height: 12rem;
 }
 
+.max-h-4 {
+  max-height: 1rem;
+}
+
 .max-h-7 {
   max-height: 1.75rem;
 }
@@ -1084,18 +1047,34 @@ video {
   max-height: 8rem;
 }
 
-.max-h-4 {
-  max-height: 1rem;
-}
-
 .max-h-8 {
   max-height: 2rem;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1112,22 +1091,10 @@ video {
   width: 2.5rem;
 }
 
-.w-12 {
-  width: 3rem;
-}
-
 .w-8 {
   width: 2rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
-.w-0 {
-  width: 0px;
-}
-
 .w-screen {
   width: 100vw;
 }
@@ -1163,6 +1130,10 @@ video {
   min-width: min-content;
 }
 
+.max-w-screen-md {
+  max-width: 768px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1187,10 +1158,6 @@ video {
   flex-shrink: 0;
 }
 
-.shrink {
-  flex-shrink: 1;
-}
-
 .flex-grow {
   flex-grow: 1;
 }
@@ -1284,6 +1251,10 @@ video {
   align-content: flex-start;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1356,7 +1327,7 @@ video {
   white-space: nowrap;
 }
 
-.overflow-ellipsis {
+.text-ellipsis {
   text-overflow: ellipsis;
 }
 
@@ -1381,22 +1352,22 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-3xl {
-  border-radius: 1.5rem;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -1434,6 +1405,15 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
@@ -1478,6 +1458,15 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1493,11 +1482,6 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1523,18 +1507,14 @@ video {
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
+.object-cover {
+  object-fit: cover;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1543,10 +1523,33 @@ video {
   padding: 0px;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-0\.5 {
   padding: 0.125rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1557,6 +1560,18 @@ video {
   padding-right: 1rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1609,10 +1624,6 @@ video {
   padding-right: 0.75rem;
 }
 
-.pr-4 {
-  padding-right: 1rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1650,6 +1661,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1665,11 +1681,6 @@ video {
   line-height: 2.5rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1680,6 +1691,18 @@ video {
   line-height: 1.5rem;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1688,10 +1711,6 @@ video {
   font-weight: 800;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -1713,16 +1732,16 @@ video {
   letter-spacing: -0.025em;
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -1733,6 +1752,11 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1748,16 +1772,12 @@ video {
           text-decoration-line: line-through;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-0 {
   opacity: 0;
 }
 
-.opacity-40 {
-  opacity: 0.4;
+.opacity-50 {
+  opacity: 0.5;
 }
 
 .shadow {
@@ -1766,6 +1786,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline {
   outline-style: solid;
 }
@@ -1848,10 +1873,6 @@ video {
   transition-duration: 500ms;
 }
 
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
 .z-above-map {
   z-index: 10000;
 }
@@ -1890,7 +1911,7 @@ video {
   --alert-color: #fee4d1;
   /**
      * Base colour of interactive elements, mainly the 'subtle button'
-     * 
+     *
      */
   --subtle-detail-color: #dbeafe;
   --subtle-detail-color-contrast: black;
@@ -2591,11 +2612,31 @@ input {
   margin-left: 1.5rem;
 }
 
+.hover\:border-blue-700:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(29 78 216 / var(--tw-border-opacity));
+}
+
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -2616,12 +2657,39 @@ input {
   color: var(--unsubtle-detail-color-contrast);
 }
 
+.focus\:text-gray-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 @media (min-width: 640px) {
+  .sm\:m-0 {
+    margin: 0px;
+  }
+
+  .sm\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .sm\:mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
 
+  .sm\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .sm\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
   .sm\:mr-2 {
     margin-right: 0.5rem;
   }
@@ -2634,18 +2702,34 @@ input {
     display: flex;
   }
 
+  .sm\:h-32 {
+    height: 8rem;
+  }
+
+  .sm\:h-8 {
+    height: 2rem;
+  }
+
   .sm\:h-24 {
     height: 6rem;
   }
 
-  .sm\:w-24 {
-    width: 6rem;
-  }
-
   .sm\:w-auto {
     width: auto;
   }
 
+  .sm\:w-32 {
+    width: 8rem;
+  }
+
+  .sm\:w-8 {
+    width: 2rem;
+  }
+
+  .sm\:w-24 {
+    width: 6rem;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -2702,6 +2786,10 @@ input {
     padding-left: 0.5rem;
   }
 
+  .sm\:pt-0 {
+    padding-top: 0px;
+  }
+
   .sm\:pt-1 {
     padding-top: 0.25rem;
   }
@@ -2710,6 +2798,11 @@ input {
     text-align: center;
   }
 
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .sm\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -2739,6 +2832,11 @@ input {
     margin: 0.5rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:mt-5 {
     margin-top: 1.25rem;
   }
@@ -2767,6 +2865,11 @@ input {
     height: 3rem;
   }
 
+  .md\:w-max {
+    width: -webkit-max-content;
+    width: max-content;
+  }
+
   .md\:w-2\/6 {
     width: 33.333333%;
   }
@@ -2775,11 +2878,6 @@ input {
     width: auto;
   }
 
-  .md\:w-max {
-    width: -webkit-max-content;
-    width: max-content;
-  }
-
   .md\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -2824,6 +2922,11 @@ input {
     padding-bottom: 0px;
   }
 
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
diff --git a/index.css b/index.css
index b2d2ec787..72970a61d 100644
--- a/index.css
+++ b/index.css
@@ -12,43 +12,41 @@
 @tailwind utilities;
 
 @layer utilities {
-  @variants responsive {
-    .z-above-map {
-      z-index: 10000;
-    }
+  .z-above-map {
+    z-index: 10000;
+  }
 
-    .z-above-controls {
-      z-index: 10001;
-    }
+  .z-above-controls {
+    z-index: 10001;
+  }
 
-    .w-160 {
-      width: 40rem;
-    }
+  .w-160 {
+    width: 40rem;
+  }
 
-    .bg-subtle {
-      background-color: var(--subtle-detail-color);
-      color: var(--subtle-detail-color-contrast);
-    }
+  .bg-subtle {
+    background-color: var(--subtle-detail-color);
+    color: var(--subtle-detail-color-contrast);
+  }
 
-    .bg-unsubtle {
-      background-color: var(--unsubtle-detail-color);
-      color: var(--unsubtle-detail-color-contrast);
-    }
+  .bg-unsubtle {
+    background-color: var(--unsubtle-detail-color);
+    color: var(--unsubtle-detail-color-contrast);
+  }
 
-    .bg-catch {
-      background-color: var(--catch-detail-color);
-      color: var(--catch-detail-color-contrast);
-    }
+  .bg-catch {
+    background-color: var(--catch-detail-color);
+    color: var(--catch-detail-color-contrast);
+  }
 
-    .rounded-left-full {
-      border-bottom-left-radius: 999rem;
-      border-top-left-radius: 999rem;
-    }
+  .rounded-left-full {
+    border-bottom-left-radius: 999rem;
+    border-top-left-radius: 999rem;
+  }
 
-    .rounded-right-full {
-      border-bottom-right-radius: 999rem;
-      border-top-right-radius: 999rem;
-    }
+  .rounded-right-full {
+    border-bottom-right-radius: 999rem;
+    border-top-right-radius: 999rem;
   }
 }
 
@@ -67,7 +65,7 @@
 
   /**
      * Base colour of interactive elements, mainly the 'subtle button'
-     * 
+     *
      */
   --subtle-detail-color: #dbeafe;
   --subtle-detail-color-contrast: black;
@@ -594,12 +592,12 @@ input {
 }
 
 .code {
-    display: inline-block;
-    background-color: lightgray;
-    padding: 0.5em;
-    word-break: break-word;
-    color: black;
-    box-sizing: border-box;
+  display: inline-block;
+  background-color: lightgray;
+  padding: 0.5em;
+  word-break: break-word;
+  color: black;
+  box-sizing: border-box;
 }
 
 /** Switch layout **/
diff --git a/tailwind.config.js b/tailwind.config.js
index 5c38cadf2..79ef6798a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,33 +1,23 @@
-const plugin = require('tailwindcss/plugin')
+/** @type {import('tailwindcss').Config} */
+const plugin = require("tailwindcss/plugin");
 
 module.exports = {
-    mode: 'jit',
-    purge: [
-        './**/*.html',
-        './**/*.ts',
-    ],
-    darkMode: false, // or 'media' or 'class'
-    theme: {
-        extend: {
-            maxHeight: {
-                '65vh': '65vh',
-                '20vh': '20vh',
-            }
-        },
+  content: ["./**/*.html", "./**/*.ts"],
+  theme: {
+    extend: {
+      maxHeight: {
+        "65vh": "65vh",
+        "20vh": "20vh",
+      },
     },
-    variants: {
-        extend: {
-            ringColor: ['hover'],
-        }
-    },
-    plugins: [
-        plugin(function ({addVariant, e}) {
-            addVariant('landscape', ({modifySelectors, separator}) => {
-                modifySelectors(({className}) => {
-                    return `.${e(`landscape${separator}${className}`)}:landscape`
-                })
-            })
-        })
-
-    ]
-}
+  },
+  plugins: [
+    plugin(function ({ addVariant, e }) {
+      addVariant("landscape", ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`landscape${separator}${className}`)}:landscape`;
+        });
+      });
+    }),
+  ],
+};