Inject style via constructable CSSStyleSheet and remove CSP entry

[kingyue737]

Edited

This PR replaces the previous CSP-specific import (vue-echarts/csp) by injecting component styles at runtime using the native CSSStyleSheet constructor (with a <style>-tag fallback). As a result:

• No more separate vue-echarts/csp entry.
• Styles are only injected on the client; SSR usage won't be broken.
• A styles.css file is still published for manual inclusion in strict-CSP or legacy-browser projects.

Migration & Backward Compatibility

• No more vue-echart/csp, use vue-echarts instead.
• Strict-CSP setups & old browsers: manually include vue-echarts/styles.css as before.

For the full discussion and rationale, see the original comment

---

Old description

This PR aims to make vue-echarts/index.js not break in server-side rendering environments. Nuxt users don't need to use vue-charts/csp now.

Do we still need to rename vue-echarts/csp? If so, what about vue-echarts/unstyled or vue-echarts/no-css?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue-echarts	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 3, 2025 1:56am

[Justineo]

don’t think it’s necessary to add that runtime guard. We already ship a version without CSS injection so why not just use that? Since users need to include the CSS file manually anyway, they’re likely already aware of the caveat.

[kingyue737]

Users only need to switch to 'vue-echarts/csp' in environments with strict CSP requirements. This change allows us to avoid introducing a breaking change by renaming the entry point.
SSR users can now use 'vue-echarts' without the need to manually import the CSS.

[kingyue737]

SSR users can now use 'vue-echarts' without the need to manually import the CSS.

However, since styles are only applied on the client side, there’s a potential risk of layout mismatch between the server-rendered and client-rendered content.

[kingyue737]

So let’s revert the above change and just rename ‘vue-echarts/csp’ to ‘vue-charts/unstyled’ ?

[Justineo]

If we truly want to eliminate the extra import, we could proceed as follows:

• Because the component is client-only, there’s no need to inject styles on the server. A purely client-side solution is sufficient.
• Implement an injectStyle helper that first attempts to create a CSSStyleSheet (with feature detection) and falls back to inserting a <style> tag when the API isn’t supported. I think we can directly add it to the component source code instead of relying on a Vite plugin.
• Still publish a styles.css file so that projects with strict CSP and legacy browsers can simply include it manually. This should cover most strict-CSP edge cases.
• If browsers eventually apply CSP restrictions to CSSStyleSheet as well, developers can still fall back to the manual styles.css inclusion to stay compliant.

[Justineo]

I think we should still keep the previous title as only users requiring strict CSP need to know this.