Re: [csswg-drafts] [css-nesting-1] Syntax Invites Errors (#7834)

@romainmenke I took a stab at converting [your sample code following this proposal](https://github.com/romainmenke/nesting-proposal-changes-7834/blob/main/style.proposal.pcss) to sample code with a mandatory `@nest;` (since you are arguing that ampersands should not kick the parser into rule mode, that's the alternative — requiring `@nest` in all rules that have children).



<details>
<summary>This is the result:</summary>

```css
.block {
 color: green;
 box-sizing: border-box;
 height: auto;
 padding-left: 1.25rem;
 padding-right: 1.25rem;
 position: relative;
 width: 100%;
 z-index: 1;

 @nest;

 @media (min-width: 48rem) {
  padding-left: 2rem;
  padding-right: 2rem;
 }

 @media (min-width: 80rem) {
  padding-left: 3rem;
  padding-right: 3rem;
 }

 @media (prefers-color-scheme: dark) {
  color: lime;
 }

 &:hover {
  outline: 2px solid currentColor;
 }

 &.block--orange {
  color: orange;

  @nest;

  @media (prefers-color-scheme: dark) {
   color: yellow;
  }
 }

 .block__element {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  right: 2rem;
  text-align: center;
  top: 50%;
  transform: translate(-5px, calc(-50% - 1.625rem));
  z-index: 2;

  @nest;

  @media (min-width: 48rem) {
   right: 3rem;
  }

  @media (min-width: 80rem) {
   right: 4rem;
  }

  .block--orange & {
   text-decoration-color: black;

   @nest;

   @media (prefers-color-scheme: dark) {
    text-decoration-color: white;
   }
  }
 }
}
```

</details>

Is this preferable? Is it more understandable?

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


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

Received on Thursday, 6 October 2022 18:20:41 UTC