The css helper returns a scoped class name that can be mixed with other classes or used conditionally. Useful for situations where you don’t need a full component.
Function Signature
function css(
strings: TemplateStringsArray,
...interpolations: never[]
): string;
Parameters
strings
TemplateStringsArray
required
Template literal strings containing CSS rules
No interpolations allowed - CSS must be static
Returns
A scoped class name (e.g., "ss-abc123")
Usage
Basic Usage
Create reusable class names for conditional styling:
import { css } from '@alex.radulescu/styled-static';
const activeClass = css`
outline: 2px solid blue;
background: #eff6ff;
`;
const highlightClass = css`
box-shadow: 0 0 10px yellow;
`;
// Use conditionally
<Button className={isActive ? activeClass : ''}>
Conditional styling
</Button>
Mix with Styled Components
Combine css helper classes with styled components:
const Button = styled.button`
padding: 0.5rem 1rem;
background: blue;
`;
const activeClass = css`
outline: 2px solid blue;
`;
<Button className={isActive ? activeClass : ''}>
Mixed styling
</Button>
Multiple Classes
Combine multiple css helper classes:
const activeClass = css`
outline: 2px solid blue;
`;
const highlightClass = css`
box-shadow: 0 0 10px yellow;
`;
// String concatenation
<div className={`${activeClass} ${highlightClass}`}>
Multiple classes
</div>
// Or use cx utility
<div className={cx(activeClass, highlightClass)}>
Multiple classes
</div>
With Variants
Use css helper with the variants API for IDE syntax highlighting:
import { css, styledVariants } from '@alex.radulescu/styled-static';
const Button = styledVariants({
component: 'button',
css: css`
padding: 0.5rem 1rem;
border-radius: 4px;
`,
variants: {
color: {
primary: css`background: blue; color: white;`,
danger: css`background: red; color: white;`,
},
},
});
Wrapping CSS in the css helper enables syntax highlighting from the vscode-styled-components extension, even though the function itself is just an identity function at runtime.
Zero Runtime Cost
At build time, the css helper is completely removed:
// What you write:
const activeClass = css`outline: 2px solid blue;`;
// What gets generated:
const activeClass = "ss-xyz789";
import "@alex.radulescu/styled-static:xyz789-0.css";
See Also
- styled - Create styled components
- cx - Utility for conditionally joining class names
- cssVariants - Create variant functions that return class strings