Create separate CSS files in postcss & rollup

Question

I want each css file I import in my JS to create a new css file for my build. For instance:

import "./app.css";
import "./admin.css";

would create dist/app.css and dist/admin.css. I am using rollup and here is my config file:

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

import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import autoprefixer from "autoprefixer";

const dev = process.env.WP_ENV === "development";

export default {
  input: "src/main.js",
  output: {
    sourcemap: dev,
    format: "iife",
    name: "main",
    file: "dist/main.bundle.js",
  },
  plugins: [
    resolve({
      browser: true,
    }),
    postcss({
      plugins: [postcssImport(), postcssNested(), autoprefixer()],
      extract: true,
      sourceMap: "inline",
      minimize: !dev,
    }),
    commonjs(),
    !dev && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

I would be very much interested in the answer as well...

dave0688
– dave0688

2021-03-01 08:15:19 +00:00
Commented Mar 1, 2021 at 8:15 — dave0688
– dave0688, Commented Mar 1, 2021 at 8:15

lastr2d2 · Accepted Answer · 2021-03-04 16:35:38Z

10

It has not been documented but you can use include, exclude according to their source code.

An example here for two css files:

import { resolve } from "path"

plugins: [
  postcss({
    include: "**/admin.css",
    extract: resolve('dist/admin.css')
  }),
  postcss({
    include: "**/app.css",
    extract: resolve('dist/app.css')
  })
]

And if you want to exclude one file:

plugins: [
  postcss({
    exclude: "**/bootstrap.css",
    extract: resolve('dist/app.css')
  }),
  postcss({
    include: "**/bootstrap.css",
    extract: resolve('dist/bootstrap.css')
  })
]

edited Mar 4, 2021 at 16:35

answered Mar 4, 2021 at 16:17

lastr2d2

4,0143 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ritesh Jagga Over a year ago

It doesn't work for me. Rollup is 1.32.1.

johannchopin Jun 23 at 12:42

The usage of resolve is no more relevant. You can directly specify extract: "app.css".

Daniel Amenou · Accepted Answer · 2022-10-28 12:25:06Z

5

I created a plugin - rollup-plugin-lib-style that generates CSS separately for every style file and imports these generated CSS files (as CSS modules).

answered Oct 28, 2022 at 12:25

Daniel Amenou

512 silver badges1 bronze badge

Comments

Morgan Feeney · Accepted Answer · 2022-08-29 13:55:36Z

1

This is what I ended up with

import resolve from "@rollup/plugin-node-resolve";

plugins: [
  external(),
  resolve(),
  commonjs(),
  typescript(),
  postcss({
    include: "src/index.css",
    extract: "index.css",
    minimize: true,
    sourceMap: true,
  }),
  postcss({
    include: "src/themes/file2.css",
    extract: "themes/file2.css",
    minimize: true,
    sourceMap: true,
  }),
  terser(),
]

answered Aug 29, 2022 at 13:55

Morgan Feeney

91710 silver badges13 bronze badges

Collectives™ on Stack Overflow

Create separate CSS files in postcss & rollup

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related