{"id":22916,"library":"vite-plugin-vue-hoist-ce-styles","title":"Vite Plugin Vue Hoist CE Styles","description":"A Vite plugin that works around a Vue 3 bug where styles are not properly hoisted for custom elements (CE). It injects CSS into the main bundle entry file instead of relying on scoped styles. Version 0.1.3 is the latest and only release. The plugin is experimental, lacks unit tests, and has specific caveats: CSS imports outside SFCs break the build, and it only works with a limited set of configurations. It differs from alternative solutions by being a targeted patch for a specific Vue 3 issue with custom elements.","status":"active","version":"0.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/soultice/vite-plugin-vue-hoist-ce-styles","tags":["javascript","vite","vue","custom-element","CE","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-hoist-ce-styles","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-hoist-ce-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-hoist-ce-styles","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; CommonJS not supported.","symbol":"hoistCeStyles","correct":"import { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles'"},{"note":"Default and named exports are the same; package has no default export but TypeScript allows it. Using require will fail.","wrong":"const { hoistCeStyles } = require('vite-plugin-vue-hoist-ce-styles')","symbol":"plugin (default import)","correct":"import hoistCeStyles from 'vite-plugin-vue-hoist-ce-styles'"},{"note":"Use for TypeScript config files.","symbol":"type HoistCeStylesOptions","correct":"import type { HoistCeStylesOptions } from 'vite-plugin-vue-hoist-ce-styles'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles'\n\nexport default defineConfig({\n  plugins: [\n    vue({ customElement: true }),\n    hoistCeStyles({ hostComponent: 'App.vue' })\n  ]\n})","lang":"typescript","description":"Shows how to configure the plugin with Vue's custom element mode and specify the host component."},"warnings":[{"fix":"Avoid using global CSS imports; rely on SFC <style> or CSS modules.","message":"CSS imports outside of SFCs (e.g., import 'styles.css' in main.ts) break the build.","severity":"gotcha","affected_versions":"0.1.3"},{"fix":"Use the indexRe option to match your entry file, or rename entry to 'index'.","message":"Plugin only replaces styles in bundles named with 'index' (e.g., index.xxx.js). Custom bundle names may not work.","severity":"gotcha","affected_versions":"0.1.3"},{"fix":"Test thoroughly before deploying. Consider alternative solutions for custom element styles.","message":"Plugin has no unit tests and is largely untested; use with caution in production.","severity":"gotcha","affected_versions":"0.1.3"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Set indexRe option to match your entry file name, e.g., { indexRe: /my-entry.js/ }.","cause":"Plugin expects an output bundle with a name matching 'index' regex; custom entry names cause undefined reference.","error":"Build fails with 'Cannot read properties of undefined (reading 'css')'"},{"fix":"Remove global CSS imports; only use SFC styles or CSS modules.","cause":"Importing a .css file outside SFCs (e.g., in main.ts) triggers PostCSS error because plugin cannot handle it.","error":"ERROR: [vite:css] PostCSS plugin returned something that is not a CSS file"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}