From 890e148827c37e1ece7897bfb97d0561babe6b62 Mon Sep 17 00:00:00 2001
From: Adam Marcinkowski <a.marcinkowski@macopedia.com>
Date: Tue, 19 Oct 2021 10:38:53 +0200
Subject: [PATCH] chore: upgrade eslint config and fix issues (#29)

---
 example/.eslintrc.js                          |  5 +---
 example/components/Logo.vue                   |  2 +-
 example/package.json                          |  2 +-
 example/yarn.lock                             |  8 ++---
 packages/nuxt-typo3-ce/package.json           |  2 +-
 packages/nuxt-typo3-ce/src/App.vue            |  4 +--
 .../src/components/CeBullets/CeBullets.vue    |  2 +-
 .../components/CeDynamic/CeDynamic.spec.js    |  2 +-
 .../src/components/CeDynamic/CeDynamic.vue    |  2 +-
 .../components/CeRenderer/CeRenderer.data.ts  |  4 +--
 .../components/CeRenderer/CeRenderer.spec.js  |  8 ++---
 .../components/CeShortcut/CeShortcut.spec.js  |  2 +-
 .../components/CeUploads/CeUploads.spec.js    |  6 ++--
 packages/nuxt-typo3-theme/package.json        |  2 +-
 .../src/components/CeDiv/CeDiv.vue            |  4 +--
 .../src/components/CeGallery/CeGallery.vue    |  2 +-
 .../components/CeMenuPages/CeMenuPages.vue    | 30 +++++++++----------
 .../src/components/CeText/CeText.data.ts      |  2 +-
 .../components/CeUploads/CeUploads.spec.js    |  2 +-
 .../UiBreadcrumbsList/UiBreadcrumbsList.vue   |  2 +-
 .../src/components/UiButton/UiButton.vue      |  2 +-
 .../components/UiErrorPage/UiErrorPage.vue    |  2 +-
 .../components/UiFilesList/UiFilesList.vue    |  4 +--
 .../src/components/UiFrame/UiFrame.spec.js    |  4 +--
 .../UiGrid/UiContainer/UiContainer.vue        |  4 +--
 .../src/components/UiGrid/UiRow/UiRow.vue     |  4 +--
 .../src/components/UiGrid/shared/_grid.scss   |  4 +--
 .../src/components/UiHero/UiHero.vue          |  2 +-
 .../src/components/UiLayer/UiLayer.vue        |  2 +-
 .../src/components/UiLayout/UiLayout.vue      |  2 +-
 .../components/UiLinksList/UiLinksList.vue    |  5 ++--
 .../src/components/UiNavbar/UiNavbar.vue      |  2 +-
 .../UiNavigationLanguage.vue                  |  2 +-
 .../UiNews/UiNewsDetail/UiNewsDetail.data.ts  |  4 +--
 .../UiNews/UiNewsElement/UiNewsElement.vue    |  6 ++--
 .../UiNews/UiNewsImage/UiNewsImage.vue        |  2 +-
 .../UiNews/UiNewsList/UiNewsList.vue          |  2 +-
 .../components/UiPagination/UiPagination.vue  | 10 +++----
 packages/nuxt-typo3-theme/src/nuxt/module.ts  |  1 -
 .../nuxt-typo3-theme/src/styles/core.scss     |  2 +-
 .../nuxt-typo3-theme/src/styles/utils.scss    | 10 +++----
 yarn.lock                                     |  9 +++---
 42 files changed, 87 insertions(+), 91 deletions(-)

diff --git a/example/.eslintrc.js b/example/.eslintrc.js
index 151f483..bc982cf 100644
--- a/example/.eslintrc.js
+++ b/example/.eslintrc.js
@@ -4,9 +4,6 @@ module.exports = {
     browser: true,
     node: true
   },
-  rules: {
-    'prettierx/options': ['error', { semi: false }]
-  },
-  extends: ['macopedia/vue']
+  extends: ['macopedia/nuxt']
   // add your custom rules here
 }
diff --git a/example/components/Logo.vue b/example/components/Logo.vue
index 6978456..179281b 100644
--- a/example/components/Logo.vue
+++ b/example/components/Logo.vue
@@ -1,3 +1,3 @@
 <template>
-  <img src="/logo.svg" alt="nuxt-typo3 logo" />
+  <img src="/logo.svg" alt="nuxt-typo3 logo">
 </template>
diff --git a/example/package.json b/example/package.json
index a5d0167..84ad8a4 100644
--- a/example/package.json
+++ b/example/package.json
@@ -22,7 +22,7 @@
     "@nuxtjs/stylelint-module": "^3.1.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^7.20.0",
-    "eslint-config-macopedia": "^0.2.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "eslint-plugin-nuxt": ">=0.4.2",
     "sass": "^1.42.1",
     "sass-loader": "10",
diff --git a/example/yarn.lock b/example/yarn.lock
index 4855c3e..c4957ff 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -4965,10 +4965,10 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-macopedia@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.2.0.tgz#7ec68c8b677f55c41001c575702a1603924de193"
-  integrity sha512-Wa2gHBCbVwG6C2wCNm2/i70bnMXMmk7pAyB7ldCBAYOGxd4cFzu3QpwjKZCsF3X7lmSbXOjjmjLslRwetPe5qg==
+eslint-config-macopedia@^0.2.0-alpha.1:
+  version "0.2.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.2.0-alpha.1.tgz#3879d5631aaaa062d64df6b5c26d385563f70abb"
+  integrity sha512-azY25FN0OfbZArZ2xMYKGQD6HCQlvLqMd849ARwBsOzqQUpOYmd7X6Lj0+Ro70OqrkfWsgga3ZX0JzzZMBXbRQ==
   dependencies:
     "@nuxtjs/eslint-config" "^5.0.0"
     "@nuxtjs/eslint-config-typescript" "^5.0.0"
diff --git a/packages/nuxt-typo3-ce/package.json b/packages/nuxt-typo3-ce/package.json
index edb77a3..f55bc62 100644
--- a/packages/nuxt-typo3-ce/package.json
+++ b/packages/nuxt-typo3-ce/package.json
@@ -34,7 +34,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-require-context": "^0.1.1",
     "eslint": "^7.10.0",
-    "eslint-config-macopedia": "^0.1.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "flush-promises": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
     "nuxt-typo3": "^0.9.3",
diff --git a/packages/nuxt-typo3-ce/src/App.vue b/packages/nuxt-typo3-ce/src/App.vue
index b70c339..79e1ecc 100644
--- a/packages/nuxt-typo3-ce/src/App.vue
+++ b/packages/nuxt-typo3-ce/src/App.vue
@@ -14,10 +14,10 @@ export default {
 
 <style lang="scss" module>
 #app {
+  color: #2c3e50;
   font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
 </style>
diff --git a/packages/nuxt-typo3-ce/src/components/CeBullets/CeBullets.vue b/packages/nuxt-typo3-ce/src/components/CeBullets/CeBullets.vue
index d89bb5b..938beed 100644
--- a/packages/nuxt-typo3-ce/src/components/CeBullets/CeBullets.vue
+++ b/packages/nuxt-typo3-ce/src/components/CeBullets/CeBullets.vue
@@ -36,7 +36,7 @@ export default defineComponent({
     bulletsType: {
       type: Number,
       default: 0
-    },
+    }
   },
   setup (props: CeSharedProps) {
     const sharedProps = getSharedProps(props)
diff --git a/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.spec.js b/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.spec.js
index b2a23e2..8af7652 100644
--- a/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.spec.js
+++ b/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.spec.js
@@ -6,7 +6,7 @@ import CeDynamic from './CeDynamic.vue'
 const CeTextMock = {
   name: 'CeText',
   props: ['id', 'header', 'bodytext'],
-  template: `<div class="ce-text-mock"><h1>{{header}}</h1>{{bodytext}}</div>`
+  template: '<div class="ce-text-mock"><h1>{{header}}</h1>{{bodytext}}</div>'
 }
 
 describe('CeDynamic', () => {
diff --git a/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.vue b/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.vue
index dd2225a..1b10239 100644
--- a/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.vue
+++ b/packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.vue
@@ -47,7 +47,7 @@ export default defineComponent({
         this.$root.$options.components &&
         !this.$root.$options.components[componentName]
       ) {
-        componentName = `CeDefault`
+        componentName = 'CeDefault'
       }
 
       return createElement(componentName, {
diff --git a/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.data.ts b/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.data.ts
index c3ca510..b7e8a44 100644
--- a/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.data.ts
+++ b/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.data.ts
@@ -63,9 +63,9 @@ export const CeRendererMockData = {
             padding: 0
           },
           rows: {
-            '1': {
+            1: {
               columns: {
-                '1': {
+                1: {
                   publicUrl: 'https://image.jpg',
                   properties: {
                     title: null,
diff --git a/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.spec.js b/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.spec.js
index 8732dd6..03a8135 100644
--- a/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.spec.js
+++ b/packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.spec.js
@@ -7,7 +7,7 @@ import CeDynamic from '../CeDynamic'
 // Mock CeDynamic
 const CeDynamicMock = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>'
 }
 
 // Mock CeFrame
@@ -17,7 +17,7 @@ const CeFrameMock = {
 
 const CeDefault = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-default">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-default">{{JSON.stringify($props)}}</div>'
 }
 
 describe('CeRenderer with mocked components', () => {
@@ -29,7 +29,7 @@ describe('CeRenderer with mocked components', () => {
   const wrappedRenderer = {
     inheritAttrs: false,
     components: { CeRenderer },
-    template: `<div><CeRenderer v-bind="$attrs"/></div>`
+    template: '<div><CeRenderer v-bind="$attrs"/></div>'
   }
 
   const prepareFrame = {
@@ -83,7 +83,7 @@ describe('CeRenderer with true components', () => {
   const wrappedRenderer = {
     inheritAttrs: false,
     components: { CeRenderer },
-    template: `<div><CeRenderer v-bind="$attrs"/></div>`
+    template: '<div><CeRenderer v-bind="$attrs"/></div>'
   }
 
   const prepareFrame = {
diff --git a/packages/nuxt-typo3-ce/src/components/CeShortcut/CeShortcut.spec.js b/packages/nuxt-typo3-ce/src/components/CeShortcut/CeShortcut.spec.js
index e2ad100..b3ec3a5 100644
--- a/packages/nuxt-typo3-ce/src/components/CeShortcut/CeShortcut.spec.js
+++ b/packages/nuxt-typo3-ce/src/components/CeShortcut/CeShortcut.spec.js
@@ -6,7 +6,7 @@ import CeRenderer from '../CeRenderer'
 // Mock CeDynamic
 const CeDynamicMock = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>'
 }
 
 // Mock CeFrame
diff --git a/packages/nuxt-typo3-ce/src/components/CeUploads/CeUploads.spec.js b/packages/nuxt-typo3-ce/src/components/CeUploads/CeUploads.spec.js
index defa686..7ab25b0 100644
--- a/packages/nuxt-typo3-ce/src/components/CeUploads/CeUploads.spec.js
+++ b/packages/nuxt-typo3-ce/src/components/CeUploads/CeUploads.spec.js
@@ -4,11 +4,11 @@ import { mockData } from './CeUploads.data'
 import CeUploads from './CeUploads.vue'
 
 const CeHeaderMock = Vue.component('CeHeader', {
-  template: `<div> hello </div>`
+  template: '<div> hello </div>'
 })
 
 const NavLinkMock = Vue.component('NavLink', {
-  template: `<div> <slot/> </div>`
+  template: '<div> <slot/> </div>'
 })
 
 const CeMediaFileMock = Vue.component('CeMediaFile', {
@@ -18,7 +18,7 @@ const CeMediaFileMock = Vue.component('CeMediaFile', {
       required: true
     }
   },
-  template: `<img :src="file.publicUrl" />`
+  template: '<img :src="file.publicUrl" />'
 })
 
 describe('CeUploads', () => {
diff --git a/packages/nuxt-typo3-theme/package.json b/packages/nuxt-typo3-theme/package.json
index ca73dfd..cdc5de9 100644
--- a/packages/nuxt-typo3-theme/package.json
+++ b/packages/nuxt-typo3-theme/package.json
@@ -59,7 +59,7 @@
     "babel-plugin-transform-require-context": "^0.1.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.10.0",
-    "eslint-config-macopedia": "^0.1.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "eslint-plugin-vuejs-accessibility": "^0.6.1",
     "flush-promises": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
diff --git a/packages/nuxt-typo3-theme/src/components/CeDiv/CeDiv.vue b/packages/nuxt-typo3-theme/src/components/CeDiv/CeDiv.vue
index 6de8a2e..13679e2 100644
--- a/packages/nuxt-typo3-theme/src/components/CeDiv/CeDiv.vue
+++ b/packages/nuxt-typo3-theme/src/components/CeDiv/CeDiv.vue
@@ -32,10 +32,10 @@ $divider-color-layout-1: $palette-gallery;
 }
 
 .ce-div {
-  height: 1px;
   display: block;
-  border: none;
+  height: 1px;
   background: var(--color-divider);
+  border: none;
 
   &--layout-1 {
     background: var(--color-divider-layout-1);
diff --git a/packages/nuxt-typo3-theme/src/components/CeGallery/CeGallery.vue b/packages/nuxt-typo3-theme/src/components/CeGallery/CeGallery.vue
index 121cfda..f92d0f7 100644
--- a/packages/nuxt-typo3-theme/src/components/CeGallery/CeGallery.vue
+++ b/packages/nuxt-typo3-theme/src/components/CeGallery/CeGallery.vue
@@ -167,8 +167,8 @@ export default CeGalleryTheme as typeof CeGallery & typeof CeGalleryTheme
     }
 
     figcaption {
-      font-weight: var(--font-weight-medium);
       margin-bottom: var(--space-3);
+      font-weight: var(--font-weight-medium);
       text-align: left;
     }
   }
diff --git a/packages/nuxt-typo3-theme/src/components/CeMenuPages/CeMenuPages.vue b/packages/nuxt-typo3-theme/src/components/CeMenuPages/CeMenuPages.vue
index 71e9004..fe1ed45 100644
--- a/packages/nuxt-typo3-theme/src/components/CeMenuPages/CeMenuPages.vue
+++ b/packages/nuxt-typo3-theme/src/components/CeMenuPages/CeMenuPages.vue
@@ -29,8 +29,8 @@ $color-menu-pages: $palette-mercury;
 
 .ce-menu-pages {
   ul {
-    background: var(--color-menu-pages);
     font-size: var(--font-size-lg);
+    background: var(--color-menu-pages);
 
     @include media-query(md) {
       display: flex;
@@ -38,20 +38,20 @@ $color-menu-pages: $palette-mercury;
     }
 
     li {
-      padding: var(--space-4) var(--space-4);
       position: relative;
+      padding: var(--space-4) var(--space-4);
 
       ul {
         top: 100%;
+        display: none;
         min-width: 100%;
-        border-top: 1px solid var(--color-bg-secondary);
         margin-top: var(--space-4);
         margin-bottom: -1.6rem;
-        display: none;
+        border-top: 1px solid var(--color-bg-secondary);
 
         @include media-query(md) {
-          margin-top: 0;
           position: absolute;
+          margin-top: 0;
         }
 
         li {
@@ -74,38 +74,38 @@ $color-menu-pages: $palette-mercury;
           margin-right: 1rem;
 
           &::after {
-            content: '';
             position: absolute;
             top: 50%;
-            transform: translateY(-50%);
             display: block;
-            background-size: cover;
             margin-top: 0.1rem;
+            background-size: cover;
+            transform: translateY(-50%);
+            content: '';
           }
         }
 
         &[target='_blank']::after {
-          background-image: url('../../assets/icons/externalLink.svg');
+          right: -1.8rem;
           width: 1rem;
           height: 1rem;
-          right: -1.8rem;
+          background-image: url('../../assets/icons/externalLink.svg');
         }
 
         &.has-children::after {
-          background-image: url('../../assets/icons/chevron.svg');
+          right: -2.5rem;
           width: 1.7rem;
           height: 1.1rem;
-          right: -2.5rem;
+          background-image: url('../../assets/icons/chevron.svg');
         }
       }
 
       &::before {
         position: static;
-        content: '\25CF';
+        margin-right: 1em;
+        color: currentColor;
         font-size: 0.5em;
         vertical-align: middle;
-        color: currentColor;
-        margin-right: 1em;
+        content: '\25CF';
       }
     }
   }
diff --git a/packages/nuxt-typo3-theme/src/components/CeText/CeText.data.ts b/packages/nuxt-typo3-theme/src/components/CeText/CeText.data.ts
index 86bd097..751817d 100644
--- a/packages/nuxt-typo3-theme/src/components/CeText/CeText.data.ts
+++ b/packages/nuxt-typo3-theme/src/components/CeText/CeText.data.ts
@@ -3,6 +3,6 @@ export const mockData = {
   subheader: 'Subheader',
   headerLayout: 3,
   bodytext: `<p>Lorem ipsum Unta Dolor sit amet. Sapiente minima veritatis consequuntur perspiciatis. Consectetur adipisicing elit. Sapiente minima veritatis consequuntur perspiciatis.</p>
-    <ul> 	<li>List Element 1</li> 	<li>List Element 1 	<ol> 		<li>List Element 1</li> 		<li>List Element 1</li> 		<li>List Element 1</li> 	</ol> 	</li> 	<li>List Element 1</li> 	<li>List Element 1</li> </ul>
+    <ul><li>List Element 1</li><li>List Element 1<ol> <li>List Element 1</li><li>List Element 1</li> <li>List Element 1</li> </ol> </li><li>List Element 1</li><li>List Element 1</li> </ul>
     `
 }
diff --git a/packages/nuxt-typo3-theme/src/components/CeUploads/CeUploads.spec.js b/packages/nuxt-typo3-theme/src/components/CeUploads/CeUploads.spec.js
index bbd845a..8f7b327 100644
--- a/packages/nuxt-typo3-theme/src/components/CeUploads/CeUploads.spec.js
+++ b/packages/nuxt-typo3-theme/src/components/CeUploads/CeUploads.spec.js
@@ -5,7 +5,7 @@ import { mockData } from './CeUploads.data'
 import CeUploads from './CeUploads.vue'
 Vue.use(VueCompositionApi)
 const CeHeaderMock = Vue.component('CeHeader', {
-  template: `<div> hello </div>`
+  template: '<div> hello </div>'
 })
 
 describe('CeUploads', () => {
diff --git a/packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue b/packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue
index 7c483fd..37ea1f6 100644
--- a/packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue
@@ -38,9 +38,9 @@ export default defineComponent({
 
 <style lang="scss">
 .ui-breadcrumbs {
-  margin: var(--space-3) 0;
   display: flex;
   align-items: baseline;
+  margin: var(--space-3) 0;
 
   &__list {
     display: flex;
diff --git a/packages/nuxt-typo3-theme/src/components/UiButton/UiButton.vue b/packages/nuxt-typo3-theme/src/components/UiButton/UiButton.vue
index bb6403b..d070237 100644
--- a/packages/nuxt-typo3-theme/src/components/UiButton/UiButton.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiButton/UiButton.vue
@@ -74,8 +74,8 @@ export default defineComponent({
     padding: var(--space-2);
 
     @include media-query(sm) {
-      padding: var(--space-2) var(--space-10);
       min-width: 28.4rem;
+      padding: var(--space-2) var(--space-10);
     }
 
     @include text(xl);
diff --git a/packages/nuxt-typo3-theme/src/components/UiErrorPage/UiErrorPage.vue b/packages/nuxt-typo3-theme/src/components/UiErrorPage/UiErrorPage.vue
index b111897..8f89714 100644
--- a/packages/nuxt-typo3-theme/src/components/UiErrorPage/UiErrorPage.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiErrorPage/UiErrorPage.vue
@@ -42,8 +42,8 @@ export default defineComponent({
 <style lang="scss">
 .error {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
 
   .error__logo {
     margin: 5rem 0;
diff --git a/packages/nuxt-typo3-theme/src/components/UiFilesList/UiFilesList.vue b/packages/nuxt-typo3-theme/src/components/UiFilesList/UiFilesList.vue
index 7930a82..f04ae4a 100644
--- a/packages/nuxt-typo3-theme/src/components/UiFilesList/UiFilesList.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiFilesList/UiFilesList.vue
@@ -57,13 +57,13 @@ export default defineComponent({
   list-style: none;
 
   &__file {
-    align-items: flex-start;
     display: flex;
+    align-items: flex-start;
 
     .file__image {
-      text-align: center;
       flex: 0 0 auto;
       margin: 0 var(--space-5) 0 0;
+      text-align: center;
 
       img {
         width: 3em;
diff --git a/packages/nuxt-typo3-theme/src/components/UiFrame/UiFrame.spec.js b/packages/nuxt-typo3-theme/src/components/UiFrame/UiFrame.spec.js
index 56cf85d..7992ff1 100644
--- a/packages/nuxt-typo3-theme/src/components/UiFrame/UiFrame.spec.js
+++ b/packages/nuxt-typo3-theme/src/components/UiFrame/UiFrame.spec.js
@@ -15,7 +15,7 @@ describe('UiFrame', () => {
       CeDiv
     },
     slots: {
-      default: `<CeDiv />`
+      default: '<CeDiv />'
     }
   }
 
@@ -52,7 +52,7 @@ describe('UiFrame', () => {
         CeDiv
       },
       slots: {
-        default: `<CeDiv />`
+        default: '<CeDiv />'
       }
     })
 
diff --git a/packages/nuxt-typo3-theme/src/components/UiGrid/UiContainer/UiContainer.vue b/packages/nuxt-typo3-theme/src/components/UiGrid/UiContainer/UiContainer.vue
index a3b9bc9..baa5ed5 100644
--- a/packages/nuxt-typo3-theme/src/components/UiGrid/UiContainer/UiContainer.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiGrid/UiContainer/UiContainer.vue
@@ -31,10 +31,10 @@ export default UiContainer as typeof UiContainer
 
 .container {
   width: 100%;
-  margin-left: auto;
   margin-right: auto;
-  padding-left: #{math.div($grid-gutter-width, 2)};
+  margin-left: auto;
   padding-right: #{math.div($grid-gutter-width, 2)};
+  padding-left: #{math.div($grid-gutter-width, 2)};
 
   @include media-query(sm) {
     max-width: map.get($container-max-widths, sm);
diff --git a/packages/nuxt-typo3-theme/src/components/UiGrid/UiRow/UiRow.vue b/packages/nuxt-typo3-theme/src/components/UiGrid/UiRow/UiRow.vue
index c2d05cc..0a869d1 100644
--- a/packages/nuxt-typo3-theme/src/components/UiGrid/UiRow/UiRow.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiGrid/UiRow/UiRow.vue
@@ -32,14 +32,14 @@ export default UiRow as typeof UiRow
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  margin-left: #{- (math.div($grid-gutter-width, 2))};
   margin-right: #{- (math.div($grid-gutter-width, 2))};
+  margin-left: #{- (math.div($grid-gutter-width, 2))};
 
   &.no-gutters {
     > .col,
     > [class*='col-'] {
-      padding-left: 0 !important;
       padding-right: 0 !important;
+      padding-left: 0 !important;
     }
   }
 }
diff --git a/packages/nuxt-typo3-theme/src/components/UiGrid/shared/_grid.scss b/packages/nuxt-typo3-theme/src/components/UiGrid/shared/_grid.scss
index 2e8c2fc..d008121 100644
--- a/packages/nuxt-typo3-theme/src/components/UiGrid/shared/_grid.scss
+++ b/packages/nuxt-typo3-theme/src/components/UiGrid/shared/_grid.scss
@@ -6,10 +6,10 @@
 
 @mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: math.div($gutter, 2);
-  padding-left: math.div($gutter, 2);
   margin-right: auto;
   margin-left: auto;
+  padding-right: math.div($gutter, 2);
+  padding-left: math.div($gutter, 2);
 }
 
 @mixin make-row($gutter: $grid-gutter-width) {
diff --git a/packages/nuxt-typo3-theme/src/components/UiHero/UiHero.vue b/packages/nuxt-typo3-theme/src/components/UiHero/UiHero.vue
index 13c0bb3..b9c8951 100644
--- a/packages/nuxt-typo3-theme/src/components/UiHero/UiHero.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiHero/UiHero.vue
@@ -93,8 +93,8 @@ export default UiHeroTheme as typeof UiHeroTheme
 
 .ui-hero {
   width: 100%;
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 
   &--left {
     justify-items: flex-start;
diff --git a/packages/nuxt-typo3-theme/src/components/UiLayer/UiLayer.vue b/packages/nuxt-typo3-theme/src/components/UiLayer/UiLayer.vue
index 551ba6c..93d1682 100644
--- a/packages/nuxt-typo3-theme/src/components/UiLayer/UiLayer.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiLayer/UiLayer.vue
@@ -111,9 +111,9 @@ $ui-layer-bg: $palette-white !default;
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: $z-index-overlay;
   width: 100%;
   overflow: auto;
   background-color: var(--ui-layer-bg);
-  z-index: $z-index-overlay;
 }
 </style>
diff --git a/packages/nuxt-typo3-theme/src/components/UiLayout/UiLayout.vue b/packages/nuxt-typo3-theme/src/components/UiLayout/UiLayout.vue
index 6002776..3fed5c1 100644
--- a/packages/nuxt-typo3-theme/src/components/UiLayout/UiLayout.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiLayout/UiLayout.vue
@@ -18,9 +18,9 @@ export default defineComponent({
 
 <style lang="scss">
 .ui-layout {
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
 
   &__content {
     flex: 1 0 auto;
diff --git a/packages/nuxt-typo3-theme/src/components/UiLinksList/UiLinksList.vue b/packages/nuxt-typo3-theme/src/components/UiLinksList/UiLinksList.vue
index d171f0e..ed8c55b 100644
--- a/packages/nuxt-typo3-theme/src/components/UiLinksList/UiLinksList.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiLinksList/UiLinksList.vue
@@ -33,11 +33,12 @@ export default defineComponent({
 @import '../../styles/shared';
 
 .ui-links-list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 
   &__link {
+    color: var(--color-text-primary-inverted);
     text-decoration: none;
 
     @include text(xl);
@@ -45,8 +46,6 @@ export default defineComponent({
     @include media-query(lg) {
       @include text(md);
     }
-
-    color: var(--color-text-primary-inverted);
   }
 
   &__item {
diff --git a/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue b/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
index ff929e4..c05983b 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
@@ -126,11 +126,11 @@ export default defineComponent({
   position: sticky;
   top: 0;
   left: 0;
+  z-index: $z-index-over;
   width: 100%;
   background: var(--ui-navbar-bg);
   border-bottom: 1px solid transparent;
   box-shadow: var(--box-shadow-base);
-  z-index: $z-index-over;
 
   @include media-query($ui-navbar-break-on) {
     border-color: var(--ui-navbar-border);
diff --git a/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationLanguage/UiNavigationLanguage.vue b/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationLanguage/UiNavigationLanguage.vue
index 33c58c6..d9024e0 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationLanguage/UiNavigationLanguage.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationLanguage/UiNavigationLanguage.vue
@@ -72,8 +72,8 @@ export default defineComponent({
   }
 
   .flag {
-    text-transform: uppercase;
     margin-right: var(--space-3);
+    text-transform: uppercase;
 
     @include media-query($ui-navbar-break-on) {
       margin-right: 0;
diff --git a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsDetail/UiNewsDetail.data.ts b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsDetail/UiNewsDetail.data.ts
index f682a09..3f525ef 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsDetail/UiNewsDetail.data.ts
+++ b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsDetail/UiNewsDetail.data.ts
@@ -29,9 +29,9 @@ export const detailElementMockup: NewsDetailElement = {
           columnSpacing: 10,
           border: { enabled: false, width: 2, padding: 0 },
           rows: {
-            '1': {
+            1: {
               columns: {
-                '1': {
+                1: {
                   publicUrl: 'https://via.placeholder.com/1366x695',
                   properties: {
                     title: null,
diff --git a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsElement/UiNewsElement.vue b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsElement/UiNewsElement.vue
index 6070984..7017023 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsElement/UiNewsElement.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsElement/UiNewsElement.vue
@@ -65,11 +65,11 @@ export default defineComponent({
 <style lang="scss">
 .ui-news-element {
   &__btn {
-    margin-top: auto;
-    min-width: auto;
     width: 100%;
-    padding-left: var(--space-15);
+    min-width: auto;
+    margin-top: auto;
     padding-right: var(--space-15);
+    padding-left: var(--space-15);
   }
 
   &__text {
diff --git a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsImage/UiNewsImage.vue b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsImage/UiNewsImage.vue
index 6ff2d4d..67e2c9a 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsImage/UiNewsImage.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsImage/UiNewsImage.vue
@@ -73,9 +73,9 @@ export default defineComponent({
   }
 
   &__image {
-    object-fit: cover;
     width: 100%;
     min-height: 304px;
+    object-fit: cover;
   }
 }
 </style>
diff --git a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsList/UiNewsList.vue b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsList/UiNewsList.vue
index 075a330..f822d24 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsList/UiNewsList.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNews/UiNewsList/UiNewsList.vue
@@ -33,10 +33,10 @@ export default defineComponent({
 <style lang="scss">
 .ui-news-list {
   &__article {
-    padding-bottom: var(--space-5);
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding-bottom: var(--space-5);
   }
 
   .ui-news-image__title {
diff --git a/packages/nuxt-typo3-theme/src/components/UiPagination/UiPagination.vue b/packages/nuxt-typo3-theme/src/components/UiPagination/UiPagination.vue
index 4818780..03aef27 100644
--- a/packages/nuxt-typo3-theme/src/components/UiPagination/UiPagination.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiPagination/UiPagination.vue
@@ -113,11 +113,11 @@ export default defineComponent({
   text-align: center;
 
   &__btn {
+    width: 100%;
+    min-width: 1.5em;
+    height: 1.5em;
     margin: 0 var(--space-2);
     padding: 0;
-    height: 1.5em;
-    min-width: 1.5em;
-    width: 100%;
   }
 
   &__more {
@@ -125,15 +125,15 @@ export default defineComponent({
   }
 
   &__list {
-    align-items: center;
     display: inline-flex;
+    align-items: center;
     justify-content: center;
     margin: 0;
 
     & > li {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
     }
   }
 }
diff --git a/packages/nuxt-typo3-theme/src/nuxt/module.ts b/packages/nuxt-typo3-theme/src/nuxt/module.ts
index ea35e66..9f82be0 100644
--- a/packages/nuxt-typo3-theme/src/nuxt/module.ts
+++ b/packages/nuxt-typo3-theme/src/nuxt/module.ts
@@ -2,7 +2,6 @@ import { Module } from '@nuxt/types'
 import { resolve } from 'path'
 import defu from 'defu'
 import type { TYPO3ThemeOptions } from './module.types'
-import fs from 'fs-extra'
 
 const defaults: TYPO3ThemeOptions = {
   sources: true,
diff --git a/packages/nuxt-typo3-theme/src/styles/core.scss b/packages/nuxt-typo3-theme/src/styles/core.scss
index 11e9a8b..a450a2b 100644
--- a/packages/nuxt-typo3-theme/src/styles/core.scss
+++ b/packages/nuxt-typo3-theme/src/styles/core.scss
@@ -205,8 +205,8 @@ table,
 tr,
 td,
 th {
-  border: 1px solid var(--color-primary);
   padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-primary);
 }
 
 th {
diff --git a/packages/nuxt-typo3-theme/src/styles/utils.scss b/packages/nuxt-typo3-theme/src/styles/utils.scss
index 66f2394..c77ed74 100644
--- a/packages/nuxt-typo3-theme/src/styles/utils.scss
+++ b/packages/nuxt-typo3-theme/src/styles/utils.scss
@@ -35,21 +35,21 @@
 
       &::before {
         position: static;
-        content: '\25CF';
+        margin-right: 1.25em;
+        color: currentColor;
         font-size: 0.5em;
         vertical-align: middle;
-        color: currentColor;
-        margin-right: 1.25em;
+        content: '\25CF';
       }
     }
   }
 
   ul,
   ol {
-    margin-left: 0;
-    padding-left: var(--space-2);
     margin-top: var(--space-4);
     margin-bottom: var(--space-4);
+    margin-left: 0;
+    padding-left: var(--space-2);
 
     li {
       margin-bottom: var(--space-2);
diff --git a/yarn.lock b/yarn.lock
index c524ef1..c5eec0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11126,10 +11126,10 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-macopedia@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.1.0.tgz#370bdb82ca0f756df71655ab581a954fb0a0127a"
-  integrity sha512-9+bNu3yq5V1b+wejIw8AJ7cbEP4SuqnMHdsxyP0o0prMp9GHPu5r83n561B9TRVJcGL8J7SYX9WQUGHBoK2/Rg==
+eslint-config-macopedia@^0.2.0-alpha.1:
+  version "0.2.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.2.0-alpha.1.tgz#3879d5631aaaa062d64df6b5c26d385563f70abb"
+  integrity sha512-azY25FN0OfbZArZ2xMYKGQD6HCQlvLqMd849ARwBsOzqQUpOYmd7X6Lj0+Ro70OqrkfWsgga3ZX0JzzZMBXbRQ==
   dependencies:
     "@nuxtjs/eslint-config" "^5.0.0"
     "@nuxtjs/eslint-config-typescript" "^5.0.0"
@@ -11151,6 +11151,7 @@ eslint-config-macopedia@^0.1.0:
     eslint-plugin-standard "^5.0.0"
     eslint-plugin-vue "^7.6.0"
     stylelint-config-css-modules "^2.2.0"
+    stylelint-config-rational-order "^0.1.2"
     stylelint-config-recommended-scss "^4.2.0"
     stylelint-config-standard "^20.0.0"