Vscode: CSSnext & preCSS Support

[DenisValcke]

Please add CSSnext & preCSS Support
When using cssnext in combination with precss a lot of warning are given concerning expected braces or semicolons when nesting. This leads to a lot of red stripes and color theme being completely off.

Configuration is:
CSSnext (through PostCSS)

• PreCSS for Sass-like nesting

[thomas-darling]

Yeah, we would _really_ like this too...

Obviously it makes no sense to talk about adding syntax support for PostCSS, as that is nothing more than a task runner and could theoretically support any syntax, but it would be really great to have an option to at least enable support for the subset of future css syntax supported by CSSNext (http://cssnext.io/features).

Our design/css/html guys work in Sublime Text and they absolutely insist on using PostCSS with CSSNext - which is fine, except that the mess of red squiggles the rest of us see in VS Code is really getting in the way of collaboration. Is this something you would consider supporting in the near future?

[egamma]

@thomas-darling Does it help to disable the built-in CSS validation using "css.validate": false and then use one of the CSS linter extensions, e.g., https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint?

[texastoland]

The former will certainly help but the highlighting is off too. I see this as the domain for a community extension.

[FAQinghere]

Has there been any progress on this front by chance?

[texastoland]

I used https://marketplace.visualstudio.com/items?itemName=ricard.PostCSS.

[japboy]

I need proper cssnext support 👍

[watlandc]

Adding a user setting that allows you to enable future CSS spec validation, would be a helpful and logical way to support CSSNext.

[egamma]

Assigning to @aeschli, there are some recent CSS improvements.

[aeschli]

Recently I added support for variables, for @apply and custom property to the base CSS support.

In general we only adopt css specs when they become widely adopted and supported by all the major browsers. There are a lot of proposed specs out there. You can imagine that it's takes a lot of time to study, adopt the parser and get it right.

Please file specific requests for features to support. The current issue (add support for CSSNext and preCSS) is too broad to take action on.

Also, if you don't want to wait: Write an extension that adds the missing features. Or make a pull requests. https://github.com/Microsoft/vscode-css-languageservice is the repository for the css language support.

[ahmadnassri]

using the ricard.PostCSS plugin provides correct syntax highlighting for .pcss, .postcss files.

you can then associate .css files to be treated as .pcss files in your settings, and you'll get the correct syntax highlighting:

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

Note: this method will completely disable IntelliSense & validation, as postcss is not a known target.

[aeschli]

As mentioned, please file specific issues if you want the css support to catch up on a new css spec.