gem-hunter
Language: JavaScript
Minify and transform FAST HTML and CSS tagged templates
This Rollup plugin compresses tagged template literals for FAST Element templates and styles.
Tagged template literals:
Additionally, the css.partial tagged template literal and html.partial() function are supported.
npm install --save-dev rollup-plugin-fast-tagged-templates
css templates are compressed with a custom minifier, which removes whitespace and comments. html templates are compressed with html-minifier-terser. The default options are intentionally set to be conservative, with only collapseWhitespace and removeComments enabled. For both CSS and HTML, comments are preserved if they contain expressions.
By default, the plugin will compress both HTML and CSS tagged templates:
import { rollup } from "rollup"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.js", plugins: [fastTaggedTemplates()], });
- html` - <template - @click="${(x, c) => x.clickHandler(c.event)}" - > - <slot ${ref("slot")}></slot> - </template> - `; + html`<template @click="${(x,c)=>x.clickHandler(c.event)}"><slot ${ref("slot")}></slot></template>`;
- export const styles = css` - ${display("block")} - :host { - padding: ${paddingToken}; - } - - :host(${focusVisible}) ::slotted(*) { - outline: 2px solid ${focusVisible}; - } - `; + export const styles = css`${display("block")} :host{padding:${paddingToken}}:host(${focusVisible}) ::slotted(*){outline:2px solid ${focusVisible}}`;
To disable compression for either type, set the html or css options to false:
import { rollup } from "rollup"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.js", plugins: [ fastTaggedTemplates({ // Disable compression for HTML templates html: false, }), ], });
Options for html-minifier-terser can be passed to the minifyHTMLOptions option. These will be merged with the default options.
import { rollup } from "rollup"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.js", plugins: [ fastTaggedTemplates({ minifyHTMLOptions: { removeAttributeQuotes: true, }, }), ], });
To override the default minification functions entirely, pass a custom function to the corresponding option. Each function should take the source string as an argument and return the compressed string.
import { rollup } from "rollup"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.js", plugins: [ fastTaggedTemplates({ html(source) { // Replace the default minification function for html templates return source; }, css(source) { // Replace the default minification function for css templates return source; }, }), ], });
If you're using @rollup/plugin-typescript or rollup-plugin-esbuild, make sure to use the plugin after transpiling:
import typescript from "@rollup/plugin-typescript"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.ts", plugins: [typescript(), fastTaggedTemplates()], });
Additionally, minification has to be handled after the plugin transforms the source. For plugins like rollup-plugin-esbuild, the minify option should be set to false and the separate minify plugin should be used. See the rollup-plugin-esbuild README for more information.
import esbuild, { minify } from "rollup-plugin-esbuild"; import fastTaggedTemplates from "rollup-plugin-fast-tagged-templates"; rollup({ input: "src/index.ts", plugins: [esbuild({ minify: false }), fastTaggedTemplates(), minify()], });
See CONTRIBUTING.md for more information.
MIT