chore: apply stylelint fix

.vscode/extensions.json

@@ -2,7 +2,8 @@
   "recommendations": [
     "vue.volar",
     "dbaeumer.vscode-eslint",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss"
   ],
   "unwantedRecommendations": [
     "vscode.typescript-language-features",

assets/details.scss

@@ -2,7 +2,6 @@
 $small-range: (767px);
 $medium-range: (1024px);
 $large-range: (1280px);
-
 $screen: 'only screen' !default;
 $landscape: '#{$screen} and (orientation: landscape)' !default;
 $portrait: '#{$screen} and (orientation: portrait)' !default;
@@ -12,7 +11,6 @@ $medium-and-small: '#{$screen} and (max-width: #{($medium-range)})' !default;
 $medium-only: '#{$screen} and (min-width:#{($small-range)}) and (max-width:#{($medium-range)})' !default;
 $x-medium-only: '#{$screen} and (min-width:#{($medium-range)}) and (max-width:#{($large-range)})' !default;
 $large-only: '#{$screen} and (min-width:#{($large-range)})' !default;
-
 $white-color: #ffff;
 
 %font-light,

components/Home/Home.vue

@@ -648,7 +648,7 @@ export default defineNuxtComponent({
   transform: translateX(-10px);
 }
 
-.right-3\/8 {
+.right-3 {
   right: 37.5%;
 }
 </style>

components/Layout/Footer.vue

@@ -72,10 +72,11 @@ export default defineNuxtComponent({
     width: 3.4rem;
     vertical-align: baseline;
   }
+
   @extend %font-medium;
 
-  @media (max-width: 991px) {
-    .site-footer__bottom .copyright {
+  @media (width <= 991px) {
+    .site-footer-bottom .copyright {
       width: 100%;
       margin-top: 0;
       text-align: center;

components/Layout/Header.vue

@@ -57,10 +57,12 @@ export default defineNuxtComponent({
   display: flex;
   flex-direction: row;
   overflow: visible;
+
   // height: 8.6rem;
   // min-height: 8.6rem;
   align-items: center;
   justify-content: space-between;
+
   // padding: 0.8rem 1.3rem;
 
   &::before,
@@ -77,7 +79,7 @@ export default defineNuxtComponent({
     }
   }
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     height: 6rem;
 
     & {
@@ -89,7 +91,7 @@ export default defineNuxtComponent({
     }
   }
 
-  @media only screen and (max-width: 767px) {
+  @media only screen and (width <= 767px) {
     #header #logo :deep(img) {
       max-height: 80px;
       max-width: 193px;

components/Layout/PoiLayout.vue

@@ -75,12 +75,13 @@ export default defineNuxtComponent({
 :deep(body) {
   color: $color-text;
   background-color: #fefefe;
-  padding: 1rem 1rem;
+  padding: 1rem;
   min-width: 21rem;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   line-height: 1.3;
   word-wrap: break-word;
+
   @extend %font-light;
 }
 

components/MainMap/FavoriteMenu.vue

@@ -120,7 +120,7 @@ export default defineNuxtComponent({
         @click="$emit('toggleFavorites')"
       >
         <FavoriteIcon :is-active="isModeFavorites" />
-        <span class="tw-hidden md:tw-inline favoriteTitle">{{
+        <span class="tw-hidden md:tw-inline favorite-title">{{
           $t('favorites.title')
         }}</span>
         <Badge
@@ -144,7 +144,7 @@ export default defineNuxtComponent({
           class="tw-text-zinc-500 tw-mr-2"
           size="sm"
         />
-        <span class="tw-hidden md:tw-inline favoriteTitle">
+        <span class="tw-hidden md:tw-inline favorite-title">
           {{ $t('favorites.menu_notebook') }}
         </span>
       </button>
@@ -171,8 +171,8 @@ export default defineNuxtComponent({
 </template>
 
 <style lang="scss" scoped>
-.favoriteTitle {
-  @media (max-width: 860px) {
+.favorite-title {
+  @media (width <= 860px) {
     @apply tw-hidden;
   }
 }

components/Map/Map.vue

@@ -381,6 +381,7 @@ export default defineNuxtComponent({
 #map .maplibregl-ctrl-group > button,
 #map .maplibregl-ctrl-group > button:not(:disabled) {
   border: none;
+
   @apply tw-text-sm tw-font-bold tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none tw-w-11 tw-h-11;
   @apply focus:tw-rounded-full focus:tw-shadow-md focus:tw-outline-none focus-visible:tw-bg-zinc-100;
   @apply hover:tw-bg-zinc-100;

components/PoisDetails/FieldsGroup.vue

@@ -154,6 +154,7 @@ export default defineNuxtComponent({
 .block {
   margin-bottom: 3rem;
 }
+
 @media print {
   .block {
     margin-bottom: 0.5rem !important;

components/PoisDetails/Mapillary.vue

@@ -41,6 +41,7 @@ div {
 iframe {
   width: 100%;
   height: 346px;
+
   @apply tw-bg-gray-100;
 }
 </style>

components/PoisDetails/PoiDetails.vue

@@ -324,7 +324,7 @@ export default defineNuxtComponent({
   margin: auto;
 }
 
-@media (max-width: 991px) {
+@media (width <= 991px) {
   .detail-wrapper {
     flex-direction: column;
 

components/PoisDetails/Route/RouteMap.vue

@@ -155,7 +155,7 @@ export default defineNuxtComponent({
   }
 }
 
-@media (max-width: 991px) {
+@media (width <= 991px) {
   .detail-wrapper {
     flex-direction: column;
 

components/UI/CookiesConsent.vue

@@ -61,6 +61,7 @@ export default defineNuxtComponent({
 </template>
 
 <style>
+/* stylelint-disable selector-class-pattern */
 .cookie__bar__buttons__button--accept,
 .cookie__bar__buttons__button--decline,
 .cookie__bar__buttons__button--accept:hover,

components/UI/IconsBar.vue

@@ -34,7 +34,7 @@ ul {
   }
 }
 
-@media (max-width: 991px) {
+@media (width <= 991px) {
   ul {
     text-align: center;
   }

nuxt.config.ts

@@ -18,7 +18,6 @@ export default defineNuxtConfig({
       '@fortawesome/vue-fontawesome',
     ],
   },
-  buildModules: ['@nuxtjs/stylelint-module'],
   components: false,
   css: ['@fortawesome/fontawesome-svg-core/styles.css'],
   devtools: { enabled: true },
@@ -66,7 +65,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxt/image-edge',
     '@pinia/nuxt',
-    async (options, nuxt) => {
+    async (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', config =>
         // @ts-expect-error: Do we really need to extend the config ?
         config.plugins.push(vuetify()))

package.json

@@ -19,7 +19,7 @@
     "start:cypress": "CONFIG=vidos-config-empty.json yarn build-fixture && yarn run cypress open",
     "lint": "yarn lint:js && yarn lint:style",
     "lint:js": "eslint .",
-    "lint:style": "stylelint --cache **/*.{vue,css}",
+    "lint:style": "stylelint --cache **/*.{vue,css,scss}",
     "test": "yarn test:cypress && yarn test:histoire",
     "test:cypress": "yarn build-fixture && yarn run cypress run",
     "test:histoire:report": "yarn build:histoire && npx --yes -- reg-cli __screenshots__/current __screenshots__/actual __screenshots__/diff -R __screenshots__/diff/index.html -J __screenshots__/diff/index.json --thresholdPixel 5 --matchingThreshold 0.3 --extendedErrors || exit 0",
@@ -97,8 +97,8 @@
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
     "stylelint": "^16.1.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard-scss": "^13.0.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3",
     "vite-plugin-vuetify": "^1.0.2",

pages/category/[id].vue

@@ -153,12 +153,13 @@ export default defineNuxtComponent({
 .page-index {
   color: $color-text;
   background-color: #fefefe;
-  padding: 1rem 1rem;
+  padding: 1rem;
   min-width: 21rem;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   line-height: 1.3;
   word-wrap: break-word;
+
   @extend %font-light;
 }
 </style>

pages/embedded.vue

@@ -189,6 +189,7 @@ export default defineNuxtComponent({
 </template>
 
 <style scoped>
+/* stylelint-disable selector-id-pattern */
 body,
 #__nuxt,
 #__layout {

pages/index.vue

@@ -208,6 +208,7 @@ export default defineNuxtComponent({
 </template>
 
 <style scoped>
+/* stylelint-disable selector-id-pattern */
 body,
 #__nuxt,
 #__layout {

pages/poi/[id]/details.vue

@@ -178,17 +178,19 @@ export default defineNuxtComponent({
 .page-details {
   color: $color-text;
   background-color: #fefefe;
-  padding: 1rem 1rem;
+  padding: 1rem;
   min-width: 21rem;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   line-height: 1.3;
   word-wrap: break-word;
+
   @extend %font-light;
 }
 </style>
 
 <style>
+/* stylelint-disable selector-id-pattern */
 body,
 #__nuxt,
 #__layout {

pages/pois/[ids]/map.vue

@@ -119,6 +119,7 @@ export default defineNuxtComponent({
 </template>
 
 <style scoped>
+/* stylelint-disable selector-id-pattern */
 body,
 #__nuxt,
 #__layout {

stylelint.config.js

@@ -1,6 +1,13 @@
 /** @type {import('stylelint').Config} */
 
 export default {
-  $schema: 'https://json.schemastore.org/stylelintrc.json',
-  extends: ['stylelint-config-recommended-vue', 'stylelint-config-recommended-vue/scss'],
+  extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
+  rules: {
+    'scss/at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind'],
+      },
+    ],
+  },
 }

yarn.lock

@@ -3041,8 +3041,8 @@ __metadata:
     sass: ^1.63.4
     sass-loader: ^13.3.2
     stylelint: ^16.1.0
-    stylelint-config-recommended-scss: ^14.0.0
     stylelint-config-recommended-vue: ^1.5.0
+    stylelint-config-standard-scss: ^13.0.0
     tailwindcss: ^3.3.2
     typescript: ^5.1.3
     url-slug: ^4.0.1
@@ -14200,6 +14200,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylelint-config-standard-scss@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "stylelint-config-standard-scss@npm:13.0.0"
+  dependencies:
+    stylelint-config-recommended-scss: ^14.0.0
+    stylelint-config-standard: ^36.0.0
+  peerDependencies:
+    postcss: ^8.3.3
+    stylelint: ^16.1.0
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+  checksum: 87191c0b59c705417d2a646cd0be091c60b54b3af5357815e37c0314cba05996a777a4a57c4e236e896a427ae4f7989daf31a267907716e88fbdd863efbfae73
+  languageName: node
+  linkType: hard
+
+"stylelint-config-standard@npm:^36.0.0":
+  version: 36.0.0
+  resolution: "stylelint-config-standard@npm:36.0.0"
+  dependencies:
+    stylelint-config-recommended: ^14.0.0
+  peerDependencies:
+    stylelint: ^16.1.0
+  checksum: f08ab93b5bfd92f81555cbbbccb8768b301fb2f225f478d77ac010d7f41aa04153bc9f7f211d7f6f2c9b94e8986fe6727c514a9df9af50abfb567d73f9c8ed72
+  languageName: node
+  linkType: hard
+
 "stylelint-scss@npm:^6.0.0":
   version: 6.0.0
   resolution: "stylelint-scss@npm:6.0.0"