feat: add attrs option

Author: dutzi

README.md

@@ -353,6 +353,20 @@ const miniCssExtractPlugin = new MiniCssExtractPlugin({
 });
 ```
 
+#### Add custom attributes
+
+If you want to add some custom attributes to dynamically loaded css chunks, you can use `attrs` option
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  attrs: {
+    'data-id': 'unique-id',
+  },
+});
+```
+
+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)
+
 #### Long Term Caching
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

src/index.js

@@ -364,6 +364,8 @@ class MiniCssExtractPlugin {
               }
             );
 
+            const { attrs = {} } = this.options;
+
             return Template.asString([
               source,
               '',
@@ -395,6 +397,11 @@ class MiniCssExtractPlugin {
                   'var linkTag = document.createElement("link");',
                   'linkTag.rel = "stylesheet";',
                   'linkTag.type = "text/css";',
+                  ...Object.keys(attrs).map((k) => {
+                    const key = JSON.stringify(k);
+                    const value = JSON.stringify(attrs[k] || '');
+                    return `linkTag.setAttribute(${key}, ${value});`;
+                  }),
                   'linkTag.onload = resolve;',
                   'linkTag.onerror = function(event) {',
                   Template.indent([

test/attrs.test.js

@@ -0,0 +1,66 @@
+import MiniCssExtractPlugin from '../src';
+
+describe('Custom Attrs', () => {
+  it('adds attrs', () => {
+    const plugin = new MiniCssExtractPlugin({
+      attrs: { 'my-attribute': 'my-value' },
+    });
+
+    const compiler = {
+      hooks: {
+        thisCompilation: {
+          tap: (_pluginName, _callback) => {
+            const compilation = {
+              hooks: {
+                normalModuleLoader: {
+                  tap: () => {},
+                },
+                contentHash: {
+                  tap: () => {},
+                },
+              },
+              dependencyFactories: { set: () => {} },
+              dependencyTemplates: { set: () => {} },
+              mainTemplate: {
+                getAssetPath: () => {},
+                renderCurrentHashCode: () => '',
+                outputOptions: { crossOriginLoading: false },
+                hooks: {
+                  renderManifest: { tap: () => {} },
+                  hashForChunk: { tap: () => {} },
+                  localVars: {
+                    tap: () => {},
+                  },
+                  requireEnsure: {
+                    tap: (pluginName, callback) => {
+                      const source = '';
+                      const chunk = {
+                        getAllAsyncChunks: () => [
+                          { modulesIterable: [{ type: 'css/mini-extract' }] },
+                        ],
+                        getChunkMaps: () => ({
+                          hash: '',
+                          contentHash: { 'css/mini-extract': {} },
+                        }),
+                      };
+                      const hash = '';
+                      const template = callback(source, chunk, hash);
+                      expect(
+                        template.indexOf(
+                          'linkTag.setAttribute("my-attribute", "my-value");'
+                        ) > -1
+                      ).toBe(true);
+                    },
+                  },
+                },
+              },
+              chunkTemplate: { hooks: { renderManifest: { tap: () => {} } } },
+            };
+            _callback(compilation);
+          },
+        },
+      },
+    };
+    plugin.apply(compiler);
+  });
+});