Re: [csswg-drafts] [css-values] String concatentation (#542)

While experimenting with anchor positioning, I find myself often creating ”namespaced” anchor names, where an ability to use a variable and produce _multiple_ namespaced dashed idents would be very very useful.

Basically, currently I have to write something like

```html
<span
    class="context"
    style="
        --is: --foo;
        --is-content: --foo-content;
        --is-extra: --foo-extra;
    "
>…</span>
…
<span
    class="anchor"
    style="
        --for: --foo;
        --for-content: --foo-content;
        --for-extra: --foo-extra;
    "
>…</span>
```

Basically, when I want to have two components, and connect multiple parts of one to multiple parts of another, I have to write these verbose definitions.

If we would have something like `concat()`, we could do something like this:

```html
<span class="context" style="--is: foo;">…</span>
…
<span class="anchor" style="--for: foo;">…</span>
```

and define all the things in the CSS:

```CSS
.context {
  --is-root: concat(--, var(--is));
  --is-content: concat(--, var(--is), -content);
  --is-extra: concat(--, var(--is), -extra);
}
.anchor {
  --for-root: concat(--, var(--is));
  --for-content: concat(--, var(--is), -content);
  --for-extra: concat(--, var(--is), -extra);
}
```

Making it possible to use as many different anchors in a certain context, namespaced by just one CSS variable defined on the root element of our component.

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


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

Received on Thursday, 18 May 2023 14:33:18 UTC