vite-plugin-linaria

1.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that integrates Linaria (a zero-runtime CSS-in-JS library) with Vite's build and dev server. It uses Vite virtual modules to transform Linaria CSS during development, supporting features like HMR and efficient production builds. The plugin requires Linaria ^3.0.0-beta.1 and Vite >=2.0.0, and is compatible with Node >=12.0.0. It simplifies the setup process for combining Linaria with Vite, offering a straightforward configuration approach. As of version 1.0.1, it is stable but relies on Linaria's beta release, which may introduce breaking changes in Linaria itself.

Common errors

error Error: Cannot find module 'linaria' ↓

cause Missing peer dependency linaria.

fix

npm install --save-dev linaria@^3.0.0-beta.1

error TypeError: vitePluginLinaria is not a function ↓

cause Using named import instead of default import.

fix

Use 'import VitePluginLinaria from 'vite-plugin-linaria''

Warnings

breaking Linaria v3 is in beta; APIs may change and break compatibility with this plugin. ↓

fix Pin linaria to a known compatible version or monitor Linaria changelog.

deprecated The plugin has not been updated for Linaria v4 (if released). Check compatibility before upgrading. ↓

fix Update to latest plugin version or switch to direct Linaria Vite support.

gotcha Virtual modules may not work with certain Vite configurations (e.g., custom resolve aliases). ↓

fix Ensure no resolve rules conflict with virtual module IDs like 'virtual:linaria-css'.

Install

npm install vite-plugin-linaria

yarn add vite-plugin-linaria

pnpm add vite-plugin-linaria

Imports

default

wrong

const VitePluginLinaria = require('vite-plugin-linaria')

correct

import VitePluginLinaria from 'vite-plugin-linaria'

Module uses ESM exports; require() will not work unless using a bundler that interops.

VitePluginLinaria

wrong

import { VitePluginLinaria } from 'vite-plugin-linaria'

correct

import VitePluginLinaria from 'vite-plugin-linaria'

The plugin is a default export, not a named export.

type

wrong

import { VitePluginLinaria } from 'vite-plugin-linaria'

correct

import type { Plugin } from 'vite'; import VitePluginLinaria from 'vite-plugin-linaria'

For TypeScript, use default import for the plugin and import types from Vite separately.

Quickstart

Shows minimum configuration to add Linaria plugin to a Vite project.

// vite.config.js
import VitePluginLinaria from 'vite-plugin-linaria'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    VitePluginLinaria()
  ]
})