Apply transformations on contents of tagged template string literals, aka. template strings aka. template literals.
// 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.
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:
// 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',
]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 }
]
]
}
})
],
// ...- rollup-plugin-minify-tagged-css-template - Rollup plugin to minify CSS content of tagged template string literals.
MIT © Laxman Damera
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent