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

const brandColor = 'plum';

// usage:

<nav>
  background: { brandColor };
</nav>

Detached Rulesets

const fontMedium = `
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
`;

// usage:

<h1>
  { fontMedium }
</h1>

Pre-processor Mixins

You can create your own:

const borderRadius = radius => (`
  -webkit-border-radius: ${radius};
     -moz-border-radius: ${radius};
          border-radius: ${radius};
`);

// usage:

<button>
  { borderRadius('4px') }
</button>

Or use a library such as polished-styles:

const { lighten } = require('polished');

// usage :

<a pseudo=":hover">
  color: { lighten(0.2, 'dogerblue') };
</a>

Not to be confused with immutable mixins.

Themes

const ACTIVE_THEME = 'light';
const themes = {
  light: {
    appBackground: 'ghostwhite'
  },
  dark: {
    appBackground: 'midnightblue'
  }
}

// usage:

<body>
  background: { themes[ACTIVE_THEME].appBackground };
</body>

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.

PreviousInstallNextCompile Time Errors

Last updated