search

hudochenkov / postcss-styled-syntax

PostCSS syntax for CSS-in-JS like styled-components
MIT License
74 stars 4 forks source link

Usage with VSCode plugin #16

Closed timhettler closed 1 year ago

timhettler commented 1 year ago

Hello, I am trying to get in-editor highlighting to work with Stylelint VSCode and this plugin. When I add typescriptreact to the stylelint.validate configuration, the entire file is checked, not just the styling blocks.

My stylelint config:

module.exports = {
  extends: [
    "stylelint-config-standard"
  ],
  customSyntax: "postcss-styled-syntax",
}

Please let me know if you have any advice on how to get in-editor linting to work!

hudochenkov commented 1 year ago

I don't use Stylelint VS Code extension. So I can't say anything for sure.

Stylelint does run on a whole file always. This package helps Stylelint identify styles blocks, and then Stylelint rules are run on these blocks.

Is there an error or an issue you're experiencing?

timhettler commented 1 year ago

I think I've managed to get this working. I had to manually add the custom syntax to the plugin settings (it wasn't able to infer from the .stylelintrc file). For anyone else with this problem, here are the workspace settings I edited:

"stylelint.customSyntax": "postcss-styled-syntax",
"stylelint.validate": [
  "typescriptreact",
  "javascriptreact"
]
hudochenkov commented 1 year ago

I'm not sure what was the issues. Official Stylelint VS Code extension works without "stylelint.customSyntax" VS Code settings, if customSyntax is specified in the .stylelintrc. In initial message I don't see any issues.