feat: Use newest vite-css plug-in to remove the need of the base option

package.json

@@ -53,7 +53,8 @@
     "build": "vite build && pwsh post-build.ps1 && publint",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json --noEmit",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:ci": "npx playwright install chromium && vitest"
   },
   "devDependencies": {

src/index.ts

@@ -1,20 +1,31 @@
 import { buildPiece } from "@collagejs/svelte";
 import Imo from "./lib/Imo.svelte";
-import { cssMountFactory } from "@collagejs/vite-css/ex";
+import { CssFactory } from "@collagejs/vite-css/ex";
 import type { ImoUiFactoryOptions } from "./types.js";
 import { getInitialImoUiFactoryOptions } from "./shared/options.js";
 import { initImoUiOptions } from "./lib/state/imoUiOptions";
 import type { CorePiece } from "@collagejs/core";
 
-const cssMount = cssMountFactory('index');
+// Edge case where import.meta.url ends up in a chunk because some module imports from this file, and for
+// import.meta.url to work without changes, it needs to stay in the chunk named after the entry file.
+// TODO: Take some time to figure out a module graph that allows the use of CssFactory in a module that is not
+// imported by any other module.  That should make this edge case disappear.
+const url = import.meta.url;
+let base = url.substring(0, url.lastIndexOf("/") + 1);
+if (base.endsWith("/assets/")) {
+    base = base.substring(0, base.length - "assets/".length);
+}
+const css = new CssFactory(base + 'index.js');
 
 export async function imoUiFactory(options?: ImoUiFactoryOptions): Promise<CorePiece<{}>> {
     const initialOptions = await getInitialImoUiFactoryOptions(options);
-    const mountFn = initialOptions?.base ? cssMount.bind({ base: initialOptions.base }) : cssMount;
+    const { mount, relocate } = css.instantiate();
     initImoUiOptions(initialOptions.ui);
     const corePiece = buildPiece(Imo);
     return {
-        mount: [mountFn, corePiece.mount],
-        update: corePiece.update,
+        ...corePiece,
+        mount: [mount, corePiece.mount],
+        // TODO:  Once buildPiece()'s type is fixed, the ! operator should not be needed here.
+        relocate: [relocate, corePiece.relocate!],
     };
 }

src/shared/options.ts

@@ -31,7 +31,6 @@ const defaultImPostingOptions: Required<ImPostingOptions> = {
  * Default IMO UI factory options.
  */
 export const defaultImoUiFactoryOptions: RequiredImoUiFactoryOptions = {
-    base: '',
     shadow: true,
     ui: {
         theme: 'system',

src/types.ts

@@ -68,12 +68,6 @@ export type ImoUiOptions = {
  * Options that can be specified when creating the `@collagejs/imo` UI *CollageJS* piece.
  */
 export type ImoUiFactoryOptions = {
-    /**
-     * Base URL for CSS assets.  This value overrides Vite's base if specified.
-     *
-     * **TIP**:  Use it when serving the *CollageJS* piece from a different origin than the main page.
-     */
-    base?: string;
     /**
      * Whether to mount the *CollageJS* piece inside a shadow DOM root.
      */

vitest.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
             enabled: true,
             provider: playwright(),
             instances: [
-                { browser: 'chromium' }, // can also be 'firefox' or 'webkit'
+                { browser: 'chromium', headless: true }, // can also be 'firefox' or 'webkit'
             ],
         },
     },