map-get function proposal for customising web component styles #7273
Description
I want to start a discussion about having a map-get function in CSS like in older versions of SASS.
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:
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:
/* 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:
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:
/* 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.
So, the structure is map-get( (mapObject), key ) I'm not sure what is the best format for defining a map in CSS with current technical background, but JSON-like key: value, structure would be very familiar for many front-end developers.
I hope I could express the motivation very well. Any ideas and questions to clarify details are very welcome.