[Feature Request] Adapting based on props

I think that we can support Adapting based on props by compiling it to style prop.

// input
const Color = styled('span')`
  color: ${(props) => props.color};
`;

// output
const Color = (props) => {
  return (
    <span className={...} style={{ color: props.color }}>
      {props.children}
    </span>
  );
}

[jquense]

@benjycui theme properties on context is something that css-in-js libraries like emotion need to support because they don’t allow for css preprocessor pipelines. Astroturf is intentionally taking a different approach, and deciding to lean on existing tooling. In 99% (in our experience) there isn’t any additional value to storing theme variables in js. In most cases a theme.scss file of sass variables (or postcss values, etc) is sufficient and preferable to having to figure out how to convert the value from js to css.

In other words, we feel like variables in css are used the vast majority of the time only in css, and so it makes more sense to keep them in css, and occasionally convert to js instead of starting in a format that is the less common case.

[satya164]

I think that we can support Adapting based on props by compiling it to style prop.

It’ll be very limited. For example, you can’t use this interpolation inside pseudo-selector or media queries. This also brings specificity issues because it won’t possible to override this inline style easily. IMO you’re better off using inline style directly for such simple stuff.

There are some other approaches you can use, like CSS variables or currentColor, where it makes sense.