Registry / web-framework / vite-plugin-vue-hoist-ce-styles

vite-plugin-vue-hoist-ce-styles

library0.1.3jsnpmunverified

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.

web-framework

npm install vite-plugin-vue-hoist-ce-styles

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-HO

vite-plugin-vue-hoist-ce-styles

web-frameworkjavascriptv0.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

hoistCeStyles

✓ import { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles'

ESM-only; CommonJS not supported.

plugin (default import)

✓ import hoistCeStyles from 'vite-plugin-vue-hoist-ce-styles'

✗ const { hoistCeStyles } = require('vite-plugin-vue-hoist-ce-styles')

Default and named exports are the same; package has no default export but TypeScript allows it. Using require will fail.

type HoistCeStylesOptions

✓ import type { HoistCeStylesOptions } from 'vite-plugin-vue-hoist-ce-styles'

Use for TypeScript config files.

Shows how to configure the plugin with Vue's custom element mode and specify the host component.

// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles' export default defineConfig({ plugins: [ vue({ customElement: true }), hoistCeStyles({ hostComponent: 'App.vue' }) ] })

Debug

Known issues

gotchaCSS imports outside of SFCs (e.g., import 'styles.css' in main.ts) break the build.

fix

Avoid using global CSS imports; rely on SFC <style> or CSS modules.

affects: 0.1.3

gotchaPlugin only replaces styles in bundles named with 'index' (e.g., index.xxx.js). Custom bundle names may not work.

fix

Use the indexRe option to match your entry file, or rename entry to 'index'.

affects: 0.1.3

gotchaPlugin has no unit tests and is largely untested; use with caution in production.

fix

Test thoroughly before deploying. Consider alternative solutions for custom element styles.

affects: 0.1.3

Errors

Common errors & fixes

Build fails with 'Cannot read properties of undefined (reading 'css')'

Plugin expects an output bundle with a name matching 'index' regex; custom entry names cause undefined reference.

fix

Set indexRe option to match your entry file name, e.g., { indexRe: /my-entry.js/ }.

ERROR: [vite:css] PostCSS plugin returned something that is not a CSS file

Importing a .css file outside SFCs (e.g., in main.ts) triggers PostCSS error because plugin cannot handle it.

fix

Remove global CSS imports; only use SFC styles or CSS modules.

Upgrade

Version history

0.1.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/soultice/vite-plugin-vue-hoist-ce-styles ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-hoist-ce-styles ↗