Minify HTML and CSS template literals (#15624)

build-scripts/bundle.js

@@ -53,13 +53,23 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
+module.exports.htmlMinifierOptions = {
+  caseSensitive: true,
+  collapseWhitespace: true,
+  conservativeCollapse: true,
+  decodeEntities: true,
+  removeComments: true,
+  removeRedundantAttributes: true,
+  minifyCSS: true,
+};
+
 module.exports.terserOptions = (latestBuild) => ({
   safari10: !latestBuild,
   ecma: latestBuild ? undefined : 5,
   output: { comments: false },
 });
 
-module.exports.babelOptions = ({ latestBuild }) => ({
+module.exports.babelOptions = ({ latestBuild, isProdBuild }) => ({
   babelrc: false,
   compact: false,
   presets: [
@@ -93,12 +103,26 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-top-level-await",
+    // Support  various proposals
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
     ["@babel/plugin-proposal-private-methods", { loose: true }],
     ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
     ["@babel/plugin-proposal-class-properties", { loose: true }],
+    // Minify template literals for production
+    isProdBuild && [
+      "template-html-minifier",
+      {
+        modules: {
+          lit: ["html", "svg", { name: "css", encapsulation: "style" }],
+          "@polymer/polymer/lib/utils/html-tag": ["html"],
+        },
+        strictCSS: true,
+        htmlMinifier: module.exports.htmlMinifierOptions,
+        failOnError: true, // we can turn this off in case of false positives
+      },
+    ],
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux

build-scripts/rollup.js

@@ -54,7 +54,7 @@ const createRollupConfig = ({
       commonjs(),
       json(),
       babel({
-        ...bundle.babelOptions({ latestBuild }),
+        ...bundle.babelOptions({ latestBuild, isProdBuild }),
         extensions,
         babelHelpers: isWDS ? "inline" : "bundled",
       }),

build-scripts/webpack.js

@@ -51,7 +51,7 @@ const createWebpackConfig = ({
           use: {
             loader: "babel-loader",
             options: {
-              ...bundle.babelOptions({ latestBuild }),
+              ...bundle.babelOptions({ latestBuild, isProdBuild }),
               cacheDirectory: !isProdBuild,
               cacheCompression: false,
             },

package.json

@@ -186,6 +186,7 @@
     "@web/dev-server": "^0.1.35",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^9.1.2",
+    "babel-plugin-template-html-minifier": "^4.1.0",
     "chai": "^4.3.7",
     "del": "^7.0.0",
     "eslint": "^8.35.0",

yarn.lock

@@ -6007,6 +6007,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-template-html-minifier@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "babel-plugin-template-html-minifier@npm:4.1.0"
+  dependencies:
+    clean-css: ^4.2.1
+    html-minifier-terser: ^5.0.0
+    is-builtin-module: ^3.0.0
+  checksum: 85102c9cc1f5026cde52549a79bbb595aaed6316fd990b3b353315bd6ecf0e685b341bf757f8f339abc09fbed0e424b93d0099c33d85628848572168b8cb76bf
+  languageName: node
+  linkType: hard
+
 "bach@npm:^1.0.0":
   version: 1.2.0
   resolution: "bach@npm:1.2.0"
@@ -6364,6 +6375,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camel-case@npm:^4.1.1":
+  version: 4.1.2
+  resolution: "camel-case@npm:4.1.2"
+  dependencies:
+    pascal-case: ^3.1.2
+    tslib: ^2.0.3
+  checksum: bcbd25cd253b3cbc69be3f535750137dbf2beb70f093bdc575f73f800acc8443d34fd52ab8f0a2413c34f1e8203139ffc88428d8863e4dfe530cfb257a379ad6
+  languageName: node
+  linkType: hard
+
 "camelcase@npm:^3.0.0":
   version: 3.0.0
   resolution: "camelcase@npm:3.0.0"
@@ -6537,12 +6558,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:^4.2.1":
+"clean-css@npm:^4.2.1, clean-css@npm:^4.2.3":
-  version: 4.2.3
+  version: 4.2.4
-  resolution: "clean-css@npm:4.2.3"
+  resolution: "clean-css@npm:4.2.4"
   dependencies:
     source-map: ~0.6.0
-  checksum: 613129973a038b8bb13e3975ad6b679feccb8c98f2a9d03e6bec9e60291ef1e6b5037ee8cb09a3470751adc52f43782b1dcb4cb049360230b48062d6e3314072
+  checksum: 045ff6fcf4b5c76a084b24e1633e0c78a13b24080338fc8544565a9751559aa32ff4ee5886d9e52c18a644a6ff119bd8e37bc58e574377c05382a1fb7dbe39f8
   languageName: node
   linkType: hard
 
@@ -6823,6 +6844,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977
+  languageName: node
+  linkType: hard
+
 "commander@npm:^9.4.1":
   version: 9.5.0
   resolution: "commander@npm:9.5.0"
@@ -7497,6 +7525,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dot-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "dot-case@npm:3.0.4"
+  dependencies:
+    no-case: ^3.0.4
+    tslib: ^2.0.3
+  checksum: a65e3519414856df0228b9f645332f974f2bf5433370f544a681122eab59e66038fc3349b4be1cdc47152779dac71a5864f1ccda2f745e767c46e9c6543b1169
+  languageName: node
+  linkType: hard
+
 "duplexify@npm:^3.6.0":
   version: 3.7.1
   resolution: "duplexify@npm:3.7.1"
@@ -9623,6 +9661,7 @@ fsevents@~2.3.2:
     "@webcomponents/webcomponentsjs": ^2.7.0
     app-datepicker: ^5.1.0
     babel-loader: ^9.1.2
+    babel-plugin-template-html-minifier: ^4.1.0
     chai: ^4.3.7
     chart.js: ^3.3.2
     comlink: ^4.4.1
@@ -9774,6 +9813,23 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"html-minifier-terser@npm:^5.0.0":
+  version: 5.1.1
+  resolution: "html-minifier-terser@npm:5.1.1"
+  dependencies:
+    camel-case: ^4.1.1
+    clean-css: ^4.2.3
+    commander: ^4.1.1
+    he: ^1.2.0
+    param-case: ^3.0.3
+    relateurl: ^0.2.7
+    terser: ^4.6.3
+  bin:
+    html-minifier-terser: cli.js
+  checksum: 75ff3ff886631b9ecb3035acb8e7dd98c599bb4d4618ad6f7e487ee9752987dddcf6848dc3c1ab1d7fc1ad4484337c2ce39c19eac17b0342b4b15e4294c8a904
+  languageName: node
+  linkType: hard
+
 "html-minifier@npm:^4.0.0":
   version: 4.0.0
   resolution: "html-minifier@npm:4.0.0"
@@ -10286,7 +10342,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"is-builtin-module@npm:^3.1.0":
+"is-builtin-module@npm:^3.0.0, is-builtin-module@npm:^3.1.0":
   version: 3.2.1
   resolution: "is-builtin-module@npm:3.2.1"
   dependencies:
@@ -11561,6 +11617,15 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"lower-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "lower-case@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 83a0a5f159ad7614bee8bf976b96275f3954335a84fad2696927f609ddae902802c4f3312d86668722e668bef41400254807e1d3a7f2e8c3eede79691aa1f010
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^4.0.1":
   version: 4.1.5
   resolution: "lru-cache@npm:4.1.5"
@@ -12227,6 +12292,16 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"no-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "no-case@npm:3.0.4"
+  dependencies:
+    lower-case: ^2.0.2
+    tslib: ^2.0.3
+  checksum: 0b2ebc113dfcf737d48dde49cfebf3ad2d82a8c3188e7100c6f375e30eafbef9e9124aadc3becef237b042fd5eb0aad2fd78669c20972d045bbe7fea8ba0be5c
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:^2.6.7":
   version: 2.6.7
   resolution: "node-fetch@npm:2.6.7"
@@ -12814,6 +12889,16 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"param-case@npm:^3.0.3":
+  version: 3.0.4
+  resolution: "param-case@npm:3.0.4"
+  dependencies:
+    dot-case: ^3.0.4
+    tslib: ^2.0.3
+  checksum: b34227fd0f794e078776eb3aa6247442056cb47761e9cd2c4c881c86d84c64205f6a56ef0d70b41ee7d77da02c3f4ed2f88e3896a8fefe08bdfb4deca037c687
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -12932,6 +13017,16 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"pascal-case@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "pascal-case@npm:3.1.2"
+  dependencies:
+    no-case: ^3.0.4
+    tslib: ^2.0.3
+  checksum: ba98bfd595fc91ef3d30f4243b1aee2f6ec41c53b4546bfa3039487c367abaa182471dcfc830a1f9e1a0df00c14a370514fa2b3a1aacc68b15a460c31116873e
+  languageName: node
+  linkType: hard
+
 "pascalcase@npm:^0.1.1":
   version: 0.1.1
   resolution: "pascalcase@npm:0.1.1"
@@ -15168,7 +15263,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"terser@npm:^4.6.2":
+"terser@npm:^4.6.2, terser@npm:^4.6.3":
   version: 4.8.1
   resolution: "terser@npm:4.8.1"
   dependencies: