is it possible to use rollup for processing just css?

Question

I know that Rollup is used to bundle .js files. But is it possible to use it just to process css? (css, scss, less, etc). What i mean is if i had for example in my src folder (the entry folder) a file called index.css and i want rollup to precess it at dist folder (the output folder) like index.css (but processed, for example if there is an imported .sass file or css variables). How can i do this?

Example rollup.config.js

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'

const config = [
  {
    input: 'src/styles/index.scss',
    output: {
      file: 'dist/style.css',
      name: "style",
    },
    plugins: [
      postcss({
        plugins: []
      })
    ]
  },
];

export default config

src/index.scss:

@import 'other';

h1 {
  color: green;
}

src/other.scss

h2 {
  color: red;
}

and in the dist folder should be an index.css with the all the code for both css files (and processed). Something like this: dist/index.css

h1 {
  color: green;
}
h2 {
  color: red;
}

Brandtr

Answer 1

You need something like this

import postcss from 'rollup-plugin-postcss'

const config = [
  {
    input: 'src/styles/index.scss',
    output: {
      file: 'dist/style.css',
      format: 'es'
    },
    plugins: [
      postcss({
        modules: true,
        extract: true
      })
    ]
  },
];

export default config

Fredra

If I use the output option file, I get always the warning The emitted file "Filename.css" overwrites a previously emitted file of the same name. And if I use the dir option instead of the file option, I got also an almost empty js file. Is there a way to avoid the warning or not to write the js file? – Pax

You can use the rollup-plugin-delete library - github.com/vladshcherbin/rollup-plugin-delete - – Nattie

Answer 2

Just to add to the answer of @Iván and if anyone else gets the error message The emitted file "Filename.css" overwrites a previously emitted file of the same name.:

The postCSS plugin has the option extract: true (like also shown in Iváns answer). When set to true it will create a separate CSS file. So what you can basically do is the following:

1. Create JS file
2. Import your styles in the JS file (e.g.: import "../css/index.css" ##Adapt path to your needs)
3. Now add postCSS to your plugin config:

...
plugins: [
      postcss({
        modules: true,
        extract: true
      }),
      resolve({
        jsnext: true,
        browser: true,
      }),
      commonjs(),
      production && terser(),
    ],
...

This will output a separate CSS file.

4. Now add the CSS file to your template

Extra: A full config could look like this:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";

const production = !process.env.ROLLUP_WATCH;

export default [
  {
    input: "project/static/src/inputs/index.js",
    output: [
      {
        format: "esm",
        name: "map",
        file: "project/static/src/outputs/index.min.js",
      },
    ],
    plugins: [
      postcss({
        modules: true,
        extract: true
      }),
      resolve({
        jsnext: true,
        browser: true,
      }),
      commonjs(),
      production && terser(),
    ],
  },
];

Intentional