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

@LeaVerou I would also prefer not to introduce an extra @-rule like `@group` here. I merely included that as I've seen that art floating around that included it.

My main focus was the dot syntax, though I understand your feedback and concern there too. 

## Sub-groups/properties

For this example…
```css
--test-* {
  a: {
    b: {
      base: 'abc';
      extra: 'def';
    }
  };
  a-b: 'xyz';
}
```

Without an alternative getter/setter syntax like the dot syntax…
1. Would `a:{b:{...}}` and `a-b:value` both target the same sub-property value?
   1. If they do target the same property, would setting `a-b` under `--test` after setting up `a:b` as a group overwrite the its group value (naming collision) or would it set the `base` value for in that specified group?
1. Would sub-groups need to use the same `-*` group syntax?

    ```css
    --test-* {
      a-*: {
        b-*: {
          base: 'abc';
          extra: 'def';
        }
      };
      a-b: 'xyz';
    }
    ```
   1. If so, without using this `-*` syntax for sub-groups, would the object under `a` (`a:b`, not `a-*:b-*`) be seen as a plain string, as is currently standard practice in CSS?
   1. Would this change the behavior how setting `a-b` overwrites the value of `a-*:b-*`?
1. Would setting the plain `a-b` sub-property value before setting up the `a-*:b-*` group still preserve that value as the `base` value, or would it be completely overridden when the new group is instantiated, if they would otherwise point to the same value?

    ```css
    --test-* {
      a-b: 'xyz';
      a-*: {
        b-*: {
          base: 'abc';
          extra: 'def';
        }
      };
    }
    ```
## Getter / setter syntax

1. If the dot syntax is not needed for a getter syntax and names can simply be referenced using `-` as the sole delimiter, without risking any naming collisions, would we even need the `get()` function others have proposed, as that appears to serve the same purpose?
1. How would one go about setting a specific sub-property, without affecting others? Would setting `--test-a-b: 'xyz';` explicitly effectively perform that?

    ```css
    --test-* {
      a-*: {
        b-*: {
          base: 'abc';
          extra: 'def';
        }
      };
    }
    ```
1. Are there any plans as of now to introduced a way to be able to pass groups or sub-groups to other custom-properties? Something like one of these:
   * `--custom-*: --test-a-b-*;`
   * `--custom-*: var(--test-a-b-*);`
   * `--custom-*: group(--test-a-b-*);`
   * `--custom-*: --test-a-b;`
   * `--custom-*: var(--test-a-b);`
   * `--custom-*: group(--test-a-b);`

## `base`/`default` sub-property

To allow developers to name sub-properties whatever standard idents they wish, could we consider a pseudo-element for the `base` keyword, rather than making that a reserved word? Perhaps `:base` or `:default` to mirror the `DEFAULT` keyword used by Tailwind CSS, similar to how use `:root` and `:host`?

Several others have voiced a similar concern—@kizu @adamwathan @Crissov @olets @tabatkins—which I think using a pseudo here might account for, though `:default: …` isn't exactly common syntax either, as we have pseudo-classes and pseudo-elements, but not necessarily pseudo-properties, at least yet.

Tab Atkins' idea of always requiring custom sub-properties to start with `--` would negate this risk entirely, so only named properties could be used in groups, and `default` could be one of those named properties:

```css
--test-* {
  --a-*: {
    --b-*: {
      base: 'abc';
      --extra: 'def';
    }
  };
}
```

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


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

Received on Friday, 17 May 2024 16:43:22 UTC