Re: [csswg-drafts] [css-cascade] [css-nesting] Figure out whether we're fine with "shifting up" bare declarations after rules (#8738)

Oh that's very good news.  Okay, then, Agenda+ for the following proposal:

1. We add a new at-rule, proposed name of `@nest` (but I'm not too concerned about the name). It has no prelude; it takes style rules in its body. It acts exactly like a nested rule `& {...}`, except it matches precisely the same elements and pseudo-elements as the parent rule, without imposing the "basically wrapped in an `:is()`" behavior that an actual nested style rule would. Authors *can* use `@nest` directly, tho there's not much point; it mostly exists for use in automatically wrapping naked declarations.

2. The ["consume a block's contents"](https://drafts.csswg.org/css-syntax/#consume-block-contents) algorithm is modified to automatically wrap sequences of declarations that come after "the first rule" in an `@nest`. †

3. Non-style rules that now accept properties directly, such as nested `@media`, are changed to wrap those declarations in `@nest` (rather than the [current behavior](https://drafts.csswg.org/css-nesting/#conditionals), which is to wrap in an `& {...}` rule).

```
.foo, .foo::before, .foo::after {
  color: blue;

  /* This rule only actually nests from .foo
     aka it's `.foo .foo-child`, nothing else */
  .foo-child { font-style: itatlic; }

  /* This line continues to work, applying to all three parent selectors. */
  background: silver;

  /* And this block *starts* to work now, applying to all three selectors.
     Previously it only applied to `.foo`, not `.foo::before`/etc */
  @media (prefers-color-scheme: dark) {
    color: lightskyblue;
    background: darkslategray;
  }
}
```


†: To handle this, I'm gonna define that ["consume a qualified rule"](https://drafts.csswg.org/css-syntax/#consume-a-qualified-rule) returns an "invalid rule" failure from the end of the `<{-token>` section, rather than nothing. Then, in ["consume a block's contents"](https://drafts.csswg.org/css-syntax/#consume-block-contents), I'll start out in "naked declarations" mode, and as soon as I see an at-keyword token, a qualified rule, or an invalid-rule failure, I'll switch to "nested declarations" mode and start wrapping declarations in `@nest`.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8738#issuecomment-2057868087 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 15 April 2024 21:48:27 UTC