RFC: named parameters in Stylable custom values
(Last Updated on )
Howdy, gentle readers, and happy 2018.
I have a little question for you. With Wix Engineering, I’ve been working on a CSS pre-processor that extends CSS to make it easier to style component-based web apps (you can read more about it in my 24ways article Styling Components – Typed CSS With Stylable).
One of the design principles is that working with Stylable should be as simple as working with CSS, and not break your tooling. So, for example, transpiler directives are given a “vendor prefix” of -st- so they’re valid CSS syntax and therefore won’t throw an error in syntax highlighters etc (even though they’re transpiled away into valid CSS at build time).
And here’s where I want to pick your brains.
In our mixins, we want to pass named parameters in a custom value, like this:
.root {
-st-mixin:
--Theme(
color1:green,
color2:red
)
}
The double-hyphen syntax is allowed as a custom property (it’s actually an “empty” vendor prefix), so we’re borrowing that for a custom value.
Passing the named parameters color1 with a value of green and color2 with a value of red is trickier. The colon syntax feels more “CSS-y” (and is similar to that used by SASS) and works nicely with postcss and postcss-value-parser. However, any IDE that we tried that doesn’t have Stylable language intelligence raised an error on the colon between the param name and value.
We could support named params with a space as separator between name and value:
.root {
-st-mixin:
--Theme(
color1 green,
color2 red
)
}
But that just feels ugly and wrong. I’ve asked the Houdini working group but suspect that even if a colon were eventually allowed here, we need to go with a space for the time being, just to avoid IBS (IDE barfing syndrome).
What do you think?
Update 20 February: Tab Atkins’ answer.
It might be more complicated, but what if you could separate them with either?