1

I have a project using lit and I'm using webpack to bundle my project.

I have installed the module minify-html-literals-loader to minify the html but I have a specific issue that I don't understand and I couldn't find the solution :

it seems that the % character is removed from the final when it follows the } character. Here is an exemple before the build :

style="width:${(product.extra.rating / 5) * 100}%;"

In the build the outup the result is

style="width:75;"

My rules property in webpack islike that :

rules: [
        {
          test: /\.(ts|tsx)$/,
          use: [{ loader: 'minify-html-literals-loader' }],
        },
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css|\.s(c|a)ss$/,
          exclude: /\.lazy\.css|\.lazy\.s(c|a)ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.lazy\.css|\.lazy\.s(c|a)ss$/,
          use: [
            // {
            //   loader: 'lit-scss-loader',
            //   options: {
            //     minify: true, // defaults to false
            //   },
            // },
            // 'extract-loader',
            { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
            'css-loader',
            'sass-loader',
          ],
        },
      ],

I tried to see if there any insteresting value in the options (https://github.com/kangax/html-minifier#options-quick-reference) but I couldn't find one :s

Did someone already had this kind of issue ?

Thanks !

0 Answers0