{"id":22714,"library":"vite-plugin-lazy-css-modules-inliner","title":"Vite Plugin Lazy CSS Modules Inliner","description":"A Vite plugin (v0.2.0) that enables true on-demand CSS injection for dynamically imported code by virtualizing CSS Modules. It prevents lazy components' styles from being bundled into the page's initial CSS, injecting them only when the corresponding JavaScript chunk is actually loaded. Supports Vite 4+, TypeScript, and frameworks like React, Vue, Svelte (via external *.module.css imports). Unlike typical CSS-in-JS solutions or code-splitting plugins, it preserves CSS Modules hashing, avoids preloading CSS via __vitePreload, and includes built-in RTL support via runtimeIsRtlCondition. Released as a proof-of-concept with active maintenance.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/DmitriiNazimov/vite-plugin-lazy-css-modules-inliner","tags":["javascript","vite","plugin","css-modules","lazy","dynamic import","inline css","typescript"],"install":[{"cmd":"npm install vite-plugin-lazy-css-modules-inliner","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lazy-css-modules-inliner","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lazy-css-modules-inliner","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite >=4 for plugin hooks and build pipeline integration","package":"vite","optional":false}],"imports":[{"note":"ESM-only; package ships TypeScript types and uses ESM exports. CommonJS require will fail as package.json has \"type\": \"module\".","wrong":"const viteLazyCssInliner = require('vite-plugin-lazy-css-modules-inliner')","symbol":"viteLazyCssInliner","correct":"import { viteLazyCssInliner } from 'vite-plugin-lazy-css-modules-inliner'"},{"note":"PluginOptions is a TypeScript interface used for type annotations only; importing it as a value will cause a runtime error.","wrong":"import { PluginOptions } from 'vite-plugin-lazy-css-modules-inliner'","symbol":"PluginOptions","correct":"import type { PluginOptions } from 'vite-plugin-lazy-css-modules-inliner'"},{"note":"Package does not export a default export; using default import will result in undefined. Only named export is available.","wrong":"import { default as viteLazyCssInliner } from 'vite-plugin-lazy-css-modules-inliner'","symbol":"default import","correct":"import viteLazyCssInliner from 'vite-plugin-lazy-css-modules-inliner'"},{"note":"No default export; the correct import uses the named export 'viteLazyCssInliner'.","wrong":"import VitePlugin from 'vite-plugin-lazy-css-modules-inliner'","symbol":"VitePlugin","correct":"import { viteLazyCssInliner } from 'vite-plugin-lazy-css-modules-inliner'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { viteLazyCssInliner } from 'vite-plugin-lazy-css-modules-inliner';\n\nexport default defineConfig({\n  plugins: [\n    viteLazyCssInliner({\n      stripPreloadDepsMode: 'css', // default\n      isDev: process.env.NODE_ENV !== 'production',\n      includedPathes: ['src'],\n      excludedPathes: ['node_modules'],\n    }),\n  ],\n});\n\n// MyComponent.jsx\nimport styles from './MyComponent.module.css';\nconst MyComponent = () => <div className={styles.root}>Hello</div>;\nexport default MyComponent;","lang":"typescript","description":"Shows basic setup with vite.config.ts plugin initialization and a lazy-loaded React component using CSS Modules. The plugin intercepts dynamic imports to inline CSS only when the component is actually rendered."},"warnings":[{"fix":"Update Node.js to 18+ and Vite to 4+. Check engines field in package.json.","message":"requires node >= 18 and vite >= 4","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Use 'css' (default) unless you fully understand the implications. 'all' strips all dependencies from __vitePreload which can break chunk loading.","message":"stripPreloadDepsMode: 'all' may cause unexpected behavior in shared chunks","severity":"deprecated","affected_versions":">=0.2.0"},{"fix":"Use only dynamic imports for CSS modules that are lazy-loaded, or accept the duplication. Do not mix import styles for the same module.","message":"Mixed static and dynamic imports of the same CSS module can duplicate CSS","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure you are using Vite (not a custom bundler). Virtual modules are Vite-specific and won't work with plain Rollup.","message":"The plugin re-routes CSS imports inside lazy graphs to virtual modules; if you see 'Cannot find module' errors for virtual IDs, your bundler may not support virtual modules","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Run `npm install --save-dev rtlcss` and set runtimeIsRtlCondition in plugin options.","message":"RTL support requires rtlcss to be installed as a dependency if runtimeIsRtlCondition is set","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Ensure you have a ClientRouter or wait for hydration. Consider using a CSS-in-JS solution for SSR if flashes are unacceptable.","message":"SSR build: virtual CSS modules are loaded as empty, so styles won't be injected server-side; client hydration will inject them, causing potential flash of unstyled content","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install with `npm install --save-dev vite-plugin-lazy-css-modules-inliner` and verify package.json includes it.","cause":"Package not installed or import path incorrect","error":"Error: Cannot find module 'vite-plugin-lazy-css-modules-inliner'"},{"fix":"Change `import viteLazyCssInliner from ...` to `import { viteLazyCssInliner } from ...`.","cause":"Using default import instead of named import","error":"TypeError: viteLazyCssInliner is not a function"},{"fix":"Update Vite to version 4 or higher: `npm install vite@^4`.","cause":"Incompatible Vite version","error":"Error: The plugin 'vite-plugin-lazy-css-modules-inliner' requires Vite >=4 but current version is 3.x"},{"fix":"Upgrade Vite to >=4, as the plugin relies on dynamicImporters property added in Vite 4.","cause":"Using a Vite version older than 4 where getModuleInfo returns undefined","error":"Error: getModuleInfo(id).dynamicImporters is not a function"},{"fix":"Set stripPreloadDepsMode to 'css' (default) unless you have a specific reason to use 'all'.","cause":"Using a configuration option that is not recommended for general use","error":"Warning: You are using stripPreloadDepsMode: 'all' which may break chunk loading in some scenarios"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}