feat: handle empty CSS in Svelte components

This commit introduces a new feature to handle cases where the CSS in
a Svelte component is empty. If the CSS is empty, a style tag is now
added to the component. This change is reflected in the src/index.ts
file where the new feature is implemented. Additionally, the
svelte-parse-markup package has been added to the project to assist
with this feature, as reflected in the package.json and pnpm-lock.yaml
files.

Author: ryoppippi

package.json

@@ -22,6 +22,7 @@
 		"magic-string": "^0.30.11",
 		"mlly": "^1.7.1",
 		"svelte": "5.0.0-next.210",
+		"svelte-parse-markup": "^0.1.5",
 		"uint8array-extras": "^1.4.0",
 		"unconfig": "^0.5.5",
 		"zimmerframe": "^1.1.2"

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import MagicString from 'magic-string';
 import type { PreprocessorGroup } from 'svelte/compiler';
+import { parse } from 'svelte-parse-markup';
 import { findStaticImports } from 'mlly';
 import { genObjectFromValues } from 'knitwork';
 import { loadAliases } from './utils/alias';
@@ -11,6 +12,22 @@ import { getCssModule, getCssModuleImports } from './utils/css-module';
 export function cssModules(): PreprocessorGroup {
 	const cssModuleCache = new Map<string, CssModule[]>();
 	return {
+		markup({ content, filename }) {
+			const ast = parse(content);
+
+			/* if css is empty, add style tag */
+			if (ast.css == null) {
+				const s = new MagicString(content);
+				s.append('\n<style>\n</style>\n');
+				return {
+					code: s.toString(),
+					map: s.generateMap({
+						source: filename,
+						includeContent: true,
+					}),
+				};
+			}
+		},
 		async script({ content, filename }) {
 			const aliases = await loadAliases();
 			const s = new MagicString(content);