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>()
}
};