@ckeditor/ckeditor5-dev-manual-server 60.0.0 → 61.1.0

package/README.md

@@ -10,8 +10,8 @@ More information about development tools packages can be found at the following
 
 ## Loading translations
 
-Pass a language code to `manualTestsPlugin()` to load and combine that language's TypeScript translation files from the configured
-package paths. The selected language becomes the default UI and content language for editors and contexts created by manual tests.
+Pass a language code to `manualTestsPlugin()` to load and combine that language's TypeScript translation files from the configured package paths. The selected language becomes the default UI and content language for editors and contexts created by manual tests.
+
 An explicit language in an editor or context configuration still takes precedence.
 
 ```ts
@@ -23,6 +23,29 @@ manualTestsPlugin( {
 
 For example, start the manual test server in Polish using `CK_LANGUAGE=pl pnpm manual`.
 
+## Preserving production CSS order
+
+Vite may order extracted stylesheets differently from their source imports in multi-page production builds. Add `preserveCssImportOrderPlugin()` to keep the CSS cascade consistent with the bundled development server:
+
+```ts
+import { defineConfig } from 'vite';
+import {
+	manualTestsPlugin,
+	preserveCssImportOrderPlugin
+} from '@ckeditor/ckeditor5-dev-manual-server';
+
+export default defineConfig( {
+	plugins: [
+		preserveCssImportOrderPlugin(),
+		manualTestsPlugin( {
+			paths: [ 'packages/*' ]
+		} )
+	]
+} );
+```
+
+The plugin enables Rolldown's strict module execution order in development and production, which can increase the generated bundle size. During production builds, it additionally rewrites plain CSS imports into ordered JavaScript side effects.
+
 ## Changelog
 
 See the [`CHANGELOG.md`](https://github.com/ckeditor/ckeditor5-dev/blob/master/packages/ckeditor5-dev-manual-server/CHANGELOG.md) file.

package/dist/index.d.ts

@@ -3,6 +3,7 @@
 * For licensing, see LICENSE.md.
 */
 export { manualTestsPlugin, type ManualTestsPluginOptions } from "./manual-test-plugin/plugin.js";
+export { preserveCssImportOrderPlugin } from "./preserve-css-import-order-plugin/plugin.js";
 export { ckDebugPlugin } from "./debug-plugin/plugin.js";
 export { refreshPlugin } from "./refresh-plugin/plugin.js";
 export { rawSvgPlugin } from "./svg-plugin/plugin.js";

package/dist/index.js

@@ -1,6 +1,7 @@
 import { existsSync, globSync, readFileSync, realpathSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { basename, isAbsolute, posix, relative, resolve } from "node:path";
+import { createHash } from "node:crypto";
 //#region src/utils.ts
 /**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
@@ -371,6 +372,78 @@ function parseRequestUrl(requestUrl) {
 	return URL.parse(requestUrl || "", "http://localhost");
 }
 //#endregion
+//#region src/preserve-css-import-order-plugin/plugin.ts
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md.
+*/
+const INJECTED_CSS_VIRTUAL_ID_PREFIX = "\0virtual:ckeditor5-preserve-css-import-order:";
+const INJECTED_CSS_VIRTUAL_ID_SUFFIX = ".js";
+const CSS_FILE_REGEXP = /^[^?#]+\.css$/;
+/**
+* Preserves the source execution order of CSS imports in manual development and production builds.
+*
+* Vite extracts imported CSS into assets and orders those assets by the generated chunk graph.
+* In a multi-page build that order may differ from the source module execution order, changing
+* the cascade between CKEditor stylesheets. This is a known Vite limitation:
+* https://github.com/vitejs/vite/issues/4890.
+*
+* Until Vite handles this natively (https://github.com/vitejs/vite/pull/22541), plain CSS imports
+* in production builds are replaced with virtual JavaScript modules. Each module loads the
+* processed CSS through Vite's `?inline` query and appends it as a `<style>` side effect.
+* Rolldown's `strictExecutionOrder` keeps both these production effects and Vite's native bundled
+* development CSS effects in source order.
+*
+* Query-bearing CSS imports retain their explicit Vite semantics and pass through unchanged.
+*/
+function preserveCssImportOrderPlugin() {
+	let rewriteCssImports = false;
+	const cssFilePaths = /* @__PURE__ */ new Map();
+	return {
+		name: "ckeditor5-preserve-css-import-order",
+		config(_config, { command }) {
+			rewriteCssImports = command == "build";
+			return { build: { rolldownOptions: { output: { strictExecutionOrder: true } } } };
+		},
+		resolveId: {
+			order: "pre",
+			filter: { id: CSS_FILE_REGEXP },
+			async handler(source, importer, options) {
+				if (!rewriteCssImports) return null;
+				const resolved = await this.resolve(source, importer, {
+					...options,
+					skipSelf: true
+				});
+				if (!resolved || resolved.external) return null;
+				const cssIdHash = createHash("sha256").update(resolved.id).digest("hex");
+				const virtualId = `${INJECTED_CSS_VIRTUAL_ID_PREFIX}${cssIdHash}${INJECTED_CSS_VIRTUAL_ID_SUFFIX}`;
+				cssFilePaths.set(virtualId, resolved.id);
+				return virtualId;
+			}
+		},
+		load: {
+			filter: { id: new RegExp(`^${INJECTED_CSS_VIRTUAL_ID_PREFIX}`) },
+			handler(id) {
+				const cssFilePath = cssFilePaths.get(id);
+				if (!cssFilePath) return null;
+				return {
+					code: createCssInjectionModule(cssFilePath),
+					moduleSideEffects: true
+				};
+			}
+		}
+	};
+}
+function createCssInjectionModule(cssFilePath) {
+	return `
+import css from ${JSON.stringify(`${cssFilePath}?inline`)};
+
+const style = document.createElement( 'style' );
+style.textContent = css;
+document.head.appendChild( style );
+`;
+}
+//#endregion
 //#region src/debug-plugin/plugin.ts
 /**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
@@ -524,4 +597,4 @@ function rawSvgPlugin() {
 * For licensing, see LICENSE.md.
 */
 //#endregion
-export { ckDebugPlugin, manualTestsPlugin, rawSvgPlugin, refreshPlugin, stringifyValues };
+export { ckDebugPlugin, manualTestsPlugin, preserveCssImportOrderPlugin, rawSvgPlugin, refreshPlugin, stringifyValues };

package/dist/preserve-css-import-order-plugin/plugin.d.ts

@@ -0,0 +1,22 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md.
+*/
+import type { Plugin } from "vite";
+/**
+* Preserves the source execution order of CSS imports in manual development and production builds.
+*
+* Vite extracts imported CSS into assets and orders those assets by the generated chunk graph.
+* In a multi-page build that order may differ from the source module execution order, changing
+* the cascade between CKEditor stylesheets. This is a known Vite limitation:
+* https://github.com/vitejs/vite/issues/4890.
+*
+* Until Vite handles this natively (https://github.com/vitejs/vite/pull/22541), plain CSS imports
+* in production builds are replaced with virtual JavaScript modules. Each module loads the
+* processed CSS through Vite's `?inline` query and appends it as a `<style>` side effect.
+* Rolldown's `strictExecutionOrder` keeps both these production effects and Vite's native bundled
+* development CSS effects in source order.
+*
+* Query-bearing CSS imports retain their explicit Vite semantics and pass through unchanged.
+*/
+export declare function preserveCssImportOrderPlugin(): Plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-dev-manual-server",
-  "version": "60.0.0",
+  "version": "61.1.0",
   "description": "Used to extend Vite to create a manual test server for CKEditor 5.",
   "keywords": [],
   "author": "CKSource (http://cksource.com/)",