stylelint: Unknown word CssSyntaxError in import inside script tag in vue file

Maybe, you may need to configure customSyntax: "postcss-html" in your Stylelint config files. (see also the v14 migration guide)

If you want to check Vue files, stylelint-config-recommended-vue may help you.

“stylelint.config”: {},

You’ll need to remove this line. You’re setting an empty Stylelint configuration object for VSCode. The default is null, not {}.

I was struggling with this after upgrading, and @ybiquitous is correct. Also, if you need to use multiple syntaxes (e.g. if you have both SCSS and HTML-like files), you can use the overrides property as well.

In my .stylelintrc.js file I have the following:

customSyntax: "postcss-scss",
overrides: [
	{
	  "files": ["**/*.vue"],
	  "customSyntax": "postcss-html"
	},
],

From what I understand, postcss-syntax might be able to handle this, but I’ve already wasted enough time getting this to work so this is good enough for me lol.

“stylelint.config”: {},

You’ll need to remove this line. You’re setting an empty Stylelint configuration object for VSCode. The default is null, not {}.

Oh my god. You are a literal angel. Thank you thank you thank you!

Same thing happens with commented lines Not sure if it’s the same issue 😕

I’ll open to issue to discuss whether we can add more validation to the configuration object.

We surface an error already for CLI, e.g.

// .stylelintrc
{}

Gives:

Error: No rules found within configuration. Have you provided a "rules" property?

It seems the VS Code extension doesn’t surface the error, though. One for that issue tracker, I think.

Thank you thank you thank you!

No worries.

@jeddy3 @ybiquitous The CssSyntaxError doesn’t show in CLI – it will show in your editor:

I added a copy of my vscode config file to the repo.

@ybiquitous Which version of the vscode stylelint plugin are you using? I updated to the latest, updated my plugin configuration as advised in the migration guide, and it’s still not fixing on save or linting vue files correctly.

Relevant config snippets:

  "editor.formatOnSave": true,
  "stylelint.enable": true,
  "stylelint.config": {},
  "stylelint.snippet": ["css", "less", "postcss", "scss", "vue"],
  "stylelint.validate": ["css", "less", "postcss", "vue", "scss"],

and

  "editor.codeActionsOnSave": {
  "source.fixAll": true,
  "source.organizeImports": true
}

hello bro, What theme do u use? it is so nice.

Still having this issue in our year of the lord 2022. Having spent almost three hours looking through the docs for every extension and plugin, I’m not really sure what to do.

In vue3, I’m using vite-plugin-stylelint, which is included in vite.config. My stylelint config is as follows:

{
  "customSyntax": "postcss-html",
  "extends": [
    "stylelint-config-html",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-prettier/recommended"
  ],
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-scss"
    }
  ],
  "plugins": ["stylelint-order", "stylelint-prettier"],
  "rules": {
    "declaration-empty-line-before": "never",
    "font-family-name-quotes": "always-unless-keyword",
    "order/order": ["custom-properties", "declarations"],
    "order/properties-alphabetical-order": true,
    "prettier/prettier": true,
    "selector-class-pattern": [
      "/^[a-z]+(?:-[a-z]+)*(?:_{2}[a-z]+(?:-[a-z]+)*)?(?:-{2}[a-z]+(?:-[a-z]+)*)?$/",
      {
        "resolveNestedSelectors": true
      }
    ]
  }
}

I’ve added ‘vue’ to stylelint.validate in the extension settings.

Unfortunately my components are still flagging vue syntax as unrecognised AND stylelint-order is picking up errors but not fixing them unless I run npx stylelint --fix src/file/path, which is something that’s always been handled on save.

If anyone can shed light on what I’m doing wrong, I will owe you my undying loyalty and my soul

Huh, I didn’t even see the migration guide, but still @ybiquitous without your comment I wouldn’t even find the vue config. Adding vue config fixed the issue in vue files and adding scss config fixed commented lines in scss files.