Render css() definitions as nested css - #896

Description

css() now renders nested definitions as nested css, as asked in #578.

A definition already looks nested in Dart and was flattened on the way out — one selector per rule. Now the nesting survives into the stylesheet:

css('.someclass', [
  css('&').styles(width: 100.px),
  css('&:hover').styles(backgroundColor: Colors.blue),
  css('p').styles(fontSize: 2.em),
  css.media(MediaQuery.screen(minWidth: 1000.px), [css('&').styles(width: 200.px)]),
])

.someclass {
  width: 100px;
  &:hover {
    background-color: blue;
  }
  p {
    font-size: 2em;
  }
  @media screen and (min-width: 1000px) {
    width: 200px;
  }
}

Two details fell out of it:

• A child whose selector is just & is the parent, so what it holds is written into the parent's block instead of opening one of its own. That keeps css('.x', [css('&').styles(...)]) — the shape the docs use and jaspr_content builds on — rendering the same css as before.
• A rule with neither properties nor children renders nothing rather than an empty block, since with nesting a parent has to open a block for its children even when it says nothing itself.

resolve is untouched and still flattens. It is not exported from package:jaspr/dom.dart, and jaspr_content uses it to wrap every selector of its content theme in :where(...):not(...), which still works — its tests pass unchanged.

What changes for users

The rendered css is equivalent for a single parent selector. It is not equivalent when the parent is a selector list: a nested selector resolves through :is(), which takes the specificity of its most specific argument, where the flattened form kept each selector's own. Worth a line in the release notes.

Anything that asserts on rendered css output will see the new shape. In this repo that was one test.

Type of Change

• ✨ New feature or improvement

Tests

test/dom/styles/rules_test.dart, seven new cases: a nested selector stays nested, a & child folds into the parent, three levels deep, a nested at-rule stays inside the rule, a parent with only children still opens its block, a rule with nothing in it renders nothing, and resolve still flattens.

test/dom/styles/nested_css_browser_test.dart, four new cases that put the rendered css in a <style> element and read getComputedStyle back, so the claim is that Chrome applies it rather than that the string looks right: a nested class selector, a nested pseudo-class, a nested @media that wins over the outer declaration, and three levels deep.

dart test -p vm (188) and dart test -p chrome (35) are green in packages/jaspr, and dart test (75) in packages/jaspr_content.

Fixes #578