How to parse .css files as PostCSS in vscode?

Question

I'm using PostCSS in a project, and the extension of the CSS files is .css so when I open one, it will indicate bunch of errors (due to the syntax of PostCSS).

I have tried installing stylelint, PostCSS syntax extensions etc... but nothing worked.

If I change the extension to .scss, it works fine but I'm not using SASS.

What should I do to remove the parsing errors in the .css files?

Update:

File example with PostCSS extension, as you can see bad coloration and no errors highlighted

If I change the file extension to .scss :

Update 2 :

I tried with this plugin, and it works like a charm : https://marketplace.visualstudio.com/items?itemName=mhmadhamster.postcss-language

Answer 1

Try this extension for VSCode: https://marketplace.visualstudio.com/items?itemName=ricard.PostCSS

Add the following line in your user settings and you should be good to go:

"files.associations": {
   "*.css": "postcss"
}

Answer 2

Just a tiny tweak to the @Jiib answer...

"files.associations": {
   "*.css": "postcss"
}

add that to the settings.json file...

Then add this plugin... Language-PostCss

This plugin wants you to make the css files .pcss or .postcss however adding the file association automatically does that for us.

Good times...