From cf80a0771067a0d896fae7eaf046d782ec25e2c2 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 24 Feb 2024 22:30:50 +0100
Subject: [PATCH] feat: support `forward:` and `backward:` variant in UnoCSS
 for direction-based styling

---
 packages/client/internals/SlideContainer.vue | 8 +++++---
 packages/client/internals/SlidesShow.vue     | 6 ++++--
 packages/client/uno.config.ts                | 8 ++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index a5870936f9..0101205e83 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -3,7 +3,7 @@ import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { isPrintMode } from '../logic/nav'
+import { isPrintMode, navDirection } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -55,6 +55,8 @@ const style = computed(() => ({
 
 const className = computed(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': navDirection.value > 0,
+  'slidev-nav-go-backward': navDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -69,8 +71,8 @@ provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index c87a242b0d..918dc251ce 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -77,10 +77,12 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  display: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index d4a115a459..db500096db 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -8,6 +8,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export default defineConfig({
   safelist: [
@@ -28,6 +29,13 @@ export default defineConfig({
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
   },
+  // Slidev Specific Variants, probably extrat to a preset later
+  variants: [
+    // `forward:` and `backward:` variant to selectively apply styles based on the direction of the slide
+    // For example, `forward:text-red` will only apply to the slides that are navigated forward
+    variantMatcher('forward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+    variantMatcher('backward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),