Magic lovely minifier

README.md

While making a library, I find it useful to write css in template strings to add as content to a style tag. This however means that when I add whitespace, it's going to be outputted in the library 🤔. What if Babel could minify that css while still allowing the expressivity of template strings?

I have the feeling that something like this is possible with babel-plugin-preval, but I'm not too sure how to do it without outputting the whole string that's generated

current-output.js

  var styles = '\n  .float-container {\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n\n  .float-container div * {\n    width: 1em;\n    height: 1em\n  }\n\n  @keyframes float{\n    ' + Array(MAX).map(function (v, x) {
    return {
      percent: x * 100 / MAX,
      width: Math.sin(x / 10) * 10,
      height: 110 + x * (-120 / MAX)
    };
  }).map(function (_ref2) {
    var percent = _ref2.percent,
        width = _ref2.width,
        height = _ref2.height;
    return percent + '% {\n          transform: translate(\n            ' + width + 'vw,\n            ' + height + 'vh\n          )\n        }';
  }).join('') + '\n  }';

dream-output.js

  var styles = '.float-container{width:100vw;height:100vh;overflow:hidden;position:absolute;top:0;left:0;pointer-events:none;}\n.float-container div *{width:1em;height:1em}\n@keyframes float{' + Array(MAX).map(function (v, x){
    return{
      percent:x * 100 / MAX,
      width:Math.sin(x / 10) * 10,
      height:110 + x * (-120 / MAX)
    };
  }).map(function (_ref2){
    var percent = _ref2.percent,
        width = _ref2.width,
        height = _ref2.height;
    return percent + '%{transform:translate(' + width + 'vw,' + height + 'vh)}';
  }).join('') + '}';

source.js

  const styles = `
  .float-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }

  .float-container div * {
    width: 1em;
    height: 1em
  }

  @keyframes float{
    ${Array(MAX)
      .map((v, x) => ({
        percent: x * 100 / MAX,
        width: Math.sin(x / 10) * 10,
        height: 110 + x * (-120 / MAX),
      }))
      .map(
        ({ percent, width, height }) =>
          `${percent}% {
          transform: translate(
            ${width}vw,
            ${height}vh
          )
        }`
      )
      .join('')}
  }`;