CSS Nesting Syntax Highlighting

[!NOTE] This extension's code was merged into the official VSCode app in VSCode PR 330193 from vscode-css PR 47 and is no longer needed. If you have it installed, you may now uninstall it and use the native CSS syntax from VSCode.

Overview

All modern browsers support CSS nesting (Can I Use), but Visual Studio Code doesn't currently have CSS nesting syntax highlighting. This extension rectifies that by updating the CSS syntax highlighting to include nesting (and more).

To learn more about CSS Nesting, see MDN.

The core CSS syntax file this extension updates can be found in the official vscode repo.

CSS Nesting Example

.example {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* The browser parses this as: */
.example {
  text-decoration: none;
}
.example:hover {
  text-decoration: underline;
}

Other Features

Includes syntax highlighting for @container

/* Nested @container example */
@container summary (width > 400px) {
  @container (min-width: 800px) {
    .card {
      margin: 50px;
    }
    @container (min-width: calc( var(--width) * 1rem)) {
      .card {
        margin: 0;
      }
    }
  }

Includes function syntax highlighting for 'at-rules', such as in @media

/* calc() function example */
@media (max-width: calc( (768 / 16) * 1rem )) {
  .example {
    margin: 0;
  }
}

Installation

Note: You may need to reload VSCode after installing this extension for it to take effect.

Search for CSS Nesting Syntax Highlighting in the VSCode's Extensions Marketplace panel or click the install button on the CSS Nesting Syntax Highlighting Marketplace page.

You can also manually install the extension by cloning the github repository into ~/.vscode/extensions and restarting the VSCode editor.

Companion Theme

CSS Nesting Syntax Highlighting works great with the Cassidy Dark Theme.

What's New?

View the Changelog.

Known Issues

• When nested, a few obscure #tag-names are overridden by the same #property-names. Those names are:
  • HTML tags: content, font, image, marquee, mask, shadow, style.
  • SVG tags: color-profile, cursor, filter, line, text.

Issues?

If you come across any issues, please feel free to report them here. You can also create a pull request to add any improvements.