It's Just JavaScript

Immutable Styles

GitHub Repo NPM Package

Search…

Read Me

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.

Install

Compile Time Errors

Copy link

Contents