Support CSS nesting

[BenjaminAster]

The CSS Nesting Module 1 "introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets". Chromium's "Implement css-nesting-1" issue is the second most starred CSS issue on Chromium Monorail. Chromium has just implemented experimental CSS nesting support and the CSSWG confirmed that the syntax will not change any more. Even though CSS nesting is not yet supported in any stable version of a mayor browser, it is already usable with a PostCSS plugin, and, as mentioned above, in Chrome Canary with experimental web platform features enabled.

Related issue on microsoft/vscode: #147824

[GauravB159]

Is anyone working on this? I'm not sure how big a change it would be, but I'd love to contribute

[nilaallj]

NB: Despite the claim that the current version of the CSS Nesting Module 1 is the final one, the spec got a new draft version published on October 28. That seems to be the version Chrome Canary uses.

The main difference in the draft version is that the @nest rule has been dropped in favour of operators (>, ~ and +) and selector characters (., # and :), meaning that the ampersand is only necessary when a nested selector does not begin with its parent selector. This is quite a significant change from the earlier version.

A separate PostCSS plugin has been released for the new spec.

Since the latest version of the spec is still in draft stage, this is probably not the right time to start working on an implementation in VS Code. However, since nesting likely will radically change how many developers write CSS, this should definitely not be slept on once it reaches the stable browsers.

[samwillis]

CSS Nesting was shipped in Chrome 112 which will be going stable next week (29th March).

It is also in the current Safari Tech Preview.

All indications are the spec is final with it being in both Chrome and highly likely to ship in the next stable Safari.

[romainmenke]

I think this is done, but maybe I overlooked something in https://github.com/microsoft/vscode-css-languageservice/pull/345

Maybe ok to close and people can report anything missing as a new issue?

[altrusl]

CSS nesting works in VS Code but syntax highlighting is broken

[Stan-Stani]

Shouldn't nesting of a keyframe have an error highlight? I was scratching my head for a long time until I tried it without nesting and it worked in Chrome and Firefox.

.App {
  background: darkolivegreen;

  .description {
    overflow-y: auto;
    height: 125px;
  }

  .result {
    height: 1.5em;
    opacity: 0;
  }

  @keyframes anim {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .fadeIn {
    animation-name: anim;
    animation-duration: 10s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
  }
}

[aeschli]

Closing as nesting is implemented in this service. VS Code still has highlight issues but that's unrelated to the service.

@Stan-Stani You can file a separate issue, but in general we are very tolerant when validating, leaving it to linters to do the full validation. Correctly validating CSS is quite challenging, and users don't like false positives