Apply transformations on static contents of tagged template string literals
npm install rollup-plugin-transform-tagged-template> Apply transformations on contents of tagged template string literals, aka. template strings aka. template literals.

`` 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'
}
};
`
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;
};`
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:
` jscolor: #212121;
// code.js
const declaration = handleCSS;
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',
]
`
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 }
]
]
}
})
],
// ...
- rollup-plugin-minify-tagged-css-template - Rollup plugin to minify CSS content of tagged template string literals.
MIT © Laxman Damera