s3xysteak · s3xysteak · Sep 19, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 16, 2024
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 English | [简体中文](/README.zh-CN.md)
 
-It externalizes `Cesium.js` and automatically copies the four major libraries and core files of CesiumJS during the build process.
+It externalizes `Cesium.js` as well as its styles `widget.css` and automatically copies the four major libraries and core files of CesiumJS during the build process.
 
 It also support [@cesium/engine](https://community.cesium.com/t/cesium-engine-and-cesium-widgets-are-now-available-for-testing/20898) !
 

diff --git a/examples/preact/package.json b/examples/preact/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@preact/signals": "^1.3.0",
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "preact": "^10.22.0"
   },
   "devDependencies": {

diff --git a/examples/preact/src/app.tsx b/examples/preact/src/app.tsx
@@ -1,7 +1,6 @@
 import { effect, signal } from '@preact/signals'
 
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 export function App() {
   const container = signal<HTMLElement | null>(null)

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react'
 
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 function App() {
   const container = useRef(null)

diff --git a/examples/solid/package.json b/examples/solid/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "solid-js": "^1.8.17"
   },
   "devDependencies": {

diff --git a/examples/solid/src/App.tsx b/examples/solid/src/App.tsx
@@ -1,5 +1,4 @@
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 import { onMount } from 'solid-js'
 
 function App() {

diff --git a/examples/svelte/package.json b/examples/svelte/package.json
@@ -20,6 +20,6 @@
     "vite-plugin-cesium-build": "^0.4.3"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   }
 }
diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte'
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 let container:null
 

diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

diff --git a/examples/vanilla/src/main.ts b/examples/vanilla/src/main.ts
@@ -1,5 +1,4 @@
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 const dom = document.querySelector<HTMLDivElement>('#app')!
 

diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "vue": "^3.4.29"
   },
   "devDependencies": {

diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 const container = ref()
 onMounted(() => {

diff --git a/src/core.ts b/src/core.ts
@@ -1,4 +1,5 @@
 export * from './core/copyCesium'
 export * from './core/importCesium'
+export * from './core/importCss'
 export * from './core/resolveOptions'
 export * from './core/setBaseUrl'
diff --git a/src/core/importCss.ts b/src/core/importCss.ts
@@ -0,0 +1,23 @@
+import type { Plugin, ResolvedConfig } from 'vite'
+import { isString } from './utils'
+
+export function importCss(path: (base: string) => string, apply?: Plugin['apply']): Plugin {
+  let base: ResolvedConfig['base']
+
+  return {
+    name: `vite-plugin-cesium-build:importCss${isString(apply) ? `:${apply}` : ''}`,
+    apply,
+    configResolved(resolvedConfig) {
+      base = resolvedConfig.base
+    },
+    transformIndexHtml: () => [
+      {
+        tag: 'link',
+        attrs: {
+          rel: 'stylesheet',
+          href: path(base),
+        },
+      },
+    ],
+  }
+}
diff --git a/src/engine.ts b/src/engine.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite'
 
-import { type BuildCesiumOptions, copyCesium, resolveOptions, setBaseUrl } from './core'
+import { type BuildCesiumOptions, copyCesium, importCss, resolveOptions, setBaseUrl } from './core'
 
 function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
   const options = resolveOptions(pluginOptions, 'node_modules/@cesium/engine')
@@ -14,6 +14,10 @@ function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
           src: `${options.from}/Source/Assets/*`,
           dest: `${options.to}/Assets/`,
         },
+        {
+          src: `${options.from}/Source/Widget/CesiumWidget.css`,
+          dest: `${options.to}/Widget/`,
+        },
         {
           src: `${options.from}/Build/ThirdParty/*`,
           dest: `${options.to}/ThirdParty/`,
@@ -24,6 +28,10 @@ function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
         },
       ],
     ),
+
+    importCss(base => `${base}${options.from}/Source/Widget/CesiumWidget.css`, 'serve'),
+    importCss(base => `${base}${options.to}/Widget/CesiumWidget.css`, 'build'),
+
     setBaseUrl(options),
   ]
 }

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@ import type { Plugin } from 'vite'
 
 import { viteExternalsPlugin } from 'vite-plugin-externals'
 
-import { type BuildCesiumOptions, copyCesium, importCesium, resolveOptions, setBaseUrl } from './core'
+import { type BuildCesiumOptions, copyCesium, importCesium, importCss, resolveOptions, setBaseUrl } from './core'
 
 function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
   const options = resolveOptions(pluginOptions, 'node_modules/cesium/Build/Cesium')
@@ -21,6 +21,9 @@ function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
     importCesium(base => `${base}${options.from}Unminified/Cesium.js`, 'serve'),
     importCesium(base => `${base}${options.to}/Cesium.js`, 'build'),
 
+    importCss(base => `${base}${options.from}Unminified/Widgets/widgets.css`, 'serve'),
+    importCss(base => `${base}${options.to}/Widgets/widgets.css`, 'build'),
+
     setBaseUrl(options),
   ]
 }

diff --git a/test/playground/package.json b/test/playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/test/playground/pnpm-lock.yaml b/test/playground/pnpm-lock.yaml
diff --git a/test/playground/src/main.ts b/test/playground/src/main.ts
@@ -1,5 +1,4 @@
 import * as Cesium from 'cesium'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 
 import './main.css'