cfware / babel-plugin-template-html-minifier

Minify HTML in tagged template strings using html-minifier
MIT License
63 stars 4 forks source link

Debug issue #61

Open madeInLagny opened 1 year ago

madeInLagny commented 1 year ago

Hi,

I am using rollup, following open-wc config to build my project:

import nodeResolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import html from '@web/rollup-plugin-html';
import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
import esbuild from 'rollup-plugin-esbuild';
import { generateSW } from 'rollup-plugin-workbox';
import path from 'path';
import copy from 'rollup-plugin-copy';
import replace from '@rollup/plugin-replace';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';

const newv = new Intl.DateTimeFormat('fr', {
  dateStyle: 'short',
  timeStyle: 'short',
}).format(new Date());

console.log('Version:', newv);

export default {
  input: 'index.html',
  output: {
    entryFileNames: '[hash].js',
    chunkFileNames: '[hash].js',
    assetFileNames: '[hash][extname]',
    format: 'es',
    dir: 'dist',
  },
  external: ['rgbcolor', 'raf'],
  preserveEntrySignatures: false,

  plugins: [
    replace({
      preventAssignment: true,
      __version__: newv,
      __dev__: 'prod',
    }),
    dynamicImportVars({
      exclude: 'controllers/utils.js',
    }),
    /** Enable using HTML as rollup entrypoint */
    html({
      minify: true,
      injectServiceWorker: true,
      serviceWorkerPath: 'dist/sw.js',
    }),
    /** Resolve bare module imports */
    nodeResolve(),
    /** Minify JS, compile JS to a lower language target */
    esbuild({
      minify: true,
      target: ['chrome100', 'firefox98', 'safari15.4'],
    }),
    importMetaAssets(),
    /** Minify html and css tagged template literals */
    babel({
      plugins: [
        [
          require.resolve('babel-plugin-template-html-minifier'),
          {
            modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
            failOnError: false,
            strictCSS: true,
            htmlMinifier: {
              collapseWhitespace: true,
              conservativeCollapse: true,
              removeComments: true,
              caseSensitive: true,
              minifyCSS: true,
            },
          },
        ],
      ],
    }),
    /** Create and inject a service worker */
    generateSW({
      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
      navigateFallback: '/index.html',
      // where to output the generated sw
      swDest: path.join('dist', 'sw.js'),
      // directory to match patterns against to be precached
      globDirectory: path.join('dist'),
      // cache any html js and css by default
      globPatterns: ['**/*.{html,js,css,webmanifest,json}'],
      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
    }),
    copy({
      targets: [
        {
          src: 'IEImage.png',
          dest: 'dist',
        },
        {
          src: 'IE.html',
          dest: 'dist',
        },
        {
          src: 'manifest.json',
          dest: 'dist',
        },
        {
          src: 'well-known/**/*.json',
          dest: 'dist/well-known',
        },
      ],
      hook: 'buildStart',
      flatten: false,
    }),
  ],
};

I get the following error during the build process:

babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
[babel-plugin-template-html-minifier] Could not minify CSS: Invalid character(s) 'babel-plugin-template-html-minifier:ritvkkwq4gs ' at 1:1. Ignoring.
[babel-plugin-template-html-minifier] Could not minify CSS: Invalid property name '// Inspired by https' at 2:22. Ignoring.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\jocep\Documents\Google Drive\fitty.me\fitty-app\node_modules\@firebase\firestore\dist\index.esm2017.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\jocep\Documents\Google Drive\fitty.me\fitty-app\node_modules\@firebase\database\dist\index.esm2017.js as it exceeds the max of 500KB.

What does ritvkkwq4gs stand for? How can I trace where the error lies in my code ?