rollup-plugin-transform-tagged-template
v0.0.3
Published
Apply transformations on static contents of tagged template string literals
Downloads
6,714
Maintainers
Readme
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 }
]
]
}
})
],
// ...
Related
- rollup-plugin-minify-tagged-css-template - Rollup plugin to minify CSS content of tagged template string literals.
License
MIT © Laxman Damera