use different placeholder for CSS minification

lit · Apr 25, 2024 · 21da6de · 21da6de
1 parent 5d4194f
commit 21da6de
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/packages/labs/rollup-plugin-minify-html-literals/src/lib/minify-html-literals.ts b/packages/labs/rollup-plugin-minify-html-literals/src/lib/minify-html-literals.ts
@@ -294,32 +294,48 @@ export function minifyHTMLLiterals(
   templates.forEach((template) => {
     const minifyHTML = shouldMinify(template);
     const minifyCSS = !!strategy.minifyCSS && shouldMinifyCSS(template);
-    if (minifyHTML || minifyCSS) {
+    if (minifyHTML) {
       const placeholder = strategy.getPlaceholder(template.parts);
       if (validate) {
         validate.ensurePlaceholderValid(placeholder);
       }
 
       const combined = strategy.combineHTMLStrings(template.parts, placeholder);
-      let min: string;
-      if (minifyCSS) {
-        const minifyCSSOptions = (
-          (options as DefaultOptions).minifyOptions || {}
-        ).minifyCSS;
-        if (typeof minifyCSSOptions === 'function') {
-          min = minifyCSSOptions(combined);
-        } else if (minifyCSSOptions === false) {
-          min = combined;
-        } else {
-          const cssOptions =
-            typeof minifyCSSOptions === 'object' ? minifyCSSOptions : undefined;
-          min = strategy.minifyCSS!(combined, cssOptions);
+      const min = strategy.minifyHTML(combined, options.minifyOptions);
+
+      const minParts = strategy.splitHTMLByPlaceholder(min, placeholder);
+      if (validate) {
+        validate.ensureHTMLPartsValid(template.parts, minParts);
+      }
+
+      template.parts.forEach((part, index) => {
+        if (part.start < part.end) {
+          // Only overwrite if the literal part has text content
+          ms.overwrite(part.start, part.end, minParts[index]);
         }
+      });
+    } else if (minifyCSS) {
+      const placeholder = 'TEMPLATE_EXPRESSION';
+      if (validate) {
+        validate.ensurePlaceholderValid(placeholder);
+      }
+
+      const combined = strategy.combineHTMLStrings(template.parts, placeholder);
+      let min: string;
+      const minifyCSSOptions = ((options as DefaultOptions).minifyOptions || {})
+        .minifyCSS;
+      if (typeof minifyCSSOptions === 'function') {
+        min = minifyCSSOptions(combined);
+      } else if (minifyCSSOptions === false) {
+        min = combined;
       } else {
-        min = strategy.minifyHTML(combined, options.minifyOptions);
+        const cssOptions =
+          typeof minifyCSSOptions === 'object' ? minifyCSSOptions : undefined;
+        min = strategy.minifyCSS!(combined, cssOptions);
       }
 
       const minParts = strategy.splitHTMLByPlaceholder(min, placeholder);
+
       if (validate) {
         validate.ensureHTMLPartsValid(template.parts, minParts);
       }

diff --git a/packages/labs/rollup-plugin-minify-html-literals/src/test/minify-html-literals.spec.ts b/packages/labs/rollup-plugin-minify-html-literals/src/test/minify-html-literals.spec.ts
@@ -85,11 +85,11 @@ describe('minify-html-literals', () => {
           font-size: 24px;
         }
 
+        \${extra}
+
         .footer {
           margin: \${marginSize2} 0;
         }
-
-        \${extra}
       \`;
     }
 
@@ -131,7 +131,7 @@ describe('minify-html-literals', () => {
     }
 
     function taggedCSSMinify(extra) {
-      return css\`.heading{font-size:24px}\${extra}\`;
+      return css\`.heading{font-size:24px}\${extra} .footer{margin:\${marginSize2} 0}\`;
     }
 
     function cssProperty(property) {