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