Option to output CSS instead of JS

bennypowers commented 5 years ago

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

I'm the author of another CSS plugin for rollup, 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

import style from './styles.css'
console.log(style)

styles.css

main {
  background: red;
  &.nested { background: blue; }
}

rollup.config.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

import { css } from 'lit-element';

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

console.log(style);

Actual bundle.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.

himself65 commented 4 years ago

we need to refactor this function

https://github.com/egoist/rollup-plugin-postcss/blob/77074b612246dfe38f53438bb3add79a747ac288/src/postcss-loader.js#L58-L202

bennypowers commented 4 years ago

So this patch naively accomplishes my goal in OP:

diff --git a/node_modules/rollup-plugin-postcss/dist/index.js b/node_modules/rollup-plugin-postcss/dist/index.js
index 57d9e04..bad0ff4 100644
--- a/node_modules/rollup-plugin-postcss/dist/index.js
+++ b/node_modules/rollup-plugin-postcss/dist/index.js
@@ -307,6 +307,10 @@ var postcssLoader = {
         output += `\nimport styleInject from '${styleInjectPath}';\nstyleInject(css${Object.keys(options.inject).length > 0 ? `,${JSON.stringify(options.inject)}` : ''});`;
       }

+      if (options.output === 'css') {
+        output = res.css;
+      }
+
       return {
         code: output,
         map: outputMap,
@@ -682,6 +686,8 @@ var index = ((options = {}) => {
     /** Inject CSS as `<style>` to `<head>` */
     inject: inferOption(options.inject, {}),

+    output: options.output || 'js',
+
     /** Extract CSS */
     extract: typeof options.extract === 'undefined' ? false : options.extract,

himself65 commented 4 years ago

nice idea, but I'm thinking to use inject: Function to achieve this

related #199

bennypowers commented 4 years ago

acc'd to readme, inject is meant to add a script to index.html containing these javascript objects.

In my case, i'd simply like to transpile the css using post css, so I can import it as a js module using other tools

bennypowers commented 4 years ago

May I suggest a compose: true option which does essentially what my patch above does?

alternatively, would you be willing to accept a PR with output = 'css' as described in that same patch?

himself65 commented 4 years ago

alternatively, would you be willing to accept a PR with output = 'css' as described in that same patch?

sure, I recently have other things to do, so no time to add features for this project

egoist / rollup-plugin-postcss