PostCSS Language Support

PostCSS Language Support adds support for modern and experimental CSS within Visual Studio Code.

This extension is applied to .css, .pcss and .postcss files. It also applies to the following contexts:

• HTML <style> elements.
• Markdown css and pcss code blocks.
• Marko style blocks when paired with the Marko Syntax Highlighting extension.

Installation

1. Open the command palette and select Extensions: Install Extensions
2. Search for PostCSS Language Support
3. Click Install

Adding Support for Emmet

1. Open the command palette and select Preferences: Open Settings (JSON)
2. Add the following configuration:

{
  "emmet.includeLanguages": {
    "postcss": "css"
  }
}

Differences from CSS Language Support

PostCSS Language Support is derived from the native CSS Language Support built into Visual Studio Code, which is itself derived from the native CSS Language Support for Atom. This extension includes the following changes:

Modern CSS Features

• Support is added for nesting rules, including the nesting selector (&), the nesting at-rule (@nest), and @media and @supports at-rules.
• Support is added for the :blank pseudo-class, as well as the :is() and :where functional pseudo-classes.
• Support is added for prefers-color-scheme and prefers-reduced-motion within media queries.
• Support is added for the place-self property.
• Support is added for the env() function, as well as the hwb(), lab(), and lch() color functions.
• Support is added for the emoji, fangsong, and system-ui font families.
• Support is added for the border-block, border-inline, margin-block, margin-inline, padding-block, and padding-inline logical properties.
• Support is added for @custom-media and @custom-selector at-rules.

Syntactical Looseness

• Support is added for nesting @extend and @extends at-rules.
• Support is added for functional selectors (%placeholder).
• Support is added for the CSS Modules :global rule, as well as the composes declaration, and also @value declarations.
• Support is added for sass $variables.
• Support is added for single-line comments (//).
• Support is added for @custom-env at-rules.
• Support is added for unknown nesting at-rules, as well as unknown @custom- prefixed at-rules.