minify-html-literals - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+<a name="1.1.2"></a>
+
+## [1.1.2](https://github.com/asyncLiz/minify-html-literals/compare/v1.1.1...v1.1.2) (2018-11-29)
+
+### Bug Fixes
+
+- update to html-minifier 3.5.21 ([11a9f6b](https://github.com/asyncLiz/minify-html-literals/commit/11a9f6b))
+- **strategy:** error when minifying inline CSS style placeholders [#1](https://github.com/asyncLiz/minify-html-literals/issues/1) ([2226ae2](https://github.com/asyncLiz/minify-html-literals/commit/2226ae2))
+
 <a name="1.1.1"></a>
@@ -7,0 +16,0 @@

package.json

 {
   "name": "minify-html-literals",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Minify HTML template literal strings",
@@ -60,3 +60,3 @@ "main": "index.js",
     "@types/html-minifier": "^3.5.2",
-    "html-minifier": "^3.5.19",
+    "html-minifier": "^3.5.21",
     "magic-string": "^0.25.0",
@@ -63,0 +63,0 @@ "parse-literals": "^1.1.0"

src/minifyHTMLLiterals.ts

@@ -175,3 +175,3 @@ import MagicString, { SourceMapOptions } from 'magic-string';
   fileName: string
-): SourceMap {
+) {
   return ms.generateMap({
@@ -192,3 +192,3 @@ file: `${fileName}.map`,
  */
-export function defaultShouldMinify(template: Template): boolean {
+export function defaultShouldMinify(template: Template) {
   return !!template.tag && template.tag.toLowerCase().includes('html');
@@ -201,3 +201,3 @@ }
 export const defaultValidation: Validation = {
-  ensurePlaceholderValid(placeholder: any) {
+  ensurePlaceholderValid(placeholder) {
     if (typeof placeholder !== 'string' || !placeholder.length) {
@@ -207,3 +207,3 @@ throw new Error('getPlaceholder() must return a non-empty string');
   },
-  ensureHTMLPartsValid(parts: TemplatePart[], htmlParts: string[]) {
+  ensureHTMLPartsValid(parts, htmlParts) {
     if (parts.length !== htmlParts.length) {
@@ -210,0 +210,0 @@ throw new Error(

src/strategy.js

@@ -27,2 +27,6 @@ "use strict";
     getPlaceholder(parts) {
+        // Using @ and (); will cause the expression not to be removed in CSS.
+        // However, sometimes the semicolon can be removed (ex: inline styles).
+        // In those cases, we want to make sure that the HTML splitting also
+        // accounts for the missing semicolon.
         const suffix = '();';
@@ -38,6 +42,38 @@ let placeholder = '@TEMPLATE_EXPRESSION';
     },
-    minifyHTML(html, options) {
-        return html_minifier_1.minify(html, options);
+    minifyHTML(html, options = {}) {
+        let minifyCSSOptions;
+        if (options.minifyCSS) {
+            if (options.minifyCSS !== true &&
+                typeof options.minifyCSS !== 'function') {
+                minifyCSSOptions = { ...options.minifyCSS };
+            }
+            else {
+                minifyCSSOptions = {};
+            }
+        }
+        else {
+            minifyCSSOptions = false;
+        }
+        if (minifyCSSOptions && typeof minifyCSSOptions.level === 'undefined') {
+            minifyCSSOptions.level = {
+                1: {
+                    transform(_property, value) {
+                        if (value.startsWith('@TEMPLATE_EXPRESSION') &&
+                            !value.endsWith(';')) {
+                            // The CSS minifier has removed the semicolon from the placeholder
+                            // and we need to add it back.
+                            return `${value};`;
+                        }
+                    }
+                }
+            };
+        }
+        return html_minifier_1.minify(html, {
+            ...options,
+            minifyCSS: minifyCSSOptions
+        });
     },
     splitHTMLByPlaceholder(html, placeholder) {
+        // Make the last character (a semicolon) optional. See above.
+        // return html.split(new RegExp(`${placeholder}?`, 'g'));
         return html.split(placeholder);
@@ -44,0 +80,0 @@ }

src/strategy.ts

@@ -73,3 +73,7 @@ import { Options, minify } from 'html-minifier';
 export const defaultStrategy: Strategy<Options> = {
-  getPlaceholder(parts: TemplatePart[]): string {
+  getPlaceholder(parts) {
+    // Using @ and (); will cause the expression not to be removed in CSS.
+    // However, sometimes the semicolon can be removed (ex: inline styles).
+    // In those cases, we want to make sure that the HTML splitting also
+    // accounts for the missing semicolon.
     const suffix = '();';
@@ -83,11 +87,47 @@ let placeholder = '@TEMPLATE_EXPRESSION';
   },
-  combineHTMLStrings(parts: TemplatePart[], placeholder: string): string {
+  combineHTMLStrings(parts, placeholder) {
     return parts.map(part => part.text).join(placeholder);
   },
-  minifyHTML(html: string, options?: Options): string {
-    return minify(html, options);
+  minifyHTML(html, options = {}) {
+    let minifyCSSOptions: any;
+    if (options.minifyCSS) {
+      if (
+        options.minifyCSS !== true &&
+        typeof options.minifyCSS !== 'function'
+      ) {
+        minifyCSSOptions = { ...options.minifyCSS };
+      } else {
+        minifyCSSOptions = {};
+      }
+    } else {
+      minifyCSSOptions = false;
+    }
+
+    if (minifyCSSOptions && typeof minifyCSSOptions.level === 'undefined') {
+      minifyCSSOptions.level = {
+        1: {
+          transform(_property: string, value: string) {
+            if (
+              value.startsWith('@TEMPLATE_EXPRESSION') &&
+              !value.endsWith(';')
+            ) {
+              // The CSS minifier has removed the semicolon from the placeholder
+              // and we need to add it back.
+              return `${value};`;
+            }
+          }
+        }
+      };
+    }
+
+    return minify(html, {
+      ...options,
+      minifyCSS: minifyCSSOptions
+    });
   },
-  splitHTMLByPlaceholder(html: string, placeholder: string): string[] {
+  splitHTMLByPlaceholder(html, placeholder) {
+    // Make the last character (a semicolon) optional. See above.
+    // return html.split(new RegExp(`${placeholder}?`, 'g'));
     return html.split(placeholder);
   }
 };

test.js

@@ -1,39 +0,3 @@
-import * as page from './page.css';
-import { default as html } from 'tagged-template-noop';
-
-function _getFullTemplate() {
-  const template = html`
-    <style>
-      .stuff {
-        background: blue;
-      }
-    </style>
-    <section id="page"
-        class="${page.page}">
-      <div class="${
-        page.pageWarn
-      }" role="complementary" aria-label="Service Warning">
-        <slot name="page-warn"></slot>
-      </div>
-      <header class="${page.pageHead}" role="banner">
-        <svg class="${page.pageHeadLogo}"></svg>
-        <nav class="${page.pageHeadMenu}" aria-label="TODO">
-          <slot name="page-head-menu"></slot>
-        </nav>
-      </header>
-      <nav class="${page.pageMenu}" aria-label="TODO">
-        <slot name="page-menu"></slot>
-      </nav>
-      <main class="${page.pageMain}">
-        <slot name="page-main">
-          <slot></slot>
-        </slot>
-      </main>
-      <footer class="${page.pageFoot}" role="contentinfo">
-        <slot name="page-foot"></slot>
-      </footer>
-    </section>
-  `;
-  // TODO: workaround for https://github.com/asyncLiz/rollup-plugin-minify-html-literals/issues/1
-  return [template, '<style>', page.styles, '</style>'].join('');
-}
+console.log(require('./index.js').minifyHTMLLiterals(
+	'html`<p style="color: ${color}"></p>`'
+));

No alert changes

Improved metrics

Total package byte prevSize

47961

increased by5.95%

Lines of code

860

increased by4.75%

Dependency changes

• + Added@types/node@22.13.1(transitive)

• - Removed@types/node@22.13.4(transitive)

• Updatedhtml-minifier@^3.5.21