Skip to content

Interpolation

Interpolation here means using any identifier as a value inside a CSS definition. Useful for reusing variables, handling themes or change styles during run-time.

module Component = [%styled.div "
border: 1px solid $(Theme.black);
"];

Interpolation only works inside values, which is slightly different from other JavaScript-based solutions (such as styled-components or emotion), where their interpolation is much more dynamic and can be used everywhere. You might find styled-ppx more strict, here's an example:

margin-${whatever}: 10px is valid in JavaScript, while isn't valid in styled-ppx. As explained above, this interpolation affects on properties, not on values.

As a solution, you can implement similar behaviour with more explicitness, handling all properties, using the css extension which is described below.

let margin = direction =>
switch direction {
| #Left => %css("margin-left: 10px;")
| #Right => %css("margin-right: 10px;")
| #Top => %css("margin-top: 10px;")
| #Bottom => %css("margin-bottom: 10px;")
}

styled-ppx forces you to be more rigit, the same way as ReScript does.

💡

Some interpolation is treated as unsafe, disables the type-checker which can lead to run-time issues. This is the current implementation and the reason for that is because is very hard to implement type-safety with shorthand properties with the polymorphism of CSS.

Polymorphism of CSS

There are plenty of properties on CSS that accept different types of values, the ones encountered more challenging are animation, box-shadow, background, transition and transform, to name a few.

background: #fff; /* The background is white */
background: url(img.png); /* The background is an image */
background: #fff url(img.png); /* The background is white with an image */
background: url(img.png) no-repeat; /* The background is a non-repeating image */

In this case, to interpolate the background's value like: background: $(variable) the type-checker can't know the type of $(variable) ahead of time, since there's many definitions of background valid. This is called Overload functions and it's not available in ReScript to it's nature of a static typed language.