Rollup-plugin-transform-tagged-template NPM

rollup-plugin-transform-tagged-template

Apply transformations on contents of tagged template string literals, aka. template strings aka. template literals.

Usage

// rollup.config.js
import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';

export default {
	input: 'test.js',
	plugins: [
		transformTaggedTemplate({
			tagsToProcess: ['css'],
			transformer(data) {
				// Spaces before and after these characters
				data = data.replace(/\s*([{}()>~+=^$:!;])\s*/gm, '$1');

				// Spaces only after these characters
				data = data.replace(/([",\[\]])\s+/gm, '$1');

				// You only need one space consequent in CSS
				data = data.replace(/\s{2,}/gm, ' ');

				return data.trim();
			}
		})
	],
	output: {
		file: 'build.js'
	}
};

API

`tagsToProces: string[]`

Refers to the tag names that are to be processed. In the example above, css is the tag that is processed.

Example: tagsToProcess: ['handleCSS'] would target the following template literal.

const result = handleCSS`
	:host {
		display: block;
	}
`;

`transformer: (string) => string`

Does what it says, one-to-one mapping of part of a template string.

This could sometimes be only part of what you are expecting to get as argument. See example below.

Example:

// code.js
const declaration = handleCSS`color: #212121;`;
const result = handleCSS`
	:host {
		display: block;
		${declaration}
	}
`;

// rollup.js
	// ...
	plugins: [
		transformTaggedTemplate({
			tagsToProcess: ['handleCSS'],
			transformer(data) {
                console.log(data);
				return data;
			}
		})
	],
	// ...

// Output
[
	'color: #212121;',
	'\n\t:host {\n\t\tdisplay: block;\n\t\t',
	'\n\t\t}\n',
]

`parserOptions: object`

Config options to pass to the Babel parser.

Babel Parser options may be needed depending on how your project is structured. See Babel parser options for all available options.

Example:

// rollup.js
	// ...
	plugins: [
		transformTaggedTemplate({
			parserOptions: {
				sourceType: "module", // treat files as ES6 modules
				plugins: [
					"typescript", // parse the file as TypeScript
					[
						"decorators", // use decorators proposal plugin
						{ decoratorsBeforeExport: true }
					]
				]
			}
		})
	],
	// ...