Support variables

[gingur]

This looks great, any plans for variable support?

Label {
  color: @label.color
}

Label:hover {
  color: @label.hover
}

or

Label {
  color: @prop:color;
}

Label:hover {
  color: @prop:hover;
}

[andreypopp]

Interesting!

So there are two types of variables I can see could be implemented.

Compile time variables

Those are only available at compile time (like LESS/SASS variables). We can get the for free by using some PostCSS plugin or by using LESS/SASS directly. So there's not much work to be done here, we need just to document how to insert PostCSS plugins in the pipeline or how to use LESS/SASS with react-css-components

Runtime variables

Those are more interesting. Basically we want some styles be influenced by variables supplied in runtime. That means that we need to split some styles from being statically compiled into CSS to styles set via style= prop.

Your example:

Label {
  color: @prop:color;
}

Label:hover {
  color: @prop:hover;
}

show probably exactly that usage scenarios for variables, right?

I'd go with a more standard syntax though:

Label {
  color: prop(colorRegular)
}

Label:hover {
  color: prop(colorHover, 'red')
}

Then usage:

<Label colorRegular="#000" /> // colorHover is not provided, used "red" as default
<Label colorRegular="#000"  colorHover="yellow" />

The issues with that approach are:

• Styles set via style= prop takes precedence over styles set via CSS classes, we have to deal with that somehow.

[gingur]

yep, or instead of "prop" could use "var" which is following https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

maybe a radium like approach to inject an actual style tag into the doucument could help the specificity issue of inline styles?

[vyorkin]

I'm also interested in this feature, at least in Compile time variables. Concerning Runtime variables I think prop could be a good name, because it reflects that value comes from a component property and not from css (PostCSS) variables.

For now it would be great to be able to do smth like this:

@import "styles/theme";

/* stylelint-disable */

Button {
  base: button;
  background-color: var(--bg1);

  &:hover {
    background-color: var(--color-danger);
  }
}

/* stylelint-enable */

(but I have no idea how to implement this myself)

[andreypopp]

@vyorkin compile time variables are already supported via sass/less/stylus or postcss. See the example with sass: https://github.com/andreypopp/react-css-components/tree/master/examples/sass

[caesarsol]

Two observations:

• compile time variables: I always wanted to get them from a JS file, do you think that's possible with this library + postcss?
• runtime variables: would definitely be a killer feature. I'd mark the variable with a symbol to make it different from CSS4 vars but also to spot them at first sight, because that makes the rule logic quite different. Maybe coud be better to mark the rule declaration itself in some way? Also, I think an explicit default value should be mandatory.

This library seems to be so much better than styled-components, which is recently trending. CSS modules for the win! :)

[andreypopp]

compile time variables: I always wanted to get them from a JS file, do you think that's possible with this library + postcss?

Yep! See examples, you can use any postcss plugin with it. Just add postcss-loader.