{"id":22718,"library":"vite-plugin-linaria","title":"vite-plugin-linaria","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/denn1s/vite-plugin-linaria","tags":["javascript","vite","linaria","css","vite-plugin"],"install":[{"cmd":"npm install vite-plugin-linaria","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-linaria","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-linaria","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for CSS-in-JS transformations","package":"linaria","optional":false},{"reason":"Peer dependency for Vite plugin API","package":"vite","optional":false}],"imports":[{"note":"Module uses ESM exports; require() will not work unless using a bundler that interops.","wrong":"const VitePluginLinaria = require('vite-plugin-linaria')","symbol":"default","correct":"import VitePluginLinaria from 'vite-plugin-linaria'"},{"note":"The plugin is a default export, not a named export.","wrong":"import { VitePluginLinaria } from 'vite-plugin-linaria'","symbol":"VitePluginLinaria","correct":"import VitePluginLinaria from 'vite-plugin-linaria'"},{"note":"For TypeScript, use default import for the plugin and import types from Vite separately.","wrong":"import { VitePluginLinaria } from 'vite-plugin-linaria'","symbol":"type","correct":"import type { Plugin } from 'vite'; import VitePluginLinaria from 'vite-plugin-linaria'"}],"quickstart":{"code":"// vite.config.js\nimport VitePluginLinaria from 'vite-plugin-linaria'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    VitePluginLinaria()\n  ]\n})","lang":"javascript","description":"Shows minimum configuration to add Linaria plugin to a Vite project."},"warnings":[{"fix":"Pin linaria to a known compatible version or monitor Linaria changelog.","message":"Linaria v3 is in beta; APIs may change and break compatibility with this plugin.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update to latest plugin version or switch to direct Linaria Vite support.","message":"The plugin has not been updated for Linaria v4 (if released). Check compatibility before upgrading.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure no resolve rules conflict with virtual module IDs like 'virtual:linaria-css'.","message":"Virtual modules may not work with certain Vite configurations (e.g., custom resolve aliases).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install --save-dev linaria@^3.0.0-beta.1","cause":"Missing peer dependency linaria.","error":"Error: Cannot find module 'linaria'"},{"fix":"Use 'import VitePluginLinaria from 'vite-plugin-linaria''","cause":"Using named import instead of default import.","error":"TypeError: vitePluginLinaria is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}