feat: handle csp, extract css

Author: Justineo

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.5.2
+
+* Added `dist/csp/*` to support strict CSP with extracted CSS file.
+
 ## 6.5.1
 
 * Fixed types for mouse events.

README.md

@@ -227,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -453,6 +453,10 @@ Vue-ECharts support the following events:
 
 See supported events [here →](https://echarts.apache.org/en/api.html#events)
 
+## CSP: `style-src` or `style-src-elem`
+
+If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually.
+
 ## Migration to v6
 
 > 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.

README.zh-Hans.md

@@ -225,7 +225,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -245,7 +245,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -451,6 +451,10 @@ import { THEME_KEY } from 'vue-echarts'
 
 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
 
+## CSP: `style-src` 或 `style-src-elem`
+
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `dist/csp` 目录中的文件，并手动引入 `dist/csp/style.css`。
+
 ## 迁移到 v6
 
 > 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.5.1",
+  "version": "6.5.2",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",
   "scripts": {

rollup.config.js

@@ -4,6 +4,34 @@ import resolve from "@rollup/plugin-node-resolve";
 import styles from "rollup-plugin-styles";
 import { injectVueDemi } from "./scripts/rollup";
 
+/**
+ * Convert Rollup option to a style extracted/injected version
+ * @param {import('rollup').RollupOptions} option
+ * @param {boolean} extract
+ * @returns {import('rollup').RollupOptions}
+ */
+function handleStyle(option, extract) {
+  // inject styles plugin
+  const result = { ...option };
+  const { plugins, output } = result;
+  result.plugins = (plugins || []).concat(
+    extract ? styles({ mode: ["extract", "style.css"] }) : styles()
+  );
+
+  // modify output file names
+  if (extract && output) {
+    result.output = (Array.isArray(output) ? output : [output]).map(output => {
+      return {
+        ...output,
+        file: output.file.replace(/^dist\//, "dist/csp/"),
+        assetFileNames: "[name][extname]"
+      };
+    });
+  }
+
+  return result;
+}
+
 /** @type {import('rollup').RollupOptions[]} */
 const options = [
   {
@@ -15,8 +43,7 @@ const options = [
           outputPath: (path, kind) =>
             kind === "declaration" ? "dist/index.d.ts" : path
         }
-      }),
-      styles()
+      })
     ],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: {
@@ -27,7 +54,7 @@ const options = [
   },
   {
     input: "src/index.ts",
-    plugins: [typescript(), styles()],
+    plugins: [typescript()],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: [
       {
@@ -65,7 +92,7 @@ const options = [
   },
   {
     input: "src/global.ts",
-    plugins: [resolve(), typescript(), styles()],
+    plugins: [resolve(), typescript()],
     external: ["vue-demi", "echarts", "echarts/core"],
     output: [
       {
@@ -105,4 +132,7 @@ const options = [
   }
 ];
 
-export default options;
+export default [
+  ...options.map(option => handleStyle(option, false)),
+  ...options.map(option => handleStyle(option, true))
+];