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

I'm really digging this idea!

I had a few questions, and maybe some possible gotchas—
* **nesting clarification**
  
  By groups be infinitely nestable, does that mean that we could groups in groups in groups, etc., and essentially see `primary-100-200-400` (all together like that) variants come into play (practicality aside)?
* **property reference**
  
  I know the idea of grouped properties has been tossed around before, usually using a separate function to access those values, e.g., `groupVar(--color-primary, 100)` (not trying to sell that name), with this general syntax: `groupVar(<custom-property-name>, <nested-property-name>, <declaration-value>)`
  
  Have you considered alternate syntax options like that? What pros and cons do you see, and what led you to your eventual conclusion? I'd love to understand the journey you went through to get to this final product.
* **naming collisions**
  
  If I am in this situation:
  
  ```postcss
  :root {
   --color-primary-100: black;
   --color-green: {
    100: oklch(95% 13% 135);
    200: oklch(95% 15% 135);
    /* ... */
    900: oklch(25% 20% 135);
   };
  }
  
  some-component {
   --color-primary: var(--color-green);
  }
  ```
  
  I'm not sure how clear it is that by—essentially—spreading those grouped values into the new `--color-primary` variable, you are also overriding the value(s) of any variables that happen to be named the same name as that variable plus one of its properties/nested values (`{rootRariableName}-{groupedVariableName}`}

Thanks! 🙂

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


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

Received on Saturday, 24 February 2024 11:43:37 UTC