Fix `overrides.files` in config for glob patterns like `*.vue`

What steps are needed to reproduce the bug?

Well, I’ll try to be clear here as it is not easy to explain…

I created a simple repo that you can clone to reproduce the bug: https://github.com/sronveaux/stylelint-bug-report

Here’s the smallest code base I managed to get to and that can be used to reproduce the bug:

filesToLint/
|    |
|    ------> test.css
|    ------> test.html
|
stylelintInstall/
|    |
|    ------> node_modules/
|    ------> package.json
|
.stylelintrc

The .stylelintrc content is very simple:

{
  "extends": [
    "stylelint-config-standard"
   ],
  "overrides": [
    {
      "files": ["*.html", "**/*.html"],
      "customSyntax": "postcss-html"
    }
  ]
}

If I get to the stylelintInstall directory and run the following commands:

npx stylelint ../filesToLint/*.css
npx stylelint ../filesToLint/*.html

everything works as expected. However, if configBasedir is added:

npx stylelint --config-basedir . ../filesToLint/*.html

The .html files cannot be linted anymore and the following message is returned:

When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-html", and use the "customSyntax" option

../filesToLint/test.html
 1:1  ✖  Unknown word  CssSyntaxError

This can be made working back again by changing the content of the .stylelintrc file like this:

{
  "extends": [
    "stylelint-config-standard"
   ],
  "overrides": [
    {
      "files": ["../*.html", "../**/*.html"],
      "customSyntax": "postcss-html"
    }
  ]
}

However this manual patch doesn’t work when used in conjuction with extensions like stylelint-config-standard-vue, not to mention how it fails when used through the VSCode extension…

What Stylelint configuration is needed to reproduce the bug?

{
  "extends": [
    "stylelint-config-standard"
   ],
  "overrides": [
    {
      "files": ["*.html", "**/*.html"],
      "customSyntax": "postcss-html"
    }
  ]
}

How did you run Stylelint?

CLI

Which version of Stylelint are you using?

14.16.0 under Windows 11

What did you expect to happen?

Shouldn’t the glob patterns we write in the .stylelintrc file be relative to this config file instead of being interpreted differently when used in conjunction with --config-basedir ?

What actually happened?

It seems like the file matching in the overrides part of the config is dependent on the config-basedir as the problem can be solved by changing the glob pattern written in the overrides part.

Does the bug relate to non-standard syntax?

No response

Proposal to fix the bug

Not sure exactly and haven’t read the source code long enough, but this could be linked to this part:

https://github.com/stylelint/stylelint/blob/e30ec863f8bc1d5ed87c23e3c5a554a01bc4350b/lib/augmentConfig.js#L106-L113

Here we can see that configDir (which is in fact configBasedir) is passed twice to the augmentConfigBasic function.

https://github.com/stylelint/stylelint/blob/e30ec863f8bc1d5ed87c23e3c5a554a01bc4350b/lib/augmentConfig.js#L34-L63

Then augmentConfigBasic seems to call applyOverrides with the rootConfigDir parameter which perhaps should be the directory where the config file is and not configBasedir…

[sronveaux]

Many thanks for the fast investigation here!

I’m not 100% sure solving this bug will solve the reported problem but as I’ve said earlier, I haven’t delved in the source code enough to fully understand all the consequences of such a change…

What you’ve found clearly makes sense and the proposed solution would be more logical for sure ! I’ll be very happy if the detailed report helps to make stylelint better!

Thanks again!

[ybiquitous]

Thanks. I found a bug in the customSyntax resolution logic.

I believe customSyntax or --custom-syntax also should be resolved from configBasedir like plugins or extends, but actually not. This should be a bug.

https://github.com/stylelint/stylelint/blob/e30ec863f8bc1d5ed87c23e3c5a554a01bc4350b/lib/cli.js#L390

https://github.com/stylelint/stylelint/blob/e30ec863f8bc1d5ed87c23e3c5a554a01bc4350b/lib/getPostcssResult.js#L95

We need to pass configBasedir to getModulePath() like this:

https://github.com/stylelint/stylelint/blob/e30ec863f8bc1d5ed87c23e3c5a554a01bc4350b/lib/augmentConfig.js#L155

So, I will try writing a patch to fix the bug within a few days.

Or if you are interested in the contribution, please consider contributing.

Thank you so much for the detailed report!