Gzipping css files in Rollup

Question

I am trying to bundle my js and scss files in rollup ready for production. Rollup takes all of my files and outputs them to a build dir, the result looks like this:

build
  css
    bundle.css
  js
    bundle.js
    bundle.js.gz

As you can see, I am using the gzipPlugin for my js files. I also want to use gzipPlugin to handle my css, but I cannot figure out how to do this.

My current setup looks like this:

import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import multi from "@rollup/plugin-multi-entry";
import gzipPlugin from "rollup-plugin-gzip"
import scss from "rollup-plugin-scss"
import del from "rollup-plugin-delete"

export default [{
    input: "src/**/*.logic.js",
    output: {
        file: "build/assets/js/main.min.js",
        format: "umd",
        name: "Logic"
    },
    plugins: [
        del({ targets: "build" }),
        gzipPlugin(),
        terser({
            output: {
                wrap_iife: false
            }
        }),
        multi({
            exports: true
        }),
        babel({
            exclude: "node_modules/**"
        })
    ]
}, {
    input: "src/all.scss",
    plugins: [
        scss({
            output: "build/assets/css/styles.min.css",
            outputStyle: "compressed"
        }),
    ]
}
];

My question is: How can I get my outputted css file to be gzipped?.

I think I am missing something fairly simply, I just can't see how to get gzipPlugin working on the css file.... thanks in advance for any tips.

user_6470272 · Answer

I think that you just need to add the gzipPlugin in the plugins session of your CSS generation.

Like this:

input: "src/all.scss",
plugins: [
    scss({
        output: "build/assets/css/styles.min.css",
        outputStyle: "compressed"
    }),
    gzipPlugin()
]

user_5131575 · Answer

I was able to accomplish this by specifying the additionalFiles option:

// rollup.config.js
...
import gzipPlugin from "rollup-plugin-gzip";
import css from "rollup-plugin-css-only";

export default {
  input: "src/main.js",
  output: {
    ...
    file: "public/build/bundle.js",
  },
  plugins: [
    gzipPlugin({
      additionalFiles: ["./public/build/bundle.css"],
    }),
    css({ output: "bundle.css" }),
    ...
  ]
}

One little quirk I ran into was that the build has to be run twice. The first time without gzip to generate the bundle.css and the second time to gzip the bundle.css from the previous run.

Gzipping css files in Rollup

2 Answers