Linariaとは？Zero-runtime CSS-in-JSとBuild-time Extraction

ページ内ナビ

概要

Linariaはzero-runtime CSS-in-JS libraryです。JavaScript/TypeScript内のcss tagやReact向けstyled APIをbuild時に評価し、styleをCSS fileへextractしてruntime styling libraryを不要にします。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

css tagのstyleをbuild時にstatic CSSへextractする

@linaria/coreのcss tagで書いたstyleはWyW-based transformでbuild時にCSSへ抽出され、runtimeにstyle engineを持ち込みません。

出典：[1]

Reactではstyled APIとCSS custom propertiesでdynamic styleを扱う

@linaria/reactのstyled helperはReact component向けAPIを提供し、dynamic prop styleにはCSS custom propertiesを利用します。

出典：[1][3]

Vite・Webpack・Rollup等は@wyw-in-js integrationを利用する

LinariaはWyW上へ移行しており、Viteでは@wyw-in-js/viteなどbundler別integrationでCSS extractionを組み込みます。

出典：[1][4]

向いている用途

runtime CSS-in-JS costを避けつつcomponent近くでstyleを書きたいfrontend projectに向く

CSS-in-JSのcolocationやJavaScript logicを使いながら、productionではstatic CSS assetとして配信したいReact/JS codebaseに適します。

出典：[1]

導入前の確認

Linaria 8はNode 22.12.0以上を要求する

@linaria/core・@linaria/react 8.2.0はいずれもNode >=22.12.0を宣言します。CIとlocal toolchainを先に揃える必要があります。

出典：[2][3]

build-time module evaluationの副作用とinvalidationを意識する

READMEはWyW evaluation modelによりslow build、invalidation storm、unexpected code executionが起こり得ると説明しています。side effectを持つmoduleや評価依存codeはmigration guideを確認してください。

出典：[1][5]

参考にした公式資料

[1]Linaria 8.2.0 README(2026-10-05)
[2]@linaria/core 8.2.0 package metadata(2026-10-05)
[3]@linaria/react 8.2.0 package metadata(2026-10-05)
[4]Linaria bundler integration guide(2026-10-05)
[5]Linaria migration guide(2026-10-05)
[6]Linaria MIT license(2026-10-05)

編集部からの補足

Linaria 8はWyW 2を基盤にし、Node.js >=22.12.0を要求します。旧@linaria/vite等のbundler packageは@wyw-in-js/*へ移行しているため、古いLinaria integration記事をそのまま使わない方が安全です。

3ステップで試す

1
Linaria 8.2.0とVite integrationを導入する
Node.js 22.12.0以上で、Linaria coreと同release lineのWyW/Vite integrationを固定します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/linaria.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @linaria/core@8.2.0 @wyw-in-js/vite@2.4.0 vite@6.4.3
2
css tagを使うsourceとVite configを作る
@linaria/coreのcss tagをVite/WyW pluginがbuild時に処理できる最小構成を用意します。
mkdir -p src && printf "%s\n" "import { defineConfig } from 'vite';" "import linaria from '@wyw-in-js/vite';" "export default defineConfig({ plugins: [linaria()] });" > vite.config.mjs && printf "%s\n" '<!doctype html><div id="app"></div><script type="module" src="/src/main.js"></script>' > index.html && printf "%s\n" "import { css } from '@linaria/core';" "const title = css`color: rebeccapurple; font-weight: 700;`;" "document.querySelector('#app').innerHTML = '<h1 class="' + title + '">Linaria</h1>';" > src/main.js
3
Vite buildでCSSがstatic assetへextractされることを確認する
build outputにCSS fileが生成され、styleがruntime engineではなくstatic assetへextractされたことを確認します。
npx vite build && test -n "$(find dist -name '*.css' -type f -print -quit)"

公式READMEで確認

成長

成長の推移 · 直近30日

12,350 Stars

推移データを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

css
css-in-js
css-in-react
react

Stars: 12,350
Forks: 413
Watchers: 64
Open Issues: 73
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/04