New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-properties-values-api] named parameters in custom values #551

Open
brucelawson opened this Issue Dec 30, 2017 · 2 comments

Comments

Projects
None yet
2 participants
@brucelawson

brucelawson commented Dec 30, 2017

my chums and I at Wix are working on a pre-processor that extends CSS
and we want to pass named parameters in a custom value, like this:

.root {
   -st-mixin:
       --Theme(
           color1 green,
           color2 red
       )

     display: flex;
  }

We're somewhat uncomfortable with assigning "color1" with the value
"green" with only a space between them. It feels like we should use some
other assigment marker, such as a colon similar to SASS:

 .root {
   -st-mixin:
       --Theme(
           color1:green,
           color2:red
       )

   display: flex;
  }

or, more weirdly, with an equals sign:

  .root {
   -st-mixin:
       --Theme(
           color1=green,
           color2=red
       )

   display: flex;
  }

We prefer the colon syntax, as it feels more CSS-y, and we're designing our APIs to be as close as possible to CSS, and to adhere to its syntax so that IDEs and code editors don't show our extensions as errors.

Has something like this been discussed with regards to the CSS Properties
and Values spec
(I think this is the spec that's most likely to be the one that would define such syntax), so we can use the same syntax and thereby future-proof our
project?

Hang loose and stay groovy

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Feb 16, 2018

Member

Hm, P&V isn't really relevant here; it'll let you assign a custom property to use whatever sort of syntax we end up allowing in normal CSS. This is more a generic CSS issue, asking about how we might extend CSS syntax in the future.

And on that note, I'm not sure. We definitely haven't explored this space yet, and so we have no precedent to offer you. Both : and = are used in CSS for this kind of association, and we also use plain space-separated things for some cases. I imagine that when we get to Custom Functions, we'll want to address named parameters, but we haven't gotten there yet. :/

Member

tabatkins commented Feb 16, 2018

Hm, P&V isn't really relevant here; it'll let you assign a custom property to use whatever sort of syntax we end up allowing in normal CSS. This is more a generic CSS issue, asking about how we might extend CSS syntax in the future.

And on that note, I'm not sure. We definitely haven't explored this space yet, and so we have no precedent to offer you. Both : and = are used in CSS for this kind of association, and we also use plain space-separated things for some cases. I imagine that when we get to Custom Functions, we'll want to address named parameters, but we haven't gotten there yet. :/

@brucelawson

This comment has been minimized.

Show comment
Hide comment
@brucelawson

brucelawson Feb 20, 2018

Kools. We see what we can make do with, and report back on whether it worked or not

brucelawson commented Feb 20, 2018

Kools. We see what we can make do with, and report back on whether it worked or not

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment