feat(addStyles): add support for __webpack_nonce__

lib/addStyles.js

@@ -205,6 +205,13 @@ function createStyleElement (options) {
 		options.attrs.type = "text/css";
 	}
 
+	if(options.attrs.nonce === undefined) {
+		const nonce = getNonce();
+		if (nonce) {
+			options.attrs.nonce = nonce;
+		}
+	}
+
 	addAttrs(style, options.attrs);
 	insertStyleElement(options, style);
 
@@ -231,6 +238,14 @@ function addAttrs (el, attrs) {
 	});
 }
 
+function getNonce() {
+	if (typeof __webpack_nonce__ === 'undefined') {
+		return null;
+	}
+
+	return __webpack_nonce__;
+}
+
 function addStyle (obj, options) {
 	var style, update, remove, result;
 

test/basic.test.js

@@ -220,6 +220,27 @@ describe("basic tests", function() {
     runCompilerTest(expected, done);
   }); // it attrs
 
+  it("nonce", function(done) {
+    // Setup
+    const expectedNonce = "testNonce";
+
+    fs.writeFileSync(
+      rootDir + "main.js",
+      [
+        `__webpack_nonce__ = '${expectedNonce}'`,
+        "var a = require('./style.css');"
+      ].join("\n")
+    );
+
+    // Run
+    let expected = [
+      existingStyle,
+      `<style type="text/css" nonce="${expectedNonce}">${requiredCss}</style>`
+    ].join("\n");
+
+    runCompilerTest(expected, done);
+  }); // it attrs
+
   it("type attribute", function(done) {
     // Setup
     styleLoaderOptions.attrs = {type: 'text/less'};