diff --git a/README.md b/README.md
index e1cff069..4768a518 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,7 @@ module.exports = {
| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
| **[`insert`](#insert)** | `{String\|Function}` | `var head = document.getElementsByTagName("head")[0];head.appendChild(linkTag);` | Inserts `style-loader test
+
+Body
+
+
+
+
+"
+`;
+
+exports[`attributes option should work with attributes option: errors 1`] = `Array []`;
+
+exports[`attributes option should work with attributes option: warnings 1`] = `Array []`;
+
+exports[`attributes option should work without attributes option: DOM 1`] = `
+"
+ style-loader test
+
+Body
+
+
+
+
+"
+`;
+
+exports[`attributes option should work without attributes option: errors 1`] = `Array []`;
+
+exports[`attributes option should work without attributes option: warnings 1`] = `Array []`;
diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap b/test/__snapshots__/validate-plugin-options.test.js.snap
index 40889270..27b8b1a6 100644
--- a/test/__snapshots__/validate-plugin-options.test.js.snap
+++ b/test/__snapshots__/validate-plugin-options.test.js.snap
@@ -1,5 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`validate options should throw an error on the "attributes" option with "true" value 1`] = `
+"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
+ - options.attributes should be an object:
+ object { … }
+ -> Adds custom attributes to tag (https://github.com/webpack-contrib/mini-css-extract-plugin#attributes)."
+`;
+
exports[`validate options should throw an error on the "chunkFilename" option with "true" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
- options.chunkFilename should be one of these:
diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js
new file mode 100644
index 00000000..4449a8ea
--- /dev/null
+++ b/test/attributes-option.test.js
@@ -0,0 +1,74 @@
+/* eslint-env browser */
+import path from 'path';
+
+import MiniCssExtractPlugin from '../src/cjs';
+
+import {
+ compile,
+ getCompiler,
+ getErrors,
+ getWarnings,
+ runInJsDom,
+} from './helpers/index';
+
+describe('attributes option', () => {
+ it(`should work without attributes option`, async () => {
+ const compiler = getCompiler(
+ 'attributes.js',
+ {},
+ {
+ output: {
+ publicPath: '',
+ path: path.resolve(__dirname, '../outputs'),
+ filename: '[name].bundle.js',
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: '[name].css',
+ }),
+ ],
+ }
+ );
+ const stats = await compile(compiler);
+
+ runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+ // console.log(dom.serialize())
+ expect(dom.serialize()).toMatchSnapshot('DOM');
+ });
+
+ expect(getWarnings(stats)).toMatchSnapshot('warnings');
+ expect(getErrors(stats)).toMatchSnapshot('errors');
+ });
+
+ it(`should work with attributes option`, async () => {
+ const compiler = getCompiler(
+ 'attributes.js',
+ {},
+ {
+ output: {
+ publicPath: '',
+ path: path.resolve(__dirname, '../outputs'),
+ filename: '[name].bundle.js',
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ attributes: {
+ id: 'target',
+ 'data-target': 'example',
+ },
+ filename: '[name].css',
+ }),
+ ],
+ }
+ );
+ const stats = await compile(compiler);
+
+ runInJsDom('main.bundle.js', compiler, stats, (dom) => {
+ // console.log(dom.serialize())
+ expect(dom.serialize()).toMatchSnapshot('DOM');
+ });
+
+ expect(getWarnings(stats)).toMatchSnapshot('warnings');
+ expect(getErrors(stats)).toMatchSnapshot('errors');
+ });
+});
diff --git a/test/cases/hmr/expected/webpack-5/main.js b/test/cases/hmr/expected/webpack-5/main.js
index a98b522b..f93bca8e 100644
--- a/test/cases/hmr/expected/webpack-5/main.js
+++ b/test/cases/hmr/expected/webpack-5/main.js
@@ -3292,6 +3292,7 @@ module.exports = function (x) {
/******/ (() => {
/******/ var createStylesheet = (fullhref, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-function/expected/webpack-4/main.js b/test/cases/insert-function/expected/webpack-4/main.js
index d208b22c..9ff258ac 100644
--- a/test/cases/insert-function/expected/webpack-4/main.js
+++ b/test/cases/insert-function/expected/webpack-4/main.js
@@ -101,6 +101,7 @@
/******/ if(dataHref === href || dataHref === fullhref) return resolve();
/******/ }
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-function/expected/webpack-5/main.js b/test/cases/insert-function/expected/webpack-5/main.js
index 19eb5cc2..12f8e74a 100644
--- a/test/cases/insert-function/expected/webpack-5/main.js
+++ b/test/cases/insert-function/expected/webpack-5/main.js
@@ -159,6 +159,7 @@
/******/ (() => {
/******/ var createStylesheet = (fullhref, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-string/expected/webpack-4/main.js b/test/cases/insert-string/expected/webpack-4/main.js
index f4302e78..dcad6f63 100644
--- a/test/cases/insert-string/expected/webpack-4/main.js
+++ b/test/cases/insert-string/expected/webpack-4/main.js
@@ -101,6 +101,7 @@
/******/ if(dataHref === href || dataHref === fullhref) return resolve();
/******/ }
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-string/expected/webpack-5/main.js b/test/cases/insert-string/expected/webpack-5/main.js
index 22e824b6..df8d9cb5 100644
--- a/test/cases/insert-string/expected/webpack-5/main.js
+++ b/test/cases/insert-string/expected/webpack-5/main.js
@@ -159,6 +159,7 @@
/******/ (() => {
/******/ var createStylesheet = (fullhref, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-undefined/expected/webpack-4/main.js b/test/cases/insert-undefined/expected/webpack-4/main.js
index 91e86288..18948b0c 100644
--- a/test/cases/insert-undefined/expected/webpack-4/main.js
+++ b/test/cases/insert-undefined/expected/webpack-4/main.js
@@ -101,6 +101,7 @@
/******/ if(dataHref === href || dataHref === fullhref) return resolve();
/******/ }
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/cases/insert-undefined/expected/webpack-5/main.js b/test/cases/insert-undefined/expected/webpack-5/main.js
index 7dc86067..a2b6d0fb 100644
--- a/test/cases/insert-undefined/expected/webpack-5/main.js
+++ b/test/cases/insert-undefined/expected/webpack-5/main.js
@@ -159,6 +159,7 @@
/******/ (() => {
/******/ var createStylesheet = (fullhref, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
+/******/
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
diff --git a/test/fixtures/attributes.js b/test/fixtures/attributes.js
new file mode 100644
index 00000000..1b9d3ae6
--- /dev/null
+++ b/test/fixtures/attributes.js
@@ -0,0 +1,2 @@
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "simple" */ './simple.css');
diff --git a/test/validate-plugin-options.test.js b/test/validate-plugin-options.test.js
index f797c5b1..808aa9e6 100644
--- a/test/validate-plugin-options.test.js
+++ b/test/validate-plugin-options.test.js
@@ -28,6 +28,10 @@ describe('validate options', () => {
success: ['#existing-style', function insert() {}],
failure: [1, true, {}],
},
+ attributes: {
+ success: [{}, { id: 'id' }],
+ failure: [true],
+ },
unknown: {
success: [],
// TODO failed in next release