[Solved] VSCode: Browserslist configuration changes are only detected within .stylelintrc.json

[Clearmist]

Hello!

Using the default versions from npm I have tested to see where stylelint-no-unsupported-browser-features obtains its browser list configuration.

• ./browserslist (The sample in this repos' README)
• .browserslistrc (The best practice listed in the browserslist repo)
• .stylelintrc.json

The browserlist configuration is read only from the stylelint config file.

This stylelint configuration works:

{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true, {
        "browsers": [
          "ie < 8"
        ]
      }
    ]
  }
}

This stylelint configuration combined with any browserslist config file does not work:

{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": true
  }
}

[ismay]

Hi @Clearmist. This tool does not do its own resolution of the browserslist config. Instead it relies on https://github.com/anandthakker/doiuse to tackle that, which in turn uses browserslist.

This plugin just wraps doiuse so that it can be used with stylelint. For the configuration options for browserslist check out https://github.com/browserslist/browserslist. The tests for this plugin also use browserslist's env var config, which works just fine.

For me configuration via a browserslist works well and I don't see any open issues for doiuse that would lead me to believe that they're having any issues resolving the browserslist config (and the current version has been out for a while). So I'm inclined to believe that you're running into a configuration error.

If it does seem like you've uncovered a bug then it's likely it's with doiuse, as that's where the resolution of the browserslist happens. If you believe otherwise, then please submit a PR with a failing test that demonstrates the bug. I'll close this issue for now, let me know if anything comes up!

[Clearmist]

Ah, I should have tried running npx stylelint from the command line before submitting this request. I'm sorry. :) I am using the VSCode Stylelint extension (stylelint.vscode-stylelint).

Running on the command line I see your plugin correctly reporting the messages, but when it comes to using the extension this plugin doesn't have its messages parsed by stylelint unless I explicitly set the browsers in .stylelintrc.json. Other plugins work as expected. It's so weird!

Probably a fault with the extension, but I'm unsure how exactly. I'll go open an issue over there. Thank you for taking the time to write an understandable and polite response. :)

[ismay]

No worries, good to know that it works well when used directly. I've seen something similar to what you're experiencing happen with vscode's eslint extension.

If I remember correctly it uses its own bundled version of eslint, not the one from the project it's linting. Which can cause issues with resolving project specific files like say a browserslist. I wouldn't be surprised if that same thing is happening with your vscode stylelint extension.

[Clearmist]

In case anyone finds this (having come across the same issue) and is interested in the cause: The browserslist configuration file is read only once at VSCode start-up.

Adding browsers directly into the "stylelint-no-unsupported-browser-features" configuration options takes precedence.

So when you want to change the contents of browserslist you need to either use the "stylelint-no-unsupported-browser-features" configuration options or restart VSCode so the browserslist config file can be read again.

[ismay]

Thanks for taking a look at this. Would probably be good to add this to a "Known issues" section in the readme. Just for discoverability. If you feel like submitting a PR that would be more than welcome!

[Clearmist]

#205
I've created a pull request :)