It's Just JavaScript
Since immutable styles is just JavaScript it gets the niceties of CSS pre-processors for free. Leveraging everyday JavaScript enables variables, detached rulesets, pre-processor mixins, and theming with little to no extra cost.

Variables

1
const brandColor = 'plum';
2
3
// usage:
4
5
<nav>
6
background: { brandColor };
7
</nav>
Copied!

Detached Rulesets

1
const fontMedium = `
2
font-family: 'Open Sans', sans-serif;
3
font-weight: 600;
4
font-size: 2.1rem;
5
`;
6
7
// usage:
8
9
<h1>
10
{ fontMedium }
11
</h1>
Copied!

Pre-processor Mixins

You can create your own:
1
const borderRadius = radius => (`
2
-webkit-border-radius: ${radius};
3
-moz-border-radius: ${radius};
4
border-radius: ${radius};
5
`);
6
7
// usage:
8
9
<button>
10
{ borderRadius('4px') }
11
</button>
Copied!
Or use a library such as polished-styles:
1
const { lighten } = require('polished');
2
3
// usage :
4
5
<a pseudo=":hover">
6
color: { lighten(0.2, 'dogerblue') };
7
</a>
Copied!
Not to be confused with immutable mixins.

Themes

1
const ACTIVE_THEME = 'light';
2
const themes = {
3
light: {
4
appBackground: 'ghostwhite'
5
},
6
dark: {
7
appBackground: 'midnightblue'
8
}
9
}
10
11
// usage:
12
13
<body>
14
background: { themes[ACTIVE_THEME].appBackground };
15
</body>
Copied!

Server-side

Compiling immutable styles server-side – and of course infrastructure permitting – would enable futher functionality, such as generating CSS specific to:
    ⚗️ Experiments (AB testing)
    🎌 Locale
    📱 Platform

Note on Support

Whilst this is technically possible now an official server-side compiler hasn't been released. Official support for server-side compilation could be added in future releases.