Does dot rename JS variables in HTML files inside <script> tag

[caoshouse]

🐞 Bug Report

Describe the bug

Exactly as mentioned in the title:

This Code:

<template>
  <img id="img" alt="">
</template>
<script type="text/javascript">
  var objectFitSupport = 'objectFit' in document.body.style;
  module.exports = function (e,subElements) {
    var ats = $.getAttributes(e);
    var img = subElements.img;
    if (ats.alt) {
      img.setAttribute('alt', ats.alt);
    }
    img.onload = function () {
      $.fastDOM.mutate(function () {
        if (objectFitSupport) {
          img.style.opacity = 1;
        } else {
          e.style.backgroundImage = 'url(' + img.src + ')';
        }
      });
      $.trigger(e, 'load');
    };
    $.extend(e, {
      src: {
        __change: function (v) {
          img.src = '';
          img.style.opacity = 0;
          img.removeAttribute('src');

          /* Solution for Handlebars */
          if ($.contains(v, '{')) {
            console.warn('invalid image url', v);
            return null;
          }

          var obs = $.onViewport(e, function () {
            img.src = v;
            obs.unobserve(e);
          });
          return v;
        }
      }
    });
  };
</script>

<style>
  MDL-IMG {
    display: inline-block;
    overflow: hidden;
    margin: auto;
    position: relative;
    vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
  }

  MDL-IMG[fit="contain"] {
    background-size: contain
  }

  MDL-IMG[fit="contain"] img {
    object-fit: contain
  }

  MDL-IMG img {
    border: none;
    position: absolute;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    object-fit: cover
  }
</style>

After minifing, this is the resul:

<template><img id="img" alt=""></template><script type="text/javascript">var objectFitSupport='objectFit' in document.body.style; module.exports=function (e,subElements){ var ats=$.getAttributes(e); var img=subElements.img; if (ats.alt){ img.setAttribute('alt', ats.alt);} img.onload=function (){ $.fastDOM.mutate(function (){ if (objectFitSupport){ img.style.opacity=1;} else{ e.style.backgroundImage='url(' + img.src + ')';}}); $.trigger(e, 'load');}; $.extend(e,{ src:{ __change:function (v){ img.src=''; img.style.opacity=0; img.removeAttribute('src'); if ($.contains(v, '{')){ console.warn('invalid image url', v); return null;} var obs=$.onViewport(e, function (){ img.src=v; obs.unobserve(e);}); return v;}}});};
</script><style>MDL-IMG{ display:inline-block; overflow:hidden; margin:auto; position:relative; vertical-align:middle; background-position:center center; background-repeat:no-repeat; background-size:cover} MDL-IMG[fit="contain"]{ background-size:contain} MDL-IMG[fit="contain"] img{ object-fit:contain} MDL-IMG img{ border:none; position:absolute; margin:auto; display:block; width:100%; height:100%; opacity:0; transition:opacity 0.5s; object-fit:cover}
</style>

Your environment

• OS: Windows 10
• Node version: 12.19.0

[Josee9988]

This is definitely something that I would like to implement in the future (as soon as I have some free time).

I'll keep you updated, but for now, my time is extremely limited.

Thanks for the issue!