feat: added attributes option

webpack-contrib · Oct 15, 2020 · e8a2d5a · e8a2d5a
1 parent a5f17c4
commit e8a2d5a
Show file tree

Hide file tree

Showing 17 changed files with 970 additions and 755 deletions.
diff --git 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 `<link>` at the given position                   |
+|    **[`attributes`](#attributes)**    |      `{Object}`      |                                       `{}`                                       | Adds custom attributes to tag                            |
 
 #### `filename`
 
@@ -113,7 +114,7 @@ See [examples](#remove-order-warnings) below for details.
 #### `insert`
 
 Type: `String|Function`
-Default: `var head = document.getElementsByTagName("head")[0];head.appendChild(linkTag);`
+Default: `var head = document.getElementsByTagName("head")[0]; head.appendChild(linkTag);`
 
 By default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
 
@@ -151,7 +152,7 @@ Allows to override default behavior and insert styles at any position.
 ```js
 new MiniCssExtractPlugin({
   insert: function (linkTag) {
-    const reference = document.querySelector('#some-element');
+    var reference = document.querySelector('#some-element');
     if (reference) {
       reference.parentNode.insertBefore(linkTag, reference);
     }
@@ -161,6 +162,40 @@ new MiniCssExtractPlugin({
 
 A new `<link>` element will be inserted before the element with id `some-element`.
 
+#### `attributes`
+
+Type: `Object`
+Default: `{}`
+
+If defined, the `mini-css-extract-plugin` will attach given attributes with their values on <link> element.
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  plugins: [
+    new MiniCssExtractPlugin({
+      attributes: {
+        id: 'target',
+        'data-target': 'example',
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+};
+```
+
+Note: It's only applied to dynamically loaded css chunks, if you want to modify link attributes inside html file, please using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
+
 ### Loader Options
 
 |              Name               |         Type         |              Default               | Description                                                                       |

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CssLoadingRuntimeModule.js b/src/CssLoadingRuntimeModule.js
@@ -55,6 +55,7 @@ module.exports = class CssLoadingRuntimeModule extends RuntimeModule {
         'fullhref, resolve, reject',
         [
           'var linkTag = document.createElement("link");',
+          this.runtimeOptions.attributes,
           'linkTag.rel = "stylesheet";',
           'linkTag.type = "text/css";',
           'linkTag.onload = resolve;',

diff --git a/src/index.js b/src/index.js
@@ -49,6 +49,9 @@ class MiniCssExtractPlugin {
             'head.appendChild(linkTag);',
           ]);
 
+    const attributes =
+      typeof options.attributes === 'object' ? options.attributes : {};
+
     this.options = Object.assign(
       {
         filename: DEFAULT_FILENAME,
@@ -61,6 +64,16 @@ class MiniCssExtractPlugin {
       insert,
     };
 
+    this.runtimeOptions.attributes = Template.asString(
+      Object.entries(attributes).map((entry) => {
+        const [key, value] = entry;
+
+        return `linkTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(
+          value
+        )});`;
+      })
+    );
+
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
 
@@ -383,6 +396,7 @@ class MiniCssExtractPlugin {
                     ]),
                     '}',
                     'var linkTag = document.createElement("link");',
+                    this.runtimeOptions.attributes,
                     'linkTag.rel = "stylesheet";',
                     'linkTag.type = "text/css";',
                     'linkTag.onload = resolve;',

diff --git a/src/plugin-options.json b/src/plugin-options.json
@@ -35,6 +35,10 @@
           "instanceof": "Function"
         }
       ]
+    },
+    "attributes": {
+      "description": "Adds custom attributes to tag (https://github.com/webpack-contrib/mini-css-extract-plugin#attributes).",
+      "type": "object"
     }
   }
 }
diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes option should work with attributes option: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link id=\\"target\\" data-target=\\"example\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+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`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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