minify-html-literals - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Change Log
 
+<a name="1.2.0"></a>
+
+# [1.2.0](https://github.com/asyncLiz/minify-html-literals/compare/v1.1.2...v1.2.0) (2019-02-13)
+
+### Features
+
+- add ability to minify css-tagged templates ([d37a037](https://github.com/asyncLiz/minify-html-literals/commit/d37a037)), closes [#3](https://github.com/asyncLiz/minify-html-literals/issues/3)
+
 <a name="1.1.2"></a>
@@ -7,0 +15,0 @@

package.json

 {
   "name": "minify-html-literals",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Minify HTML template literal strings",
@@ -60,2 +60,3 @@ "main": "index.js",
     "@types/html-minifier": "^3.5.2",
+    "clean-css": "^4.2.1",
     "html-minifier": "^3.5.21",
@@ -67,2 +68,3 @@ "magic-string": "^0.25.0",
     "@types/chai": "^4.1.4",
+    "@types/clean-css": "^4.2.0",
     "@types/mocha": "^5.2.5",
@@ -69,0 +71,0 @@ "@types/node": "^10.5.2",

README.md

@@ -75,7 +75,9 @@ # minify-html-literals
 
-| Property         | Type                                                                                         | Default                | Description                                                                                                                                                         |
-| ---------------- | -------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fileName`       | string                                                                                       |                        | _Required._ The name of the file, used for syntax parsing and source maps.                                                                                          |
-| `minifyOptions?` | [html-minifier options](https://www.npmjs.com/package/html-minifier#options-quick-reference) | `defaultMinifyOptions` | Defaults to production-ready minification.                                                                                                                          |
-| `shouldMinify?`  | function                                                                                     | `defaultShouldMinify`  | A function that determines whether or not a template should be minified. Defaults to minify all tagged templates whose tag name contains "html" (case insensitive). |
+| Property                    | Type                                                                                         | Default                   | Description                                                                                                                                                               |
+| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fileName`                  | string                                                                                       |                           | _Required._ The name of the file, used for syntax parsing and source maps.                                                                                                |
+| `minifyOptions?`            | [html-minifier options](https://www.npmjs.com/package/html-minifier#options-quick-reference) | `defaultMinifyOptions`    | Defaults to production-ready minification.                                                                                                                                |
+| `minifyOptions?.minifyCSS?` | [clean-css options](https://www.npmjs.com/package/clean-css#constructor-options)             | `defaultMinifyCSSOptions` | Uses clean-css defaults.                                                                                                                                                  |
+| `shouldMinify?`             | function                                                                                     | `defaultShouldMinify`     | A function that determines whether or not an HTML template should be minified. Defaults to minify all tagged templates whose tag name contains "html" (case insensitive). |
+| `shouldMinifyCSS?`          | function                                                                                     | `defaultShouldMinifyCSS`  | A function that determines whether or not a CSS template should be minified. Defaults to minify all tagged templates whose tag name contains "css" (case insensitive).    |
 
@@ -97,18 +99,6 @@ ### Advanced
 
-### Do not minify CSS
+### Minify non-tagged templates
 
-```js
-import { minifyHTMLLiterals, defaultMinifyOptions } from 'minify-html-literals';
+> This is particularly useful for libraries that define templates without using tags, such as Polymer's `<dom-module>`.
 
-minifyHTMLLiterals(source, {
-  fileName: 'render.js',
-  minifyOptions: {
-    ...defaultMinifyOptions,
-    minifyCSS: false
-  }
-});
-```
-
-### Minify non-tagged templates
-
 ```js
@@ -118,10 +108,13 @@ import { minifyHTMLLiterals, defaultShouldMinify } from 'minify-html-literals';
 minifyHTMLLiterals(
-  `function render() {
-    return html\`
-      <h1>This tagged template is minified</h1>
-      \${\`
-        <div>and so is this non-tagged template</div>
-      \`}
+  `
+    template.innerHTML = \`
+      <dom-module id="custom-styles">
+        <style>
+          html {
+            --custom-color: blue;
+          }
+        </style>
+      </dom-module>
     \`;
-  }`,
+  `,
   {
@@ -133,3 +126,3 @@ fileName: 'render.js',
         template.parts.some(part => {
-          return part.text.includes('<div>');
+          return part.text.includes('<dom-module>');
         })
@@ -142,2 +135,17 @@ );
 
+### Do not minify CSS
+
+```js
+import { minifyHTMLLiterals, defaultMinifyOptions } from 'minify-html-literals';
+
+minifyHTMLLiterals(source, {
+  fileName: 'render.js',
+  minifyOptions: {
+    ...defaultMinifyOptions,
+    minifyCSS: false
+  },
+  shouldMinifyCSS: () => false
+});
+```
+
 ### Modify generated SourceMap
@@ -144,0 +152,0 @@

src/minifyHTMLLiterals.d.ts

@@ -81,2 +81,11 @@ import { SourceMapOptions } from 'magic-string';
     /**
+     * Determines whether or not a CSS template should be minified. The default is
+     * to minify all tagged template whose tag name contains "css" (case
+     * insensitive).
+     *
+     * @param template the template to check
+     * @returns true if the template should be minified
+     */
+    shouldMinifyCSS?(template: Template): boolean;
+    /**
      * Override custom validation or set to false to disable validation. This is
@@ -170,2 +179,11 @@ * only useful when implementing your own strategy that may return
 /**
+ * The default method to determine whether or not to minify a CSS template. It
+ * will return true for all tagged templates whose tag name contains "css" (case
+ * insensitive).
+ *
+ * @param template the template to check
+ * @returns true if the template should be minified
+ */
+export declare function defaultShouldMinifyCSS(template: Template): boolean;
+/**
  * The default validation.
@@ -172,0 +190,0 @@ */

src/minifyHTMLLiterals.js

@@ -36,2 +36,14 @@ "use strict";
 /**
+ * The default method to determine whether or not to minify a CSS template. It
+ * will return true for all tagged templates whose tag name contains "css" (case
+ * insensitive).
+ *
+ * @param template the template to check
+ * @returns true if the template should be minified
+ */
+function defaultShouldMinifyCSS(template) {
+    return !!template.tag && template.tag.toLowerCase().includes('css');
+}
+exports.defaultShouldMinifyCSS = defaultShouldMinifyCSS;
+/**
  * The default validation.
@@ -65,2 +77,5 @@ */
     }
+    if (!options.shouldMinifyCSS) {
+        options.shouldMinifyCSS = defaultShouldMinifyCSS;
+    }
     options.parseLiteralsOptions = {
@@ -72,3 +87,3 @@ ...{ fileName: options.fileName },
     const strategy = options.strategy || strategy_1.defaultStrategy;
-    const { shouldMinify } = options;
+    const { shouldMinify, shouldMinifyCSS } = options;
     let validate;
@@ -80,3 +95,5 @@ if (options.validate !== false) {
     templates.forEach(template => {
-        if (shouldMinify(template)) {
+        const minifyHTML = shouldMinify(template);
+        const minifyCSS = !!strategy.minifyCSS && shouldMinifyCSS(template);
+        if (minifyHTML || minifyCSS) {
             const placeholder = strategy.getPlaceholder(template.parts);
@@ -86,4 +103,20 @@ if (validate) {
             }
-            const html = strategy.combineHTMLStrings(template.parts, placeholder);
-            const min = strategy.minifyHTML(html, options.minifyOptions);
+            const combined = strategy.combineHTMLStrings(template.parts, placeholder);
+            let min;
+            if (minifyCSS) {
+                const minifyCSSOptions = (options.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);
+                }
+            }
+            else {
+                min = strategy.minifyHTML(combined, options.minifyOptions);
+            }
             const minParts = strategy.splitHTMLByPlaceholder(min, placeholder);
@@ -90,0 +123,0 @@ if (validate) {

src/minifyHTMLLiterals.ts

@@ -90,2 +90,11 @@ import MagicString, { SourceMapOptions } from 'magic-string';
   /**
+   * Determines whether or not a CSS template should be minified. The default is
+   * to minify all tagged template whose tag name contains "css" (case
+   * insensitive).
+   *
+   * @param template the template to check
+   * @returns true if the template should be minified
+   */
+  shouldMinifyCSS?(template: Template): boolean;
+  /**
    * Override custom validation or set to false to disable validation. This is
@@ -197,2 +206,14 @@ * only useful when implementing your own strategy that may return
 /**
+ * The default method to determine whether or not to minify a CSS template. It
+ * will return true for all tagged templates whose tag name contains "css" (case
+ * insensitive).
+ *
+ * @param template the template to check
+ * @returns true if the template should be minified
+ */
+export function defaultShouldMinifyCSS(template: Template) {
+  return !!template.tag && template.tag.toLowerCase().includes('css');
+}
+
+/**
  * The default validation.
@@ -258,2 +279,6 @@ */
 
+  if (!options.shouldMinifyCSS) {
+    options.shouldMinifyCSS = defaultShouldMinifyCSS;
+  }
+
   options.parseLiteralsOptions = {
@@ -265,4 +290,5 @@ ...{ fileName: options.fileName },
   const templates = options.parseLiterals(source, options.parseLiteralsOptions);
-  const strategy = (<CustomOptions<any>>options).strategy || defaultStrategy;
-  const { shouldMinify } = options;
+  const strategy =
+    <Strategy>(<CustomOptions<any>>options).strategy || defaultStrategy;
+  const { shouldMinify, shouldMinifyCSS } = options;
   let validate: Validation | undefined;
@@ -275,3 +301,5 @@ if (options.validate !== false) {
   templates.forEach(template => {
-    if (shouldMinify(template)) {
+    const minifyHTML = shouldMinify(template);
+    const minifyCSS = !!strategy.minifyCSS && shouldMinifyCSS(template);
+    if (minifyHTML || minifyCSS) {
       const placeholder = strategy.getPlaceholder(template.parts);
@@ -282,4 +310,19 @@ if (validate) {
 
-      const html = strategy.combineHTMLStrings(template.parts, placeholder);
-      const min = strategy.minifyHTML(html, options.minifyOptions);
+      const combined = strategy.combineHTMLStrings(template.parts, placeholder);
+      let min: string;
+      if (minifyCSS) {
+        const minifyCSSOptions = (options.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);
+        }
+      } else {
+        min = strategy.minifyHTML(combined, options.minifyOptions);
+      }
+
       const minParts = strategy.splitHTMLByPlaceholder(min, placeholder);
@@ -286,0 +329,0 @@ if (validate) {

src/strategy.d.ts

@@ -1,7 +0,11 @@
-import { Options } from 'html-minifier';
+import * as CleanCSS from 'clean-css';
+import { Options as HTMLOptions } from 'html-minifier';
 import { TemplatePart } from 'parse-literals';
 /**
- * A strategy on how to minify HTML.
+ * A strategy on how to minify HTML and optionally CSS.
+ *
+ * @template O minify HTML options
+ * @template C minify CSS options
  */
-export interface Strategy<O = any> {
+export interface Strategy<O = any, C = any> {
     /**
@@ -33,3 +37,3 @@ * Retrieve a placeholder for the given array of template parts. The
      * @param html the html to minify
-     * @param options minify options
+     * @param options html minify options
      * @returns minified HTML string
@@ -39,2 +43,10 @@ */
     /**
+     * Minifies the provided CSS string.
+     *
+     * @param css the css to minfiy
+     * @param options css minify options
+     * @returns minified CSS string
+     */
+    minifyCSS?(css: string, options?: C): string;
+    /**
      * Splits a minfied HTML string back into an array of strings from the
@@ -51,9 +63,15 @@ * provided placeholder. The returned array of strings should be the same
 /**
+ * The default <code>clean-css</code> options, optimized for production
+ * minification.
+ */
+export declare const defaultMinifyCSSOptions: CleanCSS.Options;
+/**
  * The default <code>html-minifier</code> options, optimized for production
  * minification.
  */
-export declare const defaultMinifyOptions: Options;
+export declare const defaultMinifyOptions: HTMLOptions;
 /**
- * The default strategy. This uses <code>html-minifier</code> to minify HTML.
+ * The default strategy. This uses <code>html-minifier</code> to minify HTML and
+ * <code>clean-css</code> to minify CSS.
  */
-export declare const defaultStrategy: Strategy<Options>;
+export declare const defaultStrategy: Strategy<HTMLOptions, CleanCSS.Options>;

src/strategy.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const CleanCSS = require("clean-css");
 const html_minifier_1 = require("html-minifier");
 /**
+ * The default <code>clean-css</code> options, optimized for production
+ * minification.
+ */
+exports.defaultMinifyCSSOptions = {};
+/**
  * The default <code>html-minifier</code> options, optimized for production
@@ -12,3 +18,3 @@ * minification.
     decodeEntities: true,
-    minifyCSS: true,
+    minifyCSS: exports.defaultMinifyCSSOptions,
     minifyJS: true,
@@ -24,3 +30,4 @@ processConditionalComments: true,
 /**
- * The default strategy. This uses <code>html-minifier</code> to minify HTML.
+ * The default strategy. This uses <code>html-minifier</code> to minify HTML and
+ * <code>clean-css</code> to minify CSS.
  */
@@ -76,2 +83,9 @@ exports.defaultStrategy = {
     },
+    minifyCSS(css, options = {}) {
+        const output = new CleanCSS(options).minify(css);
+        if (output.errors && output.errors.length) {
+            throw new Error(output.errors.join('\n\n'));
+        }
+        return output.styles;
+    },
     splitHTMLByPlaceholder(html, placeholder) {
@@ -78,0 +92,0 @@ // Make the last character (a semicolon) optional. See above.

src/strategy.ts

@@ -1,8 +0,12 @@
-import { Options, minify } from 'html-minifier';
+import * as CleanCSS from 'clean-css';
+import { Options as HTMLOptions, minify } from 'html-minifier';
 import { TemplatePart } from 'parse-literals';
 
 /**
- * A strategy on how to minify HTML.
+ * A strategy on how to minify HTML and optionally CSS.
+ *
+ * @template O minify HTML options
+ * @template C minify CSS options
  */
-export interface Strategy<O = any> {
+export interface Strategy<O = any, C = any> {
   /**
@@ -34,3 +38,3 @@ * Retrieve a placeholder for the given array of template parts. The
    * @param html the html to minify
-   * @param options minify options
+   * @param options html minify options
    * @returns minified HTML string
@@ -40,2 +44,10 @@ */
   /**
+   * Minifies the provided CSS string.
+   *
+   * @param css the css to minfiy
+   * @param options css minify options
+   * @returns minified CSS string
+   */
+  minifyCSS?(css: string, options?: C): string;
+  /**
    * Splits a minfied HTML string back into an array of strings from the
@@ -53,10 +65,16 @@ * provided placeholder. The returned array of strings should be the same
 /**
+ * The default <code>clean-css</code> options, optimized for production
+ * minification.
+ */
+export const defaultMinifyCSSOptions: CleanCSS.Options = {};
+
+/**
  * The default <code>html-minifier</code> options, optimized for production
  * minification.
  */
-export const defaultMinifyOptions: Options = {
+export const defaultMinifyOptions: HTMLOptions = {
   caseSensitive: true,
   collapseWhitespace: true,
   decodeEntities: true,
-  minifyCSS: true,
+  minifyCSS: defaultMinifyCSSOptions,
   minifyJS: true,
@@ -73,5 +91,6 @@ processConditionalComments: true,
 /**
- * The default strategy. This uses <code>html-minifier</code> to minify HTML.
+ * The default strategy. This uses <code>html-minifier</code> to minify HTML and
+ * <code>clean-css</code> to minify CSS.
  */
-export const defaultStrategy: Strategy<Options> = {
+export const defaultStrategy: Strategy<HTMLOptions, CleanCSS.Options> = {
   getPlaceholder(parts) {
@@ -130,2 +149,10 @@ // Using @ and (); will cause the expression not to be removed in CSS.
   },
+  minifyCSS(css, options = {}) {
+    const output = new CleanCSS(options).minify(css);
+    if (output.errors && output.errors.length) {
+      throw new Error(output.errors.join('\n\n'));
+    }
+
+    return output.styles;
+  },
   splitHTMLByPlaceholder(html, placeholder) {
@@ -132,0 +159,0 @@ // Make the last character (a semicolon) optional. See above.

No alert changes

Improved metrics

Total package byte prevSize

55985

16.73%

Lines of code

1008

17.21%

Number of lines in readme file

160

5.26%

Worsened metrics

Dependency count

5

25%

Dev dependency count

18

5.88%

Dependency changes

• + Added

  clean-css@^4.2.1