Change from scoped styles to module and rename classes to camelCase

Author: maciekiwaniuk

components/Contact.vue

@@ -11,28 +11,28 @@ function copyEmailToClipboard() {
 <template>
     <section
         id="contact"
-        class="contact"
+        :class="$style.contact"
     >
-        <h2 class="title">
+        <h2 :class="$style.title">
             {{ $t('contact.title') }}
         </h2>
 
         <div
             v-cursor-hover
-            class="content"
+            :class="$style.content"
             @click="copyEmailToClipboard();"
         >
             <Icon
                 name="clarity:email-solid"
                 size="35"
             />
 
-            <span class="email">iwaniukmaciej1@gmail.com</span>
+            <span :class="$style.email">iwaniukmaciej1@gmail.com</span>
         </div>
     </section>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
 .contact {

components/Cursor.vue

@@ -15,15 +15,17 @@ const cursorStore = useCursorStore();
     <div
         v-show="cursorStore.visibility === CursorVisible"
         aria-hidden="true"
-        class="cursor"
-        :class="{ 'cursor-dark-theme': themeStore.isDark,
-                  'cursor-light-theme': themeStore.isLight,
-                  'hover': cursorStore.hover }"
+        :class="[
+            $style.cursor,
+            { [$style.cursorDarkTheme]: themeStore.isDark,
+              [$style.cursorLightTheme]: themeStore.isLight,
+              [$style.hover]: cursorStore.hover }
+        ]"
     />
 
     <button
         v-cursor-hover
-        class="toggle-visibility-of-cursor-button"
+        :class="$style.toggleVisibilityOfCursorButton"
         aria-label="Cursor switch"
         @click="cursorStore.toggleVisibility();"
     >
@@ -34,7 +36,7 @@ const cursorStore = useCursorStore();
     </button>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
 .cursor {
@@ -58,7 +60,7 @@ const cursorStore = useCursorStore();
     transform: scale(2);
 }
 
-.toggle-visibility-of-cursor-button {
+.toggleVisibilityOfCursorButton {
     display: none;
     position: fixed;
     bottom: 0.6rem;
@@ -75,16 +77,16 @@ const cursorStore = useCursorStore();
     .cursor {
         display: block;
     }
-    .toggle-visibility-of-cursor-button {
+    .toggleVisibilityOfCursorButton {
         display: block;
     }
 }
 
-.cursor-dark-theme {
+.cursorDarkTheme {
     border-color: #dark[cursor-color];
 }
 
-.cursor-light-theme {
+.cursorLightTheme {
     border-color: #light[cursor-color];
 }
 </style>

components/Education/Education.vue

@@ -48,13 +48,13 @@ const educationItems: Education[] = [
 <template>
     <section
         id="education"
-        class="education"
+        :class="$style.education"
     >
-        <h2 class="title">
+        <h2 :class="$style.title">
             {{ $t('education.title') }}
         </h2>
 
-        <div class="items">
+        <div :class="$style.items">
             <EducationItem
                 v-for="(education, index) in educationItems"
                 :key="index"
@@ -69,7 +69,7 @@ const educationItems: Education[] = [
     </section>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
 .education {

components/Education/EducationItem.vue

@@ -22,30 +22,32 @@ const themeStore = useThemeStore();
     <div>
         <a
             v-cursor-hover
-            class="link"
+            :class="$style.link"
             target="_blank"
             :href="props.url"
         >
             <div
-                class="education-item"
-                :class="{ 'education-item-dark-theme': themeStore.isDark,
-                          'education-item-light-theme': themeStore.isLight }"
+                :class="[
+                    $style.educationItem,
+                    { [$style.educationItemDarkTheme]: themeStore.isDark,
+                      [$style.educationItemLightTheme]: themeStore.isLight }
+                ]"
             >
-                <h3 class="title">{{ props.title }}</h3>
+                <h3 :class="$style.title">{{ props.title }}</h3>
 
-                <p class="content">
+                <p :class="$style.content">
                     {{ props.content }}
                 </p>
 
-                <div class="technologies">
+                <div :class="$style.technologies">
                     <TechnologyElement
                         v-for="(technology, index) in props.technologies"
                         :key="index"
                         :element="technology"
                     />
                 </div>
 
-                <p class="below">
+                <p :class="$style.below">
                     <span>{{ props.major }}</span>
                     <span>{{ props.period }}</span>
                 </p>
@@ -54,14 +56,14 @@ const themeStore = useThemeStore();
     </div>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
 .link {
     text-decoration: none;
     color: inherit;
 }
-.education-item {
+.educationItem {
     display: flex;
     flex-direction: column;
     text-align: center;
@@ -109,7 +111,7 @@ const themeStore = useThemeStore();
 }
 
 @media (min-width: @first-breakpoint) {
-    .education-item {
+    .educationItem {
         .title {
             max-width: 25rem;
         }
@@ -123,11 +125,11 @@ const themeStore = useThemeStore();
 
 }
 
-.education-item-dark-theme {
+.educationItemDarkTheme {
     background-color: #dark[background-color-on-element];
 }
 
-.education-item-light-theme {
+.educationItemLightTheme {
     background-color: #light[background-color-on-element];
 }
 </style>

components/Experience/Experience.vue

@@ -151,13 +151,13 @@ function getTranslatedPeriod(startDate: Date, endDate: Date | null): string {
 <template>
     <section
         id="experience"
-        class="experience"
+        :class="$style.experience"
     >
-        <h2 class="title">
+        <h2 :class="$style.title">
             {{ $t('experience.title') }}
         </h2>
 
-        <div class="items">
+        <div :class="$style.items">
             <ExperienceItem
                 v-for="(experience, index) in experienceItems"
                 :key="index"
@@ -174,7 +174,7 @@ function getTranslatedPeriod(startDate: Date, endDate: Date | null): string {
     </section>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
 .experience {

components/Experience/ExperienceItem.vue

@@ -22,71 +22,73 @@ const themeStore = useThemeStore();
 </script>
 
 <template>
-    <div class="experience-item-container">
+    <div :class="$style.experienceItemContainer">
         <div
             v-if="index % 2 === 1"
-            class="visible-on-big-screen"
+            :class="$style.visibleOnBigScreen"
         />
         <ExperienceTimeline
             v-if="index % 2 === 1"
-            class="visible-on-big-screen"
+            :class="$style.visibleOnBigScreen"
         />
         <a
             v-cursor-hover
-            class="link"
+            :class="$style.link"
             target="_blank"
             :href="props.url"
         >
             <div
-                class="experience-item"
-                :class="{ 'experience-item-dark-theme': themeStore.isDark,
-                          'experience-item-light-theme': themeStore.isLight }"
+                :class="[
+                    $style.experienceItem,
+                    { [$style.experienceItemDarkTheme]: themeStore.isDark,
+                      [$style.experienceItemLightTheme]: themeStore.isLight }
+                ]"
             >
-                <h3 class="companyName">{{ props.companyName }}</h3>
+                <h3 :class="$style.companyName">{{ props.companyName }}</h3>
 
-                <p class="content">
+                <p :class="$style.content">
                     {{ props.content }}
                 </p>
 
-                <div class="technologies">
+                <div :class="$style.technologies">
                     <TechnologyElement
                         v-for="(technology, indexKey) in props.technologies"
                         :key="indexKey"
                         :element="technology"
                     />
                 </div>
 
-                <p class="below">
+                <p :class="$style.below">
                     <span>{{ props.profession }}</span>
-                    <span class="job-time">
-                        <span class="date-range">{{ dateRange }}</span>
+                    <span :class="$style.jobTime">
+                        <span :class="$style.dateRange">{{ dateRange }}</span>
                         <span>{{ period }}</span>
                     </span>
                 </p>
             </div>
         </a>
         <ExperienceTimeline
             v-if="index % 2 === 0"
-            class="visible-on-big-screen"
+            :class="$style.visibleOnBigScreen"
         />
         <div
             v-if="index % 2 === 0"
-            class="visible-on-big-screen"
+            :class="$style.visibleOnBigScreen"
         />
     </div>
 </template>
 
-<style lang="less" scoped>
+<style module lang="less">
 @import '@/styles/variables.less';
 
-.visible-on-big-screen {
+.visibleOnBigScreen {
     display: none;
 }
 .link {
     text-decoration: none;
     color: inherit;
 }
-.experience-item {
+.experienceItem {
     display: flex;
     flex-direction: column;
     text-align: center;
@@ -143,7 +145,7 @@ const themeStore = useThemeStore();
 }
 
 @media (min-width: @first-breakpoint) {
-    .experience-item {
+    .experienceItem {
         .companyName {
             max-width: 25rem;
         }
@@ -163,21 +165,21 @@ const themeStore = useThemeStore();
 }
 
 @media (min-width: @second-breakpoint) {
-    .experience-item-container {
+    .experienceItemContainer {
         display: grid;
         grid-template-columns: 4fr 1fr 4fr;
 
-        .visible-on-big-screen {
+        .visibleOnBigScreen {
             display: block;
         }
     }
 }
 
-.experience-item-dark-theme {
+.experienceItemDarkTheme {
     background-color: #dark[background-color-on-element];
 }
 
-.experience-item-light-theme {
+.experienceItemLightTheme {
     background-color: #light[background-color-on-element];
 }
 </style>