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

@kizu Good thoughts. I appreciate the feedback!

In response:

> 1. Is this friendly for the parser? Which might be the biggest question and a potential issue for this to be implemented.

I do believe this would work with most/all parsers. This would be a new syntax, and to my knowledge, it does not clash with any existing syntaxes.

> 2. Even if it would — we'd still need the `get()` and `set()` syntax for cases where the key is not a `[\w-]+` string (as long as we'd allow it), unless we'd allow `--foo[0]:` etc, but at this point I would prefer just `get()`.

I working be opposed to also introducing `get`/`set` functions though `set` might also require some changes to the parser, as it's not declarative like traditional CSS functions afaict.

I think we could still avoid the need for `get`/`set` functions with this new syntax though. Dot syntax is familiar, but I wouldn't recommend we also introduce bracket syntax.

Instead, I think the dot syntax could be used for both traditional and numeric characters alike. This is what I'm envisioning:
```postcss
:root {
  --color: {
    bg: {
      dark: #030712;
      light: #f9fafb;
    }
    pink: {
      50: #fdf2f8;
      100: #fce7f3;
      500: #ec4899;
      700: #be185d;
      900: #831843;
    }
  }
  --color.primary: var(--color.pink);
  --color.primary.main: var(--color.primary.500);
}
```

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


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

Received on Tuesday, 27 February 2024 18:18:33 UTC