nuxt-modules / stylelint

Stylelint module for Nuxt.js
MIT License
64 stars 9 forks source link

Not showing errors when running dev mode #103

Open orsileonel opened 7 months ago

orsileonel commented 7 months ago

Hello, thank you for this great module!

I don't know if this is the correct place to ask for this, but I have the following issue which was working before.

Everything is working correctly regarding the configuration of my stylelint, it is showing the errors based on my rules when running yarn lint:style command which basically executes stylelint \"**/*.{vue,html,css,pcss,scss,sass}\":

Example:

image

It also shows me the errors in VSCode:

image

Now the issue comes when I run yarn dev, it executes the webpage without displaying any errors, but if I remove the lang="postcss" from the <style> it does display the window with the errors (although it does only with the .vue files, not the ones in the .pcss ones):

image

package.json

"devDependencies": {
    "@babel/eslint-parser": "^7.23.3",
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/stylelint-module": "^5.1.0",
    "eslint": "^8.53.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.18.1",
    "eslint-plugin-vuejs-accessibility": "^2.2.0",
    "nuxt": "^3.8.1",
    "postcss-html": "^1.5.0",
    "postcss-import": "^15.1.0",
    "postcss-nested": "^6.0.1",
    "postcss-scss": "^4.0.9",
    "stylelint": "^15.11.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }

nuxt.config.js

import eslintPlugin from 'vite-plugin-eslint'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: true
  },
  vite: {
    plugins: [
      eslintPlugin({
        failOnWarning: true
      })
    ]
  },
  modules: ['@nuxtjs/stylelint-module'],
  css: ['@/assets/css/main.pcss'],
  stylelint: {
    lintOnStart: false,
    failOnError: false,
    failOnWarning: false
  },
  postcss: {
    plugins: {
      'postcss-import': true,
      'postcss-nested': {}
    }
  }
})

.stylelintrc.cjs

module.exports = {
  extends: ["stylelint-config-recommended-vue"],
  overrides: [
    {
      files: ["*.{vue,html}", "**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["*.pcss", "**/*.pcss"],
      customSyntax: "postcss-scss",
    },
  ],
  customSyntax: "postcss-html",
  rules: {
    ...
  },
};

Is there any way to fix this so that when I use development mode it displays the errors like when I execute the linter manually?

Thank you!

orsileonel commented 7 months ago

Now it seems to be working but only with the index.vue file, when adding the following to the stylelint config in nuxt.config.js:

include: ['*.{vue,pcss}', '**/*.{vue,pcss}']

Seems to not do anything, when it should lint .vue and .pcss files under assets, layouts, pages, and components folders:

image