rollup-plugin-transform-tagged-template

0.0.3 • Public • Published

rollup-plugin-transform-tagged-template

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

npm

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

License

MIT © Laxman Damera

Package Sidebar

Install

npm i rollup-plugin-transform-tagged-template

Weekly Downloads

1,674

Version

0.0.3

License

MIT

Unpacked Size

10 kB

Total Files

9

Last publish

Collaborators

  • lmn