Stylelint not working out-of-the-box

[MatanelGordon]

Version

create-nuxt-app: v5.0.0

Steps to reproduce

What is Expected?

When running yarn lint:style should not throw warning when nothing changed.

What is actually happening?

When running yarn lint:style I get the following error:

Invalid Option: Invalid value "consecutive-duplicates-with-different-syntaxes" for option "ignore" of rule "declaration-block-no-duplicate-properties"

This means it doesn't recognize the used class names in vue's template.

How I solved it?

I updated the dependencies of the following packages:

 "stylelint": "^15.6.2"
 "stylelint-config-recommended-vue": "^1.4.0"
 "stylelint-config-standard": "^33.0.0"

Also, I removed stylelint-config-prettier.

the final stylelint should look like the following:

module.exports = {
  customSyntax: 'postcss-html',
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue'
  ],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {},
}

found the solution in a problem in stylelint's issues in addition to the migration guide for stylelint v15 which stated:

you may no longer need to extend Prettier's Stylelint config as there should be no conflicting rules

[josepcrespo]

I've found the same error after creating a new Nuxt project. Very ugly.

[MatanelGordon]

@josepcrespo did my solution work for you?

[MatanelGordon]

opened PR at #1029

[lanyun1103]

@MatanelGordon works for me, thx. I don't know why this problem still occurs today, it's really annoying

[ferdn4ndo]

I got the same issue today after a fresh installation using npx create-nuxt-app nuxtjs-tutorial:

> npx create-nuxt-app nuxtjs-tutorial
Need to install the following packages:
  [email protected]
Ok to proceed? (y) 
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in nuxtjs-tutorial
? Project name: anonymized
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests, Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? anonymized
? Version control system: Git
yarn run v1.22.19
$ prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix
.eslintrc.js
.github/dependabot.yml
components/NuxtLogo.vue
components/Tutorial.vue
components/VuetifyLogo.vue
content/hello.md
jest.config.js
layouts/default.vue
layouts/error.vue
nuxt.config.js
package.json
pages/index.vue
pages/inspire.vue
README.md
stylelint.config.js
tsconfig.json
$ eslint --ext ".js,.ts,.vue" --ignore-path .gitignore . --fix
$ stylelint "**/*.{css,scss,sass,html,vue}" --ignore-path .gitignore --fix

Invalid Option: Invalid value "consecutive-duplicates-with-different-syntaxes" for option "ignore" of rule "declaration-block-no-duplicate-properties"

components/NuxtLogo.vue
 16:1  ✖  Unknown rule media-query-no-invalid       media-query-no-invalid
 16:1  ✖  Unknown rule selector-anb-no-unmatchable  selector-anb-no-unmatchable

components/VuetifyLogo.vue
 6:1  ✖  Unknown rule media-query-no-invalid       media-query-no-invalid
 6:1  ✖  Unknown rule selector-anb-no-unmatchable  selector-anb-no-unmatchable

layouts/error.vue
 40:1  ✖  Unknown rule media-query-no-invalid       media-query-no-invalid
 40:1  ✖  Unknown rule selector-anb-no-unmatchable  selector-anb-no-unmatchable

6 problems (6 errors, 0 warnings)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

🎉  Successfully created project infotrem-web

  To get started:

	cd nuxtjs-tutorial
	yarn dev

  To build & start for production:

	cd nuxtjs-tutorial
	yarn build
	yarn start

  To test:

	cd nuxtjs-tutorial
	yarn test


  For TypeScript users. 

  See : https://typescript.nuxtjs.org/cookbook/components/
npm notice 
npm notice New minor version of npm available! 9.5.1 -> 9.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
npm notice Run npm install -g [email protected] to update!
npm notice 

This was the generated package.json content mentioned in the previous comment:

    ...
    "stylelint": "^14.13.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard": "^28.0.0",
    ...

I removed the stylelint-config-prettier line, updated the others, and removed the extends mention as suggested by @MatanelGordon. Then I ran yarn install (which bumped stylelint to 15.10.3), yarn dev and the error was gone:

> yarn dev
yarn run v1.22.19
$ nuxt
ℹ Parsed 1 files in 0.6 seconds                                                                                                                                                                                                       @nuxt/content 19:00:23

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.17.1                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                              7:00:24 PM
ℹ Initial build may take a while                                                                                                                                                                                                                 7:00:24 PM
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                                 19:00:24
✔ Builder initialized                                                                                                                                                                                                                            7:00:24 PM
✔ Nuxt files generated                                                                                                                                                                                                                           7:00:24 PM

✔ Client
  Compiled successfully in 12.90s

✔ Server
  Compiled successfully in 8.84s

No issues found.                                                                                                                                                                                                                                  7:00:39 PM
ℹ Waiting for file changes                                                                                                                                                                                                                       7:00:39 PM
ℹ Memory usage: 288 MB (RSS: 434 MB)                                                                                                                                                                                                             7:00:39 PM
ℹ Listening on: http://localhost:3000/                                                                                                                                                                                                           7:00:39 PM

So I can confirm that the issue is still present and that the solution proposed by @MatanelGordon works. Thank you!

[serkon]

I have updated "@nuxtjs/stylelint-module": "^5.1.0" in the package.json file, and the issue has been fixed when run npm run dev. HOWEVER, I removed the node_modules folder and the package-lock.json file, then ran npm install for a clean installation, and I encountered compile-time errors. I THINK this is not a good solution.

[MatanelGordon]

@serkon

Just to be clear, my solution refers to Nuxt V2 projects. However, packages like @nuxtjs/stylelint-module refer to Nuxt V3 projects which is a whole other thing to itself.

I encourage you to open an issue at @nuxtjs/stylelint-module's Github to fix the problem you're having.

[serkon]

@MatanelGordon

Thanks for your response, MatanelGordon. I'd like to clarify that I'm actually using Nuxt V2, and I encountered the same issue. It seems there might be some confusion regarding the @nuxtjs/stylelint-module package. While you mentioned it's for Nuxt V3, I believe it's also present in Nuxt V2. I'll still consider opening an issue on Github to address this, but I thought it's important to clarify the version I'm working with.

[xxhls]

this is the reason.

but it is supported by stylelint in official website.

update your version of stylelint to the latest can resolve the problem

[Dalerobi]

TS config was removed

[Dalerobi]

Changed to array

[joshuadabejero]

Thanks @MatanelGordon

I don't wanna go to Nuxt 3 yet since they are not done with Vuetify 3. This is a big help!