Skip to content

Latest commit

 

History

History
95 lines (70 loc) · 3.13 KB

README.md

File metadata and controls

95 lines (70 loc) · 3.13 KB
Raw

CSS Nesting Syntax Highlighting

Table of Contents
Overview
CSS Nesting Example
Other Features
Installation
Companion Theme
What's New
Known Issues
Reporting Issues

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.