fix: kv-pairs minification issues

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

.changeset/tasty-queens-yell.md

@@ -0,0 +1,5 @@
+---
+"minify-literals": patch
+---
+
+fix issues with kv-pairs

packages/minify-literals/lib/index.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, test } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
 
 import MagicString, { SourceMapOptions } from "magic-string";
 import { ParseLiteralsOptions, Template, TemplatePart, parseLiterals } from "parse-literals";
@@ -13,11 +13,21 @@ import {
 } from "./";
 import { defaultMinifyOptions, defaultStrategy } from "./strategy";
 
+const consoleMock = {
+	log: vi.fn(),
+	warn: vi.fn(),
+	error: vi.fn(),
+};
+
+vi.stubGlobal("console", consoleMock);
+
 // https://github.com/explodingcamera/esm/issues/1
 describe("handle key value pairs correctly", () => {
 	it("should minify html", async () => {
 		const source = `const css = css\`:host{\${"color"}: \${"red"}}\``;
-		expect((await minifyHTMLLiterals(source))?.code).toMatchInlineSnapshot("undefined");
+		expect((await minifyHTMLLiterals(source))?.code).toMatchInlineSnapshot(
+			'"const css = css`:host{${\\"color\\"}:${\\"red\\"}}`"',
+		);
 	});
 });
 
@@ -30,8 +40,10 @@ describe("handle comments correctly", () => {
 	});
 
 	it("templates inside of html comments are not minified", async () => {
+		const spy = vi.spyOn(console, "warn");
 		const source = `const el = html\`<div><!-- \${console.log(1)} --></div>\``;
 		expect(await minifyHTMLLiterals(source)).toBe(null);
+		expect(spy).toHaveBeenCalledTimes(1);
 	});
 
 	it("comments inside of literals are not removed", async () => {
@@ -57,7 +69,9 @@ describe("don't minify code with unsafeCSS / unsafeHTML", () => {
 			\`
 		`.trim();
 
+		const spy = vi.spyOn(console, "warn");
 		expect(await minifyHTMLLiterals(source)).toBe(null);
+		expect(spy).toHaveBeenCalledTimes(1);
 	});
 });
 

packages/minify-literals/lib/strategy.ts

@@ -112,7 +112,7 @@ export const defaultStrategy: Strategy<HTMLOptions, CleanCSS.Options> = {
 
 		if (html.match(/<!--(.*?)@TEMPLATE_EXPRESSION\(\);(.*?)-->/g)) {
 			console.warn(
-				"minify-html-literals:: HTML minification is not supported for template expressions inside comments. Minification for this file will be skipped.",
+				"minify-html-literals: HTML minification is not supported for template expressions inside comments. Minification for this file will be skipped.",
 			);
 			return html;
 		}
@@ -170,7 +170,7 @@ export const defaultStrategy: Strategy<HTMLOptions, CleanCSS.Options> = {
 	async minifyCSS(css, options = {}) {
 		const adjustedOptions = adjustMinifyCSSOptions(options);
 
-		css = css.replaceAll(/@TEMPLATE_EXPRESSION\(\);:/g, "@TEMPLATE_EXPRESSION():");
+		css = css.replaceAll(/@TEMPLATE_EXPRESSION\(\);:/g, "--TEMPLATE-EXPRESSION:");
 		const output = await new CleanCSS({
 			...adjustedOptions,
 			returnPromise: true,
@@ -187,7 +187,7 @@ export const defaultStrategy: Strategy<HTMLOptions, CleanCSS.Options> = {
 			return css.replace(/(\n)|(\r)/g, "");
 		}
 
-		css = css.replaceAll(/@TEMPLATE_EXPRESSION\(\);:/g, "@TEMPLATE_EXPRESSION():");
+		output.styles = output.styles.replaceAll("--TEMPLATE-EXPRESSION:", "@TEMPLATE_EXPRESSION();:");
 		output.styles = fixCleanCssTidySelectors(css, output.styles);
 		return output.styles;
 	},