Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/notlmn/rollup-plugin-transform-tagged-template
Apply transformations on static contents of tagged template string literals
https://github.com/notlmn/rollup-plugin-transform-tagged-template
rollup rollup-plugin tagged-template-string-literals template-literals template-strings
Last synced: 2 months ago
JSON representation
Apply transformations on static contents of tagged template string literals
- Host: GitHub
- URL: https://github.com/notlmn/rollup-plugin-transform-tagged-template
- Owner: notlmn
- License: mit
- Created: 2020-06-23T07:18:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-31T13:00:30.000Z (12 months ago)
- Last Synced: 2024-09-18T13:44:24.181Z (3 months ago)
- Topics: rollup, rollup-plugin, tagged-template-string-literals, template-literals, template-strings
- Language: JavaScript
- Homepage: https://npmjs.com/package/rollup-plugin-transform-tagged-template
- Size: 10.7 KB
- Stars: 5
- Watchers: 3
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
# rollup-plugin-transform-tagged-template
> Apply transformations on contents of [tagged template string literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), aka. template strings aka. template literals.
[](https://www.npmjs.com/package/rollup-plugin-transform-tagged-template)
## Usage
``` 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'
}
};
```
## 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.
``` js
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:
``` js
// code.js
const declaration = handleCSS`color: #212121;`;
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',
]
```
### `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](https://babeljs.io/docs/en/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 }
]
]
}
})
],
// ...
```
## Related
- [rollup-plugin-minify-tagged-css-template](https://github.com/notlmn/rollup-plugin-minify-tagged-css-template) - Rollup plugin to minify CSS content of tagged template string literals.
## License
[MIT](license) © Laxman Damera