linaria

Linaria is a library that lets web developers write CSS styles directly inside JavaScript files, but without any performance penalty at runtime. The key idea is that Linaria processes your code during the build step and extracts all the styles into plain CSS files. By the time a user visits your site, the styles are already in a regular CSS file, so the browser loads them the normal way. There is no JavaScript running in the user's browser just to apply styles, which is the main drawback of many other "CSS-in-JS" approaches.

The syntax feels similar to styled-components, a popular library in the React world. For basic use, you write CSS inside a tagged template literal (a JavaScript string prefixed with css) and then use the result as a class name on an HTML element. For React projects there is a styled helper that lets you create React components with styles baked in, and those components can accept props to change certain style values dynamically. Dynamic values use CSS custom properties under the hood, so they still work without any JavaScript overhead at runtime.

Linaria works with the common JavaScript build tools: webpack, Vite, esbuild, Rollup, and Svelte. It is built on top of an underlying engine called wyw-in-js that handles the build-time code evaluation. The README notes that unusual module structures or side-effect-heavy imports can cause problems during the build, and points to stability guidance on the wyw-in-js documentation site. Node.js version 20 or higher is required.

The library also supports linting CSS written inside JavaScript using stylelint, and editor plugins are available for VS Code, Atom, WebStorm, and Sublime Text to get syntax highlighting and autocompletion for the template literal styles. One known limitation is that dynamic styles in the styled helper do not work in Internet Explorer 11 because they depend on CSS custom properties, which that browser does not support.

The full README is longer than what was shown.