{"id":22830,"library":"vite-plugin-shadow-style","title":"vite-plugin-shadow-style","description":"A Vite plugin (v1.2.0, stable) that injects CSS styles into web component shadow DOMs. It rewrites CSS imports to be available as a global SHADOW_STYLE string inside the component bundle, allowing styles to be appended to shadow roots without leaking. Differentiates from standard Vite CSS handling by targeting shadow DOM encapsulation. Ships TypeScript declarations.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/hood/vite-plugin-shadow-style","tags":["javascript","vite","vite-plugin","webcomponents","css","style","shadow-dom","typescript"],"install":[{"cmd":"npm install vite-plugin-shadow-style","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-shadow-style","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-shadow-style","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires Vite's build and plugin system","package":"vite","optional":false}],"imports":[{"note":"Named export only; no default export.","wrong":"import shadowStyle from 'vite-plugin-shadow-style'","symbol":"shadowStyle","correct":"import { shadowStyle } from 'vite-plugin-shadow-style'"},{"note":"SHADOW_STYLE is a global variable injected by the plugin, not an import. You must declare it in a .d.ts file for TypeScript.","wrong":"import { SHADOW_STYLE } from 'vite-plugin-shadow-style'","symbol":"SHADOW_STYLE","correct":"declare const SHADOW_STYLE: string; // in globals.d.ts"},{"note":"The plugin returns a Vite plugin object; it must be added to the plugins array.","wrong":"import shadowStyle from 'vite-plugin-shadow-style';\n// then use shadowStyle() as a standalone function without plugin context","symbol":"vite.config.ts usage","correct":"import { shadowStyle } from 'vite-plugin-shadow-style';\nexport default defineConfig({ plugins: [shadowStyle()] })"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { shadowStyle } from 'vite-plugin-shadow-style';\n\nexport default defineConfig({\n  build: {\n    rollupOptions: {\n      plugins: [\n        react(),\n        shadowStyle(),\n      ],\n    },\n  },\n});\n\n// In your web component entry file (e.g., my-component.ts):\nexport class MyComponent extends HTMLElement {\n  connectedCallback() {\n    const style = document.createElement('style');\n    style.innerHTML = SHADOW_STYLE; // injected by plugin\n    const shadow = this.attachShadow({ mode: 'open' });\n    shadow.appendChild(style);\n    shadow.appendChild(document.createElement('div'));\n  }\n}\n\n// globals.d.ts\ndeclare const SHADOW_STYLE: string;","lang":"typescript","description":"Configures the plugin in vite.config.ts, uses the global SHADOW_STYLE variable inside a web component, and declares the type for SHADOW_STYLE."},"warnings":[{"fix":"Add a globals.d.ts file with: declare const SHADOW_STYLE: string;","message":"SHADOW_STYLE is not imported; it's a global variable injected at build time. You must declare it in a .d.ts file for TypeScript to compile.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add shadowStyle() inside build.rollupOptions.plugins, as shown in the README.","message":"The plugin should be added to rollupOptions.plugins, not the top-level plugins array in Vite config.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass { iife: true } to shadowStyle(): shadowStyle({ iife: true })","message":"If your component uses external CSS imports, Vite may bundle them as const declarations that can conflict when multiple components are imported. Use the iife option to wrap output in an IIFE to avoid global scope pollution.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the plugin only for production builds. For development, consider an alternative or mock SHADOW_STYLE.","message":"The plugin only works with Vite's build mode; dev server is not supported for SHADOW_STYLE injection.","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":"Create a globals.d.ts file in your project root with: declare const SHADOW_STYLE: string;","cause":"TypeScript does not recognize the global SHADOW_STYLE variable injected by the plugin.","error":"Cannot find name 'SHADOW_STYLE'."},{"fix":"Use named import: import { shadowStyle } from 'vite-plugin-shadow-style'","cause":"Trying to import a default export that doesn't exist.","error":"The requested module 'vite-plugin-shadow-style' does not provide an export named 'default'"},{"fix":"Ensure the plugin is added to build.rollupOptions.plugins in vite.config.ts and that you are building (not running dev server).","cause":"SHADOW_STYLE is a build-time injected global; it is not available at runtime in the dev server or if the plugin is not configured correctly.","error":"SHADOW_STYLE is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}