feat: use global CSS classes

playground/components/VButton/Default.stories.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <NuxtStory>
+    <NuxtStory :class="$style.root">
         <NuxtStoryVariant title="Default">
             <VButton>Test</VButton>
         </NuxtStoryVariant>
@@ -11,4 +11,8 @@
     </NuxtStory>
 </template>
 
-<style module lang="scss"></style>
+<style module lang="scss">
+.root :global(.nuxt-story-variant) {
+    // background-color: red;
+}
+</style>

src/runtime/components/NuxtStory.vue

@@ -9,31 +9,31 @@ const { storiesUIVisible } = useStories()
 </script>
 
 <template>
-    <div :class="[$style.root, layout && $style['root--layout-' + layout]]">
-        <div :class="$style.main">
+    <div :class="['nuxt-story', layout && 'nuxt-story--layout-' + layout]">
+        <div class="nuxt-story__main">
             <slot />
         </div>
-        <div v-if="$slots.aside" v-show="storiesUIVisible" :class="$style.aside">
+        <div v-if="$slots.aside" v-show="storiesUIVisible" class="nuxt-story__aside">
             <slot name="aside" />
         </div>
     </div>
 </template>
 
-<style lang="scss" module>
-.root {
+<style lang="scss">
+.nuxt-story {
     display: flex;
 }
 
-.main {
+.nuxt-story__main {
     flex-grow: 1;
     padding: 20px var(--story-main-padding, 2rem);
 
-    &--layout-fullscreen {
+    .nuxt-story--layout-fullscreen & {
         padding: var(--story-main-padding, 0);
     }
 }
 
-.aside {
+.nuxt-story__aside {
     position: sticky;
     top: 0;
     overflow-y: auto;
@@ -49,7 +49,7 @@ const { storiesUIVisible } = useStories()
     background-color: #f6f6f6ff;
     font-size: 14px;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         display: none;
     }
 }

src/runtime/components/NuxtStoryVariant.vue

@@ -8,34 +8,34 @@ defineProps<NuxtStoryVariantProps>()
 </script>
 
 <template>
-    <div :class="$style.root">
-        <div :class="$style.head">
-            <h2 v-if="title" :class="$style.title">{{ title }}</h2>
+    <div class="nuxt-story-variant">
+        <div class="nuxt-story-variant__head">
+            <h2 v-if="title" class="nuxt-story-variant__title">{{ title }}</h2>
         </div>
-        <div :class="[$style.main, mainClass]">
+        <div class="nuxt-story-variant__main">
             <slot />
         </div>
     </div>
 </template>
 
-<style lang="scss" module>
-.root {
+<style lang="scss">
+.nuxt-story-variant {
     padding-block: 2rem;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.head {
+.nuxt-story-variant__head {
     position: relative;
     flex-basis: 100%;
     margin-bottom: 1rem;
     z-index: 10;
 }
 
-.title {
+.nuxt-story-variant__title {
     text-decoration: underline;
 }
 
-.main {
+.nuxt-story-variant__main {
     display: flex;
     padding: 1rem 0.5rem;
     align-items: center;

src/runtime/components/StoriesNav.vue

@@ -90,23 +90,23 @@ watch(route, () => {
 </script>
 
 <template>
-    <div v-show="storiesUIVisible" :class="[$style.root, isOpen && $style['root--open']]">
-        <div :class="$style.top">
-            <NuxtLink :to="storiesPath('/')" :class="$style.title"> Stories</NuxtLink>
-            <button :class="$style.toggle" @click="isOpen = !isOpen"></button>
+    <div v-show="storiesUIVisible" :class="['stories-nav', isOpen && 'stories-nav--open']">
+        <div class="stories-nav__head">
+            <NuxtLink :to="storiesPath('/')" class="stories-nav__title"> Stories</NuxtLink>
+            <button class="stories-nav__toggle" @click="isOpen = !isOpen"></button>
         </div>
-        <div :class="$style.main">
-            <div :class="$style.search">
-                <input v-model="search" type="text" :class="$style.search__input" />
-                <button :class="$style.search__clear" @click="search = ''" />
+        <div class="stories-nav__main">
+            <div class="stories-nav__search">
+                <input v-model="search" type="text" class="stories-nav__search__input" />
+                <button class="stories-nav__search__clear" @click="search = ''" />
             </div>
             <StoriesNavItem v-for="(item, key) in filteredItemList" :key="key" :item="item" :label="key" />
         </div>
     </div>
 </template>
 
-<style module lang="scss">
-.root {
+<style lang="scss">
+.stories-nav {
     position: sticky;
     z-index: 1000;
     top: 0;
@@ -135,7 +135,7 @@ watch(route, () => {
     }
 }
 
-.top {
+.stories-nav__head {
     position: sticky;
     top: 0;
     display: flex;
@@ -149,13 +149,13 @@ watch(route, () => {
     }
 }
 
-.title {
+.stories-nav__title {
     font-size: 1.3rem;
     text-decoration: none;
     color: inherit;
 }
 
-.toggle {
+.stories-nav__toggle {
     display: flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -180,16 +180,16 @@ watch(route, () => {
         background-color: currentColor;
     }
 
-    .root--open &::before {
+    .stories-nav--open &::before {
         transform: translateY(2px) rotate(45deg);
     }
 
-    .root--open &::after {
+    .stories-nav--open &::after {
         transform: translateY(-2px) rotate(-45deg);
     }
 }
 
-.main {
+.stories-nav__main {
     display: none;
     margin-top: 1em;
     padding: 1rem 1rem 2rem;
@@ -204,7 +204,7 @@ watch(route, () => {
     }
 }
 
-.search {
+.stories-nav__search {
     position: relative;
     display: flex;
     align-items: center;
@@ -213,14 +213,14 @@ watch(route, () => {
     background-color: rgba(black, 0.04);
 }
 
-.search__input {
+.stories-nav__search__input {
     width: 90%;
     border: none;
     background-color: transparent;
     padding: 0.5em 0.2rem;
 }
 
-.search__clear {
+.stories-nav__search__clear {
     all: unset;
     position: absolute;
     right: 10px;

src/runtime/components/StoriesNavItem.vue

@@ -67,13 +67,13 @@ watch(isOpen, () => {
 </script>
 
 <template>
-    <NuxtLink v-if="isLink" ref="link" :to="item.to" :class="$style.link">
+    <NuxtLink v-if="isLink" ref="link" :to="item.to" class="stories-nav-item__link">
         {{ item.label }}
     </NuxtLink>
-    <div v-else ref="folder" :class="[$style.folder, isOpen && $style['folder--active']]">
-        <button :class="$style.button" @click="isOpen = !isOpen">
+    <div v-else ref="folder" :class="['stories-nav-item__folder', isOpen && 'stories-nav-item__folder--open']">
+        <button class="stories-nav-item__folder__button" @click="isOpen = !isOpen">
             <span>{{ label }}</span>
-            <span :class="$style.icon"></span>
+            <span class="stories-nav-item__folder__icon"></span>
         </button>
         <ul v-if="isOpen">
             <li v-for="(childItem, key) in item" :key="key">
@@ -83,20 +83,20 @@ watch(isOpen, () => {
     </div>
 </template>
 
-<style module lang="scss">
-.link {
+<style lang="scss">
+.stories-nav-item__link {
     margin-block: 0.1rem;
     padding: 0.15rem 0.3rem;
     text-decoration: none;
     color: inherit;
     border-radius: 0.3rem;
 
-    &:global(.router-link-exact-active) {
+    &.router-link-exact-active {
         background-color: yellow;
     }
 }
 
-.button {
+.stories-nav-item__folder__button {
     display: flex;
     align-items: center;
     margin-block: 0.8rem 0.5rem;
@@ -106,7 +106,7 @@ watch(isOpen, () => {
     border: none;
 }
 
-.icon {
+.stories-nav-item__folder__icon {
     position: relative;
     display: inline-flex;
     width: 1.2rem;
@@ -143,12 +143,12 @@ watch(isOpen, () => {
         margin-left: -1px;
     }
 
-    .folder--active &::after {
+    .stories-nav-item__folder--active &::after {
         display: none;
     }
 }
 
-.folder ul {
+.stories-nav-item__folder ul {
     padding-left: 1em;
     margin-block: 0;
     margin-left: 1em;

src/runtime/components/StoriesPage.vue

@@ -32,16 +32,16 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div :class="$style.root">
+    <div class="stories-page">
         <StoriesNav />
-        <div :class="$style['page-wrapper']">
+        <div class="stories-page__main">
             <NuxtPage />
         </div>
     </div>
 </template>
 
-<style module lang="scss">
-.root {
+<style lang="scss">
+.stories-page {
     display: flex;
     font-family: Helvetica, sans-serif;
 
@@ -50,7 +50,7 @@ onBeforeUnmount(() => {
     }
 }
 
-.page-wrapper {
+.stories-page__main {
     flex-grow: 1;
 }
 </style>