From aac674dc7dcfe2cfcc2b51a7f969810fe41e3ddf Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 1 Aug 2023 22:31:09 +0200
Subject: [PATCH] fix: Allow to properly include CSS in library builds by
 importing the CSS files

This way we do not require any DOM environment to be present.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 README.md                | 11 +++++++++++
 lib/appConfig.ts         |  7 +++++++
 lib/baseConfig.ts        |  5 -----
 lib/libConfig.ts         | 21 ++++++++++++--------
 lib/plugins/ImportCSS.ts | 41 +++++++++++++++++++++++++++++++++++++++
 package-lock.json        | 42 ++++++++++++++++++++++++++--------------
 package.json             |  1 +
 7 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 lib/plugins/ImportCSS.ts

diff --git a/README.md b/README.md
index a42788ee..b4117eae 100644
--- a/README.md
+++ b/README.md
@@ -77,3 +77,14 @@ export default createLibConfig({
     },
 })
 ```
+
+## Notes
+
+### Inlining / injecting CSS
+You can enable inlining CSS code, but please note that this is handled differently for apps and libraries.
+
+For apps any styles can be injected in the JS by dynamically inject the styles in the document (creating `<style>` tags).
+But this only works in DOM environments, so for libraries this might not work (e.g. while testing in the Node environment).
+
+So for apps the CSS will still be extracted by Vite, but the extracted CSS assets will be imported.
+This way the library user can decide how to handle the imported CSS without relying on a DOM environment.
\ No newline at end of file
diff --git a/lib/appConfig.ts b/lib/appConfig.ts
index dca60743..8e3d817b 100644
--- a/lib/appConfig.ts
+++ b/lib/appConfig.ts
@@ -12,6 +12,7 @@ import { createBaseConfig } from './baseConfig.js'
 
 import EmptyJSDirPlugin from './plugins/EmptyJSDir.js'
 import replace from '@rollup/plugin-replace'
+import injectCSSPlugin from 'vite-plugin-css-injected-by-js'
 
 export const appName = process.env.npm_package_name
 export const appVersion = process.env.npm_package_version
@@ -59,11 +60,17 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
 			const userConfig = await Promise.resolve(typeof options.config === 'function' ? options.config(env) : options.config)
 
 			const plugins = []
+			// Inject all imported styles into the javascript bundle by creating dynamic styles on the document
+			if (options?.inlineCSS !== false) {
+				plugins.push(injectCSSPlugin())
+			}
+
 			// defaults to true so only not adding if explicitly set to false
 			if (options?.emptyOutputDirectory !== false) {
 				// Ensure `js/` is empty as we can not use the build in option (see below)
 				plugins.push(EmptyJSDirPlugin())
 			}
+
 			// When building in serve mode (e.g. unit tests with vite) the intro option below will be ignored, so we must replace that values
 			if (env.command === 'serve') {
 				plugins.push(replace({
diff --git a/lib/baseConfig.ts b/lib/baseConfig.ts
index 667da4f0..2bbf34c6 100644
--- a/lib/baseConfig.ts
+++ b/lib/baseConfig.ts
@@ -15,7 +15,6 @@ import replace from '@rollup/plugin-replace'
 import vue2 from '@vitejs/plugin-vue2'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
 import license from 'rollup-plugin-license'
-import injectCSSPlugin from 'vite-plugin-css-injected-by-js'
 
 export type NodePolyfillsOptions = Parameters<typeof nodePolyfills>[0]
 
@@ -66,10 +65,6 @@ export function createBaseConfig(options: BaseOptions = {}): UserConfigFn {
 		const userConfig = await Promise.resolve(typeof options.config === 'function' ? options.config(env) : options.config)
 
 		const plugins = []
-		if (options?.inlineCSS !== false) {
-		// Inject all imported styles into the javascript bundle
-			plugins.push(injectCSSPlugin())
-		}
 		if (options?.nodePolyfills) {
 		// Add polyfills for node packages
 			plugins.push(nodePolyfills(typeof options.nodePolyfills === 'object' ? options.nodePolyfills : {}))
diff --git a/lib/libConfig.ts b/lib/libConfig.ts
index 0391fff4..b09bbf18 100644
--- a/lib/libConfig.ts
+++ b/lib/libConfig.ts
@@ -12,6 +12,7 @@ import { createBaseConfig } from './baseConfig.js'
 
 import DTSPlugin, { type PluginOptions as DTSOptions } from 'vite-plugin-dts'
 import { nodeExternals, type ExternalsOptions } from 'rollup-plugin-node-externals'
+import { ImportCSSPlugin } from './plugins/ImportCSS.js'
 
 type OutputOptions = BuildOptions['rollupOptions']['output']
 
@@ -69,6 +70,11 @@ export const createLibConfig = (entries: { [entryAlias: string]: string }, optio
 		node,
 	]
 
+	// Handle inline CSS, this is different on library than on app mode, because app will have a DOM env so styles can injected in the document while libraries might run in node
+	if (options.inlineCSS) {
+		plugins.push(ImportCSSPlugin())
+	}
+
 	// Handle the DTS plugin
 	if (options?.DTSPluginOptions !== false) {
 		plugins.push(DTSPlugin(options.DTSPluginOptions))
@@ -83,10 +89,10 @@ export const createLibConfig = (entries: { [entryAlias: string]: string }, optio
 
 			const assetFileNames = (assetInfo) => {
 				const extType = assetInfo.name.split('.').pop()
-				if (/css/i.test(extType)) {
+				if (!options.inlineCSS && /css/i.test(extType)) {
 					return '[name].css'
 				}
-				return '[name]-[hash][extname]'
+				return 'assets/[name][extname]'
 			}
 
 			// Manually define output options for file extensions
@@ -94,13 +100,11 @@ export const createLibConfig = (entries: { [entryAlias: string]: string }, optio
 				const extension = format === 'es' ? 'mjs' : (format === 'cjs' ? 'cjs' : `${format}.js`)
 				return {
 					format,
+					hoistTransitiveImports: false, // For libraries this might otherwise introduce side effects
+					preserveModules: false,
 					assetFileNames,
-					entryFileNames: () => {
-						return `[name].${extension}`
-					},
-					chunkFileNames: () => {
-						return `chunks/[name]-[hash].${extension}`
-					},
+					entryFileNames: `[name].${extension}`,
+					chunkFileNames: `chunks/[name]-[hash].${extension}`,
 				}
 			})
 
@@ -112,6 +116,7 @@ export const createLibConfig = (entries: { [entryAlias: string]: string }, optio
 							...entries,
 						},
 					},
+					cssCodeSplit: true,
 					outDir: 'dist',
 					rollupOptions: {
 						external: [/^core-js\//],
diff --git a/lib/plugins/ImportCSS.ts b/lib/plugins/ImportCSS.ts
new file mode 100644
index 00000000..966a317d
--- /dev/null
+++ b/lib/plugins/ImportCSS.ts
@@ -0,0 +1,41 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Plugin } from 'vite'
+import MagicString from 'magic-string'
+import { dirname, relative } from 'node:path'
+
+/**
+ * Plugin that imports splitted CSS assets used by current entry point
+ *
+ * Basically this automatically imports all splitted CSS so that the users build system can decide what to do with the styles.
+ * Because injecting is only possible with a DOM environement (not on SSR).
+ */
+export const ImportCSSPlugin: () => Plugin = () => {
+	return {
+		name: 'vite-import-css-libmode',
+		enforce: 'post',
+		renderChunk(code, chunk) {
+			if (!chunk.viteMetadata) return
+			const { importedCss } = chunk.viteMetadata
+			if (!importedCss.size) return
+
+			/**
+			 * Inject the referenced style files at the top of the chunk.
+			 */
+			const ms = new MagicString(code)
+			for (const cssFileName of importedCss) {
+				let cssFilePath = relative(dirname(chunk.fileName), cssFileName)
+				cssFilePath = cssFilePath.startsWith('.') ? cssFilePath : `./${cssFilePath}`
+				ms.prepend(`import '${cssFilePath}';\n`)
+			}
+			return {
+				code: ms.toString(),
+				map: ms.generateMap(),
+			}
+		},
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index 0ec93725..d42e6c6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
 				"@rollup/plugin-replace": "^5.0.2",
 				"@vitejs/plugin-vue2": "^2.2.0",
 				"browserslist-to-esbuild": "^1.2.0",
+				"magic-string": "^0.30.2",
 				"rollup-plugin-corejs": "^1.0.0-beta.0",
 				"rollup-plugin-esbuild-minify": "^1.1.0",
 				"rollup-plugin-license": "^3.0.1",
@@ -1159,6 +1160,17 @@
 				}
 			}
 		},
+		"node_modules/@rollup/plugin-inject/node_modules/magic-string": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.13"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@rollup/plugin-replace": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz",
@@ -1179,6 +1191,17 @@
 				}
 			}
 		},
+		"node_modules/@rollup/plugin-replace/node_modules/magic-string": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.13"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -4701,11 +4724,11 @@
 			"dev": true
 		},
 		"node_modules/magic-string": {
-			"version": "0.27.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+			"version": "0.30.2",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz",
+			"integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==",
 			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.13"
+				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
 			"engines": {
 				"node": ">=12"
@@ -5590,17 +5613,6 @@
 				"rollup": "^3.0"
 			}
 		},
-		"node_modules/rollup-plugin-corejs/node_modules/magic-string": {
-			"version": "0.30.1",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
-			"integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/rollup-plugin-esbuild-minify": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-esbuild-minify/-/rollup-plugin-esbuild-minify-1.1.0.tgz",
diff --git a/package.json b/package.json
index e1819746..aacdb719 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 		"@rollup/plugin-replace": "^5.0.2",
 		"@vitejs/plugin-vue2": "^2.2.0",
 		"browserslist-to-esbuild": "^1.2.0",
+		"magic-string": "^0.30.2",
 		"rollup-plugin-corejs": "^1.0.0-beta.0",
 		"rollup-plugin-esbuild-minify": "^1.1.0",
 		"rollup-plugin-license": "^3.0.1",