{"id":22631,"library":"vite-plugin-css-position","title":"vite-plugin-css-position","description":"A Vite plugin (v2.0.9) that gives React and Vue developers precise control over where CSS stylesheets are injected in the component tree, addressing a common pain point with Shadow DOM and scoped styles. Unlike traditional CSS injection at the document head, this plugin allows placement at any arbitrary location via the StylesTarget component. It ships TypeScript types, supports HMR in dev mode when enabled, and has zero runtime dependencies beyond peer requirements (React 19 / Vue 3.5.22). Semi-active development with monthly releases. Differentiator: fine-grained DOM insertion point control without ejecting from Vite.","status":"active","version":"2.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/Ahn1/vite-plugin-css-position","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-css-position","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-css-position","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-css-position","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"viteCssPosition is a named export, not default. Also do not use require() as the package is ESM-only.","wrong":"import viteCssPosition from 'vite-plugin-css-position'","symbol":"viteCssPosition","correct":"import { viteCssPosition } from 'vite-plugin-css-position'"},{"note":"StylesTarget is exported from the subpath for each framework. For React, import from 'vite-plugin-css-position/react'. For Vue, import from 'vite-plugin-css-position/vue'.","wrong":"import StylesTarget from 'vite-plugin-css-position'","symbol":"StylesTarget (React)","correct":"import StylesTarget from 'vite-plugin-css-position/react'"},{"note":"Same as React, the Vue component is in a separate subpath export.","wrong":"import StylesTarget from 'vite-plugin-css-position'","symbol":"StylesTarget (Vue)","correct":"import StylesTarget from 'vite-plugin-css-position/vue'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { viteCssPosition } from 'vite-plugin-css-position';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    viteCssPosition({ enableDev: true }), // enableDev for HMR in dev\n  ],\n});\n\n// App.tsx\nimport StylesTarget from 'vite-plugin-css-position/react';\n\nexport function App() {\n  return (\n    <div>\n      <StylesTarget />\n      <span>Your App Content</span>\n    </div>\n  );\n}","lang":"typescript","description":"Shows Vite plugin configuration and usage of StylesTarget component in a React app."},"warnings":[{"fix":"Upgrade to React 19 or Vue 3.5.22+. If you must use older versions, stick to v1.x.","message":"Dropped support for React 17 and 18 in v2.x; requires React 19 or Vue 3.5.22+.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Set enableDev: true in viteCssPosition options to enable development injection and HMR.","message":"The plugin does not inject styles during development unless 'enableDev' option is set to true. Missing HMR in dev by design to avoid flicker.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'instanceId' instead of 'customId'.","message":"The option 'customId' was renamed to 'instanceId' in v2.0.0.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Always wrap StylesTarget in a parent element (e.g., <div><StylesTarget /></div>).","message":"Place StylesTarget inside a parent <div> or container; placing it as the root element may cause unexpected behavior because the component needs a parent node to target insertion.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only React or only Vue in a project. Do not mix frameworks.","message":"Peer dependency on React 19 vs Vue 3.5.22 — if both are present, behavior is undefined; the plugin picks one based on import order.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import { viteCssPosition } from 'vite-plugin-css-position'; and ensure your Vite config or tsconfig has 'moduleResolution' set to 'bundler' or 'node16'.","cause":"Using require() or misconfigured module resolution (CommonJS vs ESM).","error":"SyntaxError: Named export 'viteCssPosition' not found. The requested module 'vite-plugin-css-position' is a CommonJS module..."},{"fix":"Upgrade Node to >=14.13 or use a bundler that supports the 'exports' field (Vite, webpack 5, etc.). Alternatively, import from 'vite-plugin-css-position/dist/react.js' as a fallback.","cause":"The package subpath export for the framework-specific component is not recognized because the package.json 'exports' field may not be supported by your bundler/node version.","error":"Module not found: Error: Can't resolve 'vite-plugin-css-position/react'"},{"fix":"Ensure viteCssPosition() is added to plugins array before react() or vue() plugin. Also check that 'enableDev' is set to true in development.","cause":"The plugin is not properly configured or there is another CSS injection mechanism (e.g., style-loader) overriding it.","error":"Warning: ReactDOM is injecting styles into the head even though StylesTarget is present."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}