egoist / egoist/rollup-plugin-postcss

Option to output CSS instead of JS

Open
#185 6 comments 3 reactions 0 assignees View on GitHub
bug enhancement good first pr help wanted
Dominant language
JavaScript
Stars
689
Forks
210
PR merge metrics
No merged PRs in 30d

Description

:wave: Hello! Thanks for publishing this useful package 😄

I'm the author of another CSS plugin for rollup, [`rollup-plugin-lit-css`](https://npm.im/rollup-plugin-lit-css), which is a simple plugin for importing css files into javascript as `lit-element` css tagged template literals.

I'd like for my users to have the option to pass their CSS through postcss before loading into JS, and have the postcss rollup plugin output a string of CSS without adding js syntax.

## Input
### app.js
```js
import style from './styles.css'
console.log(style)
```
### styles.css
```css
main {
background: red;
&.nested { background: blue; }
}
```
### rollup.config.js
```js
import postcss from 'rollup-plugin-postcss'
import litcss from 'rollup-plugin-lit-css'

export default {
input: 'app.js',
output: {
format: 'es',
file: 'bundle.js',
},
plugins: [
postcss({
output: 'css',
inject: false,
plugins: [
require('postcss-preset-env')({stage: 0})
]
}),
litcss(),
],
}
```

## Expected bundle.js
```js
import { css } from 'lit-element';

var style = css`main {
background: red
}
main.nested { background: blue; }
`;

console.log(style);
```

## Actual bundle.js
```js
import { css } from 'lit-element';

var style = css`var css = "main {\n background: red\n}\nmain.nested { background: blue; }\n";
export default css;`;

console.log(style);
```

If this option is already available, I wasn't able to find it in the docs or the source. From a brief tour of the source, it looks like the plugin always exports JS.

Thanks again for publishing this.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.