rollup-plugin-transform-tagged-template

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


Usage

`` js
// 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

$3

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.

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

$3

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:

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

` js
// 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',
]
`

$3

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:

`js
// 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 }
]
]
}
})
],
// ...
``

Related

- rollup-plugin-minify-tagged-css-template - Rollup plugin to minify CSS content of tagged template string literals.

License

MIT © Laxman Damera