Re: [csswg-drafts] Proposal: CSS Variable Groups (as a solution to several design systems pain points) (#9992)

## Sub-property getter/setter syntax

> ```css
> @group --base { padding: 1em; }
> @group --color { --primary: teal; --secondary: hotPink; }
> .access { margin: var(--base.padding); border-color: var(--color.--primary); }
> ```

Using a dot separator between levels of grouped properties vs. a hyphen would help disambiguate in cases of naming collisions and provide a clearer method (to developers and parsers) when a property ref is looking at a name vs. entering a group. @mirisuzanne briefly mentioned this syntax [here](https://github.com/w3c/csswg-drafts/issues/10234#issuecomment-2079697515) as well in the related "Design of `@nest` rule" issue, and I suggested it previously [above](https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1965164987).

```css
--some-property: var(--foo.bar.baz);
/* as opposed to `get(--foo, bar, baz)` or `get(baz, get(--foo, bar))` */
```

### Disambiguation & naming collisions

Using a dot syntax would also help to disambiguate grouped property names from ones with hyphen characters:

```css
@group --test-* {
  a: { b: 1; };
  b: { a: 2; };
  a-b: 3;
  b-a: 4;
}
```

In this example, with hyphen-delimiting, `var(--test-a-b)` and `var(--test-b-a)` would each hold two meanings, and it's unclear if the latter for each would directly override the former as is standard in traditional CSS (i.e. do `a:{b:value}` and `a-b:value` set the same sub-property value?).

With dot-delimiting, these would not be confusable, as each group level would be explicitly delimited by a `.` and gettable or settable using the dot syntax without needing to implement a separate system to override a specific value in a nested property.

`var(--test.a.b)`, `var(--test.b.a)`, `var(--test.a-b)`, and `var(--test.b-a)` would each be unique.

### Getter/setter syntax example

Setting a sub-property might look like this:
```css
:root {
  /* set up group */
  @group --test-* { a: { b: 'abc'; }; a-b: 'xyz'; }

  some-selector {
    /* override sub-property values */
    --test.a.b: 'a.b';
    --test.a-b: 'a-b';
    /* tests */
    --check-grouped: var(--test.a.b); /* a.b */
    --check-hyphen:  var(--test.a-b); /* a-b */
  }
  /* tests */
  --check-grouped: var(--test.a.b); /* abc */
  --check-hyphen:  var(--test.a-b); /* xyz */
}
```

---

@LeaVerou Let me know if you want me to open a new ticket to discuss the getter/setter syntax.

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


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

Received on Wednesday, 15 May 2024 15:52:58 UTC