Registry /
web-framework / vite-plugin-shadow-style
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
shadowStyle
✓ import { shadowStyle } from 'vite-plugin-shadow-style'
✗ import shadowStyle from 'vite-plugin-shadow-style'
Named export only; no default export.
SHADOW_STYLE
✓ declare const SHADOW_STYLE: string; // in globals.d.ts
✗ import { SHADOW_STYLE } from 'vite-plugin-shadow-style'
SHADOW_STYLE is a global variable injected by the plugin, not an import. You must declare it in a .d.ts file for TypeScript.
vite.config.ts usage
✓ import { shadowStyle } from 'vite-plugin-shadow-style';
export default defineConfig({ plugins: [shadowStyle()] })
✗ import shadowStyle from 'vite-plugin-shadow-style';
// then use shadowStyle() as a standalone function without plugin context
The plugin returns a Vite plugin object; it must be added to the plugins array.
Configures the plugin in vite.config.ts, uses the global SHADOW_STYLE variable inside a web component, and declares the type for SHADOW_STYLE.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { shadowStyle } from 'vite-plugin-shadow-style';
export default defineConfig({
build: {
rollupOptions: {
plugins: [
react(),
shadowStyle(),
],
},
},
});
// In your web component entry file (e.g., my-component.ts):
export class MyComponent extends HTMLElement {
connectedCallback() {
const style = document.createElement('style');
style.innerHTML = SHADOW_STYLE; // injected by plugin
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(style);
shadow.appendChild(document.createElement('div'));
}
}
// globals.d.ts
declare const SHADOW_STYLE: string;
Errors
Common errors & fixes
Cannot find name 'SHADOW_STYLE'.
TypeScript does not recognize the global SHADOW_STYLE variable injected by the plugin.
fixCreate a globals.d.ts file in your project root with: declare const SHADOW_STYLE: string;
The requested module 'vite-plugin-shadow-style' does not provide an export named 'default'
Trying to import a default export that doesn't exist.
fixUse named import: import { shadowStyle } from 'vite-plugin-shadow-style' SHADOW_STYLE is not defined
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.
fixEnsure the plugin is added to build.rollupOptions.plugins in vite.config.ts and that you are building (not running dev server).
Audit
Dependencies
viterequiredpeer dependency; plugin requires Vite's build and plugin system