minify-template-literal

Minify the Template Literals with like Emotion, developit/htm, ...

Emotion is a library designed for writing css styles with JavaScript.

developit/htm is JSX-like syntax in plain JavaScript - no transpiler necessary.

Installation

npm install --save-dev minify-template-literal

Basic Usage 1

hoge.js:

import * as emotion from "https://esm.sh/@emotion/css@11";
import htm from "https://esm.sh/htm";
window.html = htm.bind(React.createElement);

// Page Component for React
const Page = props => html`
  <!-- Some Comments -->
  <button className=${cssPage} onClick=${e => { throw new Error(1) }}>
    TEST
  </button>
`;

// 
const cssPage = emotion.css`
  /* Some Comments */
  color: skyblue;
  background: black;
  padding: 1rem;
`;

Run minify-template-literal:

minify-template-literal hoge.js

Output like that:

import * as emotion from "https://esm.sh/@emotion/css@11";
import htm from "https://esm.sh/htm";
window.html = htm.bind(React.createElement);

// Page Component for React
const Page = props => html`<button className=${cssPage} onClick=${e => { throw new Error(1) }}>TEST</button>`;

// 
const cssPage = emotion.css`color: skyblue; background: black; padding: 1rem;`;

Basic Usage 2

minify-template-literal hoge.js --outfile=out.js

Advanced Usage with esbuild

esbuild hoge.js --sourcemap --outfile=out.js

And then, you can take a new source map.

minify-template-literal out.js --remap --outfile=out.js

Contribution

1. Fork it
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create new Pull Request

License

MIT