CSS Variables for your CSS-in-JS solution

Built with high focus on performance

✨ better css minification

✨ smaller virtual DOM updates

✨ less crititcal SSR CSS

✨ unique variable names


import { createVar } from 'css-variable';

export const tokens = {
  primary: createVar(),
  secondary: createVar(),
};


import { createGlobalTheme } from 'css-variable';
import { createGlobalStyle } from 'styled-components';
import { tokens } from './tokens';

export const GlobalStyles = createGlobalStyle`
  ${createGlobalTheme(":root", tokens, {
    primary: '#3a5779',
    secondary: '#23374e',
  })}
`;


import { createGlobalTheme } from 'css-variable';
import { Global, css } from '@emotion/react';
import { tokens } from './tokens';

export const GlobalStyles = () =>
  <Global styles={css`
    ${createGlobalTheme(":root", tokens, {
      primary: '#3a5779',
      secondary: '#23374e',
    })}}`
  } />;


import { createGlobalTheme } from 'css-variable';
import { css } from 'linaria';
import { tokens } from './tokens'; 

export const globalStyles = css`:global() {
    ${createGlobalTheme(":root", tokens, {
    primary: '#3a5779',
    secondary: '#23374e',
  })
}`;


import { tokens } from './tokens'; 

export const Headline = styled.h1`
  color: ${tokens.primary};
`;


.se7gjt0-headline {
  color: var(--primary--1isauia0);
}

Create themable CSS Snippets

Define which parts of your reusable css are customizable without overwrites


export const startColor = createVar({value: '#238f97'});
export const endColor = createVar({value: '#5442bb'});

export const gradientHover = css`
  background: linear-gradient(to right, 
      ${gradientStartColor.val}, 
      ${gradientEndColor.val});
      
  background-size: 200% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;

  :focus, :hover {
    color:rgba(0,0,0,0);
  }
  @keyframes rainbow { 
    0%{background-position:left}
    50%{background-position:right}
    100%{background-position:left}
  }
`;


import { startColor, endColor, gradientHover } from './gradient';

export const Button = styled.button`
  ${startColor.toStyle('#f5ab35')}
  ${endColor.toStyle('#8d1d1d')}
  ${gradientHover}
`;


.se7gjt0-button {
  --1isauia0: #f5ab35;
  --1isauia1: #8d1d1d;
  /* the css from gradientHover */
}

Unique and consistent variable names

The recommended babel plugin generates unique variable names during build time

Automatic DX

All babel generated variable names will have human readable names during development


{
  "plugins": [
      "css-variable/babel"
  ]
}


{
  "plugins": [
      "css-variable/swc", { "basePath": __dirname },
  ]
}


{
  "plugins": [
      ["css-variable/babel", {
        // Prefix vairables with a readable name e.g. 'primary--1isauia0'
        // Default for production: false
        // Default for development: true
        displayName: true 
      }]
  ]
}


import { createVar } from 'css-variable';

export const theme = {
  primary: createVar(),
  secondary: createVar(),
};


import { createVar } from 'css-variable';

export const theme = {
  primary: /*@__PURE__*/createVar("primary--1isauia0"),
  secondary: /*@__PURE__*/createVar("secondary--1isauia1"),
};


import { createVar } from 'css-variable';

export const theme = {
  primary: /*@__PURE__*/createVar("1isauia0"),
  secondary: /*@__PURE__*/createVar("1isauia1"),
};

Typed Contracts

By default any string is a valid value for a CSSVariable.

But it doesn't end here - the generic interface allows to define explicitly which values are assignable


import { createVar } from 'css-variable';
import type { CSSHexColor, CSSPixelValue } from 'css-variable';

export const tokens = {
  colors: {
    primary: createVar<CSSHexColor>(),
    secondary: createVar<CSSHexColor>(),
  },
  spacing: {
    large: createVar<CSSPixelValue>()
  }
};