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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55985

increased by16.73%

Lines of code

1008

increased by17.21%

Number of lines in readme file

160

increased by5.26%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

18

increased by5.88%

Dependency changes

• + Addedclean-css@^4.2.1