vite-plugin-bundle-css v0.1.1

vite-plugin-bundle-css

Bundle CSS files into one file. useful for bundling CSS files in a library.

Install

npm install vite-plugin-bundle-css --save-dev

Usage

// vite.config.js
import bundleCss from "vite-plugin-bundle-css";

export default {
  build: {
    cssCodeSplit: true,
    lib: {
      entry: ["src/a.js", "src/b.js"],
      formats: ["es"],
      fileName: "[name].js",
    },
  },
  plugins: [
    bundleCss({
      // options
    }),
  ],
};

Options

Inline Mode

In inline mode, the CSS code will be inlined into the output file.

For example, we have a folder structure like this:

src/
  a/
    a.scss
    index.js
  b/
    b.scss
    index.js

/* src/a/a.scss */
.a {
  color: red;
}

/* src/b/b.scss */
.b {
  color: blue;
}

// src/a/index.js
import "./a.scss";

export default "a";

// src/b/index.js
import "./b.scss";

export default "b";

with the following configuration:

// vite.config.js
import bundleCss from "vite-plugin-bundle-css";

export default {
  build: {
    cssCodeSplit: true,
    lib: {
      entry: ["src/a/index.js", "src/b/index.js"],
      formats: ["es"],
    },
  },
  plugins: [
    bundleCss({
      name: "bundle.css",
      fileName: "bundle.css",
      include: ["**/*.scss"],
      mode: "inline",
    }),
  ],
};

The output file will be like this:

/* dist/bundle.css */
.a {
  color: red;
}
.b {
  color: blue;
}

Note: The bundle CSS code will not be minified. because of the plugin implementation.

If you want to minify the bundoe.css code, you can use the transform option:

// vite.config.js
import { transform } from 'lightningcss';
import bundleCss from "vite-plugin-bundle-css";

export default {
  build: {
    cssCodeSplit: true,
    lib: {
      entry: ["src/a/index.js", "src/b/index.js"],
      formats: ["es"],
    },
  },
  plugins: [
    bundleCss({
      name: "bundle.css",
      fileName: "bundle.css",
      include: ["**/*.scss"],
      mode: "inline",
      transform: (code, id) => {
        const { code: minifiedCode } = transform({
          filename: id,
          code: Buffer.from(code),
          minify: true,
        });

        return minifiedCode.toString();
      },
    }),
  ],
};

Import Mode

In import mode, the CSS code will be imported in the output file.

With above example, we have the following configuration:

// vite.config.js
import bundleCss from "vite-plugin-bundle-css";

export default {
  build: {
    // css code split must be enabled in `import` mode
    cssCodeSplit: true,
    lib: {
      entry: ["src/a/index.js", "src/b/index.js"],
      formats: ["es"],
    },
    rollupOptions: {
      output: {
        preserveModules: true,
        preserveModulesRoot: 'src',
      },
    },
  },
  plugins: [
    bundleCss({
      name: "bundle.css",
      fileName: "bundle.css",
      include: ["**/*.css"],
      mode: "import",
    }),
  ],
};

The output file will be like this:

/* dist/bundle.css */
@import "./a/a.css";
@import "./b/b.css";

This is useful for components library development, users can import the bundle.css in the main entry file.

Or only import the component's CSS file used.

The include and exclude options

• inline mode: The include and exclude options are used to filter the ORIGINAL CSS files to inline.
• import mode: The include and exclude options are used to filter the OUTPUT CSS files to import.