Variables: build-time vs run-time

I think it’s great that react-native’s StyleSheet and this library both let us do run-time branching of styles in the same place we write our styles normally. I think it is a shame to lose the ability to do build-time abstractions. StyleSheet still lets you plug in variables at definition time, so they don’t lose build-time configurability, but I don’t see a way to do that with styled-components.

What do I mean?

On the web, I use SASS/LESS for build time abstraction. If I want a run-time abstraction I have to do some messy gluing to JS. At the very least the JS had to know about a css classname.

In styled-components, only run-time branching is supported:

const WarningMessage = styled.li`
  padding: 5px 10px;
  background-color: ${props => props.theme.colorWarn}; // color variable, could be a build-time decision
  color: 'white';
  box-shadow: 1px 2px 2px 0 ${props => props.theme.shade10 }; // color constant, could be a build-time decision;
  font-weight: ${props => props.important ? '"bold"' : '"normal"' }; // run-time decision, based on data about this particular message
  border-radius: ${props => props.theme.radiusSmall} // build-time would be better
`;

Use cases for run-time abstractions:

• User or data influenced component state (eg: a todo li that is done or not)

Better fit for build-time abstraction:

• button that is primary or not (since it’s unlikely to change as a result of user input)
• Color variables
• Most applications of theming (counterargument: user selectable theme)
• UI constants (spacing, radius, some types of color definitions)

I’d argue that most of the use cases are build-time. Doing it all at run time means there is a perf impact (may be trivial) and there’s a larger possibility for unexpected values to break my code.

I wonder: Is there a way to support both run-time and build-time branching? Is this a use case others find interesting?

[geelen]

Yeah, I think conceptually the styling block must be completely run-time. We can make build-time optimisations (like the babel step, ripping out the parser, server-side-rendering and rehydration, etc) all within that conceptual framework, as any performance issues are identified. But I don’t want to introduce any new concepts that force a user to make a build-time/run-time decision, sorry.

[hitmands]

something like that could be achieved via Prepack