[csswg-drafts] map-get function proposal for customising web component styles (#7273)

muratcorlu has just created a new issue for https://github.com/w3c/csswg-drafts:

== map-get function proposal for customising web component styles ==
I want to start a discussion about having a `map-get` function in CSS like in [older versions of SASS](https://css-tricks.com/snippets/sass/easing-map-get-function/).

## Need:

When we use HTML Custom Elements (a.k.a Web Components), Shadow DOM is a powerful opportunity to isolate components style, and using CSS Custom Properties (a.k.a. CSS Variables) for customizing components styles is a very convenient approach. But in some scenarios, we are very limited in providing some good limited options to our component consumers as a component developer.

For example;

I want to provide a `button` component that can be in a limited set of sizes regarding our design system. So we have variants like `large`, `regular` or `small`. Currently, many people use component attributes like `<my-button small>` but this is not an ideal way when you think about a responsive design. Instead, I would prefer to be able to say:

```css
my-button {
  --size: small;
}
```

To be able to have that kind of clean solution we need to have a solution to map this `small` naming to a different type of units inside component styles.

## Proposal

As in old `map-get` function of SASS, having an opportunity to set a value by picking from a map would be great like:

```css
/* Inside our component style */
button {
    padding: map-get((small: 4px  8px, regular: 8px 16px, large: 12px 24px), var(--size, regular));
}
```
Means: regarding to value of `--size` variable (`regular` by default) set padding to `4px 8px` if value is `small`.

So a consumer can not set the padding of my button component other than the options that I set here. Also a consumer can customize this property with a responsive design approach:

```css
my-button {
   --size: regular;
}

@media screen and (max-width: 900px) {
  my-button {
    --size: large;
  }
}
```

This can be also used as conditional values for non size units:

```css
/* Inside our component style */
button {
    background-color: map-get((primary: #336699, secondary: #006600), var(--variant, primary));
}
```

Means: regarding to value of `--variant` variable (`primary` by default) set background-color to `#006600` if value is `secondary`.

I hope I could express the motivation very well. Any ideas and questions to clarify details are very welcome.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7273 using your GitHub account


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

Received on Thursday, 12 May 2022 10:53:08 UTC