From 407b1de0c1026845a9a47e61ee56869ab0305804 Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Thu, 1 Aug 2019 15:46:10 +0300
Subject: [PATCH] docs: example for `nonce` usage

---
 README.md | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/README.md b/README.md
index bb357cda..be9e6245 100644
--- a/README.md
+++ b/README.md
@@ -574,6 +574,108 @@ module.exports = {
 };
 ```
 
+### Nonce
+
+There are two ways to work with `nonce`:
+
+- using the `attirbutes` option
+- using the `__webpack_nonce__` variable
+
+> ⚠ the `__webpack_nonce__` variable takes precedence over the `attibutes` option, so if define the `__webpack_nonce__` variable the `attributes` option will not be used
+
+### `attirbutes`
+
+**component.js**
+
+```js
+import './style.css';
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              attributes: {
+                nonce: '12345678',
+              },
+            },
+          },
+          'css-loader',
+        ],
+      },
+    ],
+  },
+};
+```
+
+The loader generate:
+
+```html
+<style nonce="12345678">
+  .foo {
+    color: red;
+  }
+</style>
+```
+
+### `webpack_nonce`
+
+**create-nonce.js**
+
+```js
+__webpack_nonce__ = '12345678';
+```
+
+**component.js**
+
+```js
+import './create-nonce.js';
+import './style.css';
+```
+
+Alternative example for `require`:
+
+**component.js**
+
+```js
+__webpack_nonce__ = '12345678';
+
+require('./style.css');
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+};
+```
+
+The loader generate:
+
+```html
+<style nonce="12345678">
+  .foo {
+    color: red;
+  }
+</style>
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.