https://github.com/ph1p/rollup-plugin-template-postcss
Run Postcss on Template Literals. For example on LitElements.
https://github.com/ph1p/rollup-plugin-template-postcss
Last synced: 6 months ago
JSON representation
Run Postcss on Template Literals. For example on LitElements.
- Host: GitHub
- URL: https://github.com/ph1p/rollup-plugin-template-postcss
- Owner: ph1p
- License: mit
- Created: 2024-08-05T19:01:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T09:37:20.000Z (almost 2 years ago)
- Last Synced: 2025-08-28T20:45:10.921Z (11 months ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Run Postcss on Template Literals
This plugin iterates through all CSS template literals in your JavaScript files and processes them using PostCSS.
It is perfect for LitElement's `css` template literal.
## Installation
```bash
npm install --save-dev rollup-plugin-template-postcss postcss
```
## Usage
### Options
| Option | Type | Default | Description |
| --------- | ------------------- | ------------------------ | ------------------------------------- |
| `plugins` | `Array` | `[]` | PostCSS plugins to use. |
| `include` | `Array` | `['**/*.js', '**/*.ts']` | Glob patterns to include. |
| `exclude` | `Array` | `[]` | Glob patterns to exclude. |
| `tags` | `Array` or `String` | `'css'` | CSS template literal tags to process. |
### Example
```js
import { templatePostcss } from 'rollup-plugin-template-postcss';
export default {
// ...
plugins: [
// ...
templatePostcss({
tags: ['css', 'myCustomCss'], // default is 'css' (optional)
include: ['**/*.js', '**/*.ts'], // default (optional)
exclude: [], // default (optional)
// PostCSS plugins
plugins: [],
}),
],
};
```
### With nano css and advanced preset
```bash
npm install --save-dev cssnano cssnano-preset-advanced
```
```js
import { templatePostcss } from 'rollup-plugin-template-postcss';
import cssnano from 'cssnano';
export default {
// ...
plugins: [
// ...
templatePostcss({
plugins: [
cssnano({
preset: [
'advanced',
{
discardComments: {
removeAll: true,
},
},
],
}),
],
}),
],
};
```
### With vite
```js
import { templatePostcss } from 'rollup-plugin-template-postcss';
export default {
//...
build: {
rollupOptions: {
plugins: [
//...
templatePostcss({
plugins: [],
}),
],
},
},
};
```
## License
MIT