removing hover mixin (#474)

nasa-jpl · Jun 28, 2024 · 6286d2c · 6286d2c
1 parent 5578b02
commit 6286d2c
Show file tree

Hide file tree

Showing 21 changed files with 43 additions and 85 deletions.
diff --git a/apps/html-storybook/vite.config.ts b/apps/html-storybook/vite.config.ts
@@ -6,12 +6,5 @@ export default defineConfig({
   // because pnpm and stories are in node_modules
   resolve: {
     preserveSymlinks: true
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-      }
-    }
   }
 })
diff --git a/apps/vue-storybook/vite.config.ts b/apps/vue-storybook/vite.config.ts
@@ -21,12 +21,5 @@ export default defineConfig({
     watch: {
       usePolling: true
     }
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-      }
-    }
   }
 })
diff --git a/packages/common/src/scss/_hover.scss b/packages/common/src/scss/_hover.scss
diff --git a/packages/common/src/scss/components/_BaseButton.scss b/packages/common/src/scss/components/_BaseButton.scss
@@ -13,7 +13,7 @@
     @apply flex h-full items-center justify-center;
   }
 
-  @include hover {
+  &:hover {
     background-position: bottom;
   }
 
@@ -28,15 +28,15 @@
   &.-secondary {
     @apply px-12 bg-transparent text-action border-2 border-action to-action-dark-w50;
 
-    @include hover {
+    &:hover {
       @apply text-white border-action-dark;
     }
   }
 
   &.-dark {
     @apply px-12 bg-transparent text-white border border-white/40 to-white-w50;
 
-    @include hover {
+    &:hover {
       @apply text-dark-blue edu:text-primary-dark border-white bg-white;
     }
   }
@@ -48,52 +48,52 @@
   &.-social {
     @apply px-12 bg-transparent border border-gray-mid text-gray-mid to-gray-dark-w50;
 
-    @include hover {
+    &:hover {
       @apply text-white bg-gray-dark;
     }
 
     &.-facebook {
       @apply to-facebook-w50;
 
-      @include hover {
+      &:hover {
         @apply bg-facebook border-facebook;
       }
     }
 
     &.-twitter {
       @apply to-twitter-w50;
 
-      @include hover {
+      &:hover {
         @apply bg-twitter border-twitter;
       }
     }
 
     &.-instagram {
       @apply to-instagram-w50;
 
-      @include hover {
+      &:hover {
         @apply bg-instagram border-instagram;
       }
     }
 
     &.-youtube {
       @apply to-youtube-w50;
 
-      @include hover {
+      &:hover {
         @apply bg-youtube border-youtube;
       }
     }
 
     &.-reddit {
       @apply to-reddit-w50;
 
-      @include hover {
+      &:hover {
         @apply bg-reddit border-reddit;
       }
     }
     .ThemeEdu & {
       @apply border-action text-action to-action-w50 #{!important};
-      @include hover {
+      &:hover {
         @apply text-white bg-action #{!important};
       }
     }

diff --git a/packages/common/src/scss/components/_BaseImageCaption.scss b/packages/common/src/scss/components/_BaseImageCaption.scss
@@ -9,7 +9,7 @@
     a {
       @apply text-action underline cursor-pointer;
 
-      @include hover {
+      &:hover {
         @apply text-action-hover;
       }
     }

diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -2,7 +2,7 @@
   a {
     @apply text-action underline cursor-pointer break-words;
 
-    @include hover {
+    &:hover {
       @apply text-action-hover;
     }
   }

diff --git a/packages/common/src/scss/components/_MixinAnimationCaret.scss b/packages/common/src/scss/components/_MixinAnimationCaret.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  @include hover {
+  &:hover {
     > .arrow-wrapper > .arrow {
       animation: arrow-anim 0.25s ease-in normal;
     }

diff --git a/packages/common/src/scss/components/_MixinCarousel.scss b/packages/common/src/scss/components/_MixinCarousel.scss
@@ -34,7 +34,7 @@
           }
         }
 
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow,
           > .arrow-wrapper > .arrow-fixed {
             animation-delay: 50ms !important; // hover intent
@@ -46,7 +46,7 @@
     @screen lg {
       // specific directional animation
       .swiper-next.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-next-anim 0.1s linear normal;
           }
@@ -58,7 +58,7 @@
       }
 
       .swiper-prev.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-prev-anim 0.1s linear normal;
           }

diff --git a/packages/common/src/scss/components/_NavInternal.scss b/packages/common/src/scss/components/_NavInternal.scss
@@ -16,7 +16,9 @@
     visibility: hidden;
     max-height: 0;
     opacity: 0;
-    transition: visibility 0s linear 300ms, opacity 300ms,
+    transition:
+      visibility 0s linear 300ms,
+      opacity 300ms,
       max-height 0s linear 300s;
     @apply h-0 overflow-hidden;
 
@@ -36,7 +38,10 @@
       visibility: visible;
       max-height: 100%;
       opacity: 1;
-      transition: visibility 0s, opacity 300ms, max-height 0s;
+      transition:
+        visibility 0s,
+        opacity 300ms,
+        max-height 0s;
       @apply h-auto overflow-visible;
 
       @screen lg {
@@ -86,7 +91,7 @@
           @apply border-gray-dark/20 outline-none;
         }
 
-        @include hover {
+        &:hover {
           @apply text-gray-mid-dark;
         }
         // bold invisible psuedo element to prevent layout shift on hover
@@ -228,7 +233,7 @@
           @apply border-b border-transparent;
         }
 
-        @include hover {
+        &:hover {
           @apply text-jpl-sky-blue;
         }
 
@@ -269,7 +274,7 @@
           }
         }
 
-        @include hover {
+        &:hover {
           @apply text-gray-dark;
 
           > span {
@@ -284,7 +289,7 @@
             @apply border-0;
           }
 
-          @include hover {
+          &:hover {
             @apply text-jpl-sky-blue;
           }
 
@@ -353,12 +358,16 @@
   // complex transitions, so cannot use tailwind classes
   visibility: visible;
   opacity: 0.8;
-  transition: visibility 0s linear 0s, opacity 300ms;
+  transition:
+    visibility 0s linear 0s,
+    opacity 300ms;
   // must use a custom class, cannot use .invisible, or else other rules will get erroneously created
   // see: https://github.jpl.nasa.gov/18x/WCP/issues/492
   &.invisible-overlay {
     visibility: hidden;
     opacity: 0;
-    transition: visibility 0s linear 300ms, opacity 300ms;
+    transition:
+      visibility 0s linear 300ms,
+      opacity 300ms;
   }
 }
diff --git a/packages/common/src/scss/styles.scss b/packages/common/src/scss/styles.scss
@@ -16,7 +16,6 @@
 
 // main elements
 @import 'forms';
-@import 'hover';
 @import 'fonts';
 @import 'aspect-ratios';
 @import 'grid';
@@ -26,4 +25,3 @@
 
 // components
 @import 'components';
-
diff --git a/packages/html/dist/assets/css/explorer-1.min.css b/packages/html/dist/assets/css/explorer-1.min.css
diff --git a/packages/html/vite.config.js b/packages/html/vite.config.js
@@ -2,13 +2,6 @@ import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-      }
-    }
-  },
   build: {
     rollupOptions: {
       output: {

diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -67,14 +67,6 @@ export default defineNuxtModule<ModuleOptions>({
       // extend nuxt's vite config without overriding nuxt.config.js
       nuxt.options.vite = {
         ...nuxt.options.vite,
-        css: {
-          ...nuxt.options.css,
-          preprocessorOptions: {
-            scss: {
-              additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-            }
-          }
-        },
         build: {
           rollupOptions: {
             // make sure to externalize deps that shouldn't be bundled

diff --git a/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue b/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue
@@ -234,7 +234,7 @@ export default defineComponent({
             @apply absolute top-0 left-0 block;
           }
         }
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow,
           > .arrow-wrapper > .arrow-fixed {
             animation-delay: 50ms !important; // hover intent
@@ -245,7 +245,7 @@ export default defineComponent({
     @screen lg {
       // specific directional animation
       .swiper-next.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-next-anim 0.1s linear normal;
           }
@@ -257,7 +257,7 @@ export default defineComponent({
       }
 
       .swiper-prev.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-prev-anim 0.1s linear normal;
           }

diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
@@ -136,7 +136,7 @@ export default defineComponent({
         }
       }
     }
-    @include hover {
+    &:hover {
       > span {
         @apply border-jpl-red;
 

diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -139,7 +139,7 @@ export default defineComponent({
         @apply border-primary #{!important};
       }
     }
-    @include hover {
+    &:hover {
       &.-active {
         > span {
           @apply text-gray-mid-dark;

diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
@@ -124,7 +124,7 @@ export default defineComponent({
       @apply border-b border-transparent pb-2px;
     }
 
-    @include hover {
+    &:hover {
       > span {
         @apply border-black text-black;
       }

diff --git a/packages/vue/src/components/NavSocial/NavSocial.vue b/packages/vue/src/components/NavSocial/NavSocial.vue
@@ -82,7 +82,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .BaseButton {
   @apply relative;
-  @include hover {
+  &:hover {
     @apply z-10;
   }
   // we have to define these here to override the extracted border styles native to BaseButton

diff --git a/packages/vue/src/components/ShareButtons/ShareButtons.vue b/packages/vue/src/components/ShareButtons/ShareButtons.vue
@@ -124,7 +124,7 @@ export default defineComponent({
 .ShareButtons {
   .BaseButton {
     @apply relative;
-    @include hover {
+    &:hover {
       @apply z-10;
     }
   }

diff --git a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue
@@ -196,7 +196,7 @@ const buttonClass = computed(() => {
 .ShareButtonsEdu {
   .BaseButton {
     @apply relative focus:z-20;
-    @include hover {
+    &:hover {
       @apply z-20;
     }
   }

diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
@@ -15,13 +15,6 @@ export default defineConfig({
       dirs: ['./src/components', './src/templates']
     })
   ],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-      }
-    }
-  },
   // build: {
   //   rollupOptions: {
   //     output: {