Installing recommended VS Code extensions disables default CSS IntelliSense

[enchained]

Set up VS Code
By default, VS Code does not recognize postcss syntax, you need to install PostCSS Language Support extension to enable syntax highlighting and suppress variables ($variable) errors.

To get CSS variables autocomplete, install CSS Variable Autocomplete extension. Then create .vscode/settings.json file in the root folder of your project with the following content: <...>

Before following this instruction, I had only HTML CSS Support, IntelliSense for CSS class names in HTML and CSS Modules extensions installed. After installing both PostCSS Language Support and CSS Variable Autocomplete I noticed, that now there are only --var autocomplete suggestions in *.module.css files when I start typing things like display: flex.

I found this https://stackoverflow.com/questions/61171247/vscode-autocomplete-doesnt-work-for-css-files
Looks like PostCSS Language Support extension changes default language mode from CSS to PostCSS for *.css files? Cause it breaks the default IntelliSense.

There is also a discussion about PostCSS Language Support extension not being up-to-date or relevant anymore csstools/postcss-language#16

What would be the preferable solution to use, especially together with Mantine? And maybe some additional info about this should be added to the Mantine docs?

Solutions I found:

• Changing back to CSS at the right bottom corner (probably there is some setting to override this).
• Installing PostCSS Intellisense and Highlighting extension alongside it.
• Replacing it with PostCSS Intellisense and Highlighting extension completely.

[rtivital]

The documentation will be updated to use PostCSS Intellisense and Highlighting in the next minor version