add-charset-webpack-plugin

A Webpack and Rspack compatible plugin that ensures all emitted CSS files start with the correct @charset declaration, improving encoding compatibility across browsers. Supports both CommonJS (require) and ES Modules (import) syntax.

Features

✅ Works with Webpack 4 / 5 and Rspack.

✅ Supports CommonJS and ESM import styles.

✅ Automatically adds @charset to the first line of every emitted .css file.

Installation

npm install add-charset-webpack-plugin

Usage

CommonJS (Webpack / Rspack)

/** webpack.config.js or rspack.config.js */
const AddCharsetWebpackPlugin = require("add-charset-webpack-plugin");

module.exports = {
  plugins: [
    new AddCharsetWebpackPlugin({
      charset: "utf-8"
    })
  ]
}

ES Modules (Webpack / Rspack)

/** webpack.config.mjs or rspack.config.mjs */
import AddCharsetWebpackPlugin from "add-charset-webpack-plugin";

export default {
  plugins: [
    new AddCharsetWebpackPlugin({
      charset: "utf-8"
    })
  ]
};

This will add charset declare in the first line of all the final css files, example as following

@charset "utf-8";

html {
  margin: 0,
  padding: 0
}

body {
  min-width: 960px;
  background: #FFFFFF;
  font-size: 14px;
}
...

Options

You can pass a hash of configuration options to add-charset-webpack-plugin.Allowed values are as follows:

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |charset|{String}|utf-8|To display an HTML page correctly, a web browser must know which character set to use, Defaults to utf-8|

License

Copyright (c) 2021-present VN666

MIT (see LICENSE)