Move adding a css modules stylesheet to its own file

Author: selbekk

docusaurus/docs/adding-a-css-modules-stylesheet.md

@@ -0,0 +1,54 @@
+---
+id: adding-a-css-modules-stylesheet
+title: Adding a CSS Modules Stylesheet
+---
+
+> Note: this feature is available with `[email protected]` and higher.
+
+This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the `[name].module.css` file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format `[filename]\_[classname]\_\_[hash]`.
+
+> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: `[name].module.scss` or `[name].module.sass`.
+
+CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules [here](https://css-tricks.com/css-modules-part-1-need/).
+
+### `Button.module.css`
+
+```css
+.error {
+  background-color: red;
+}
+```
+
+### `another-stylesheet.css`
+
+```css
+.error {
+  color: red;
+}
+```
+
+### `Button.js`
+
+```js
+import React, { Component } from 'react';
+import styles from './Button.module.css'; // Import css modules stylesheet as styles
+import './another-stylesheet.css'; // Import regular stylesheet
+
+class Button extends Component {
+  render() {
+    // reference as a js object
+    return <button className={styles.error}>Error Button</button>;
+  }
+}
+```
+
+### Result
+
+No clashes from other `.error` class names
+
+```html
+<!-- This button has red background but not red text -->
+<button class="Button_error_ax7yz"></div>
+```
+
+**This is an optional feature.** Regular `<link>` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension.

docusaurus/docs/user-guide.md

@@ -11,7 +11,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
 
 ## Table of Contents
 
-- [Adding a CSS Modules Stylesheet](#adding-a-css-modules-stylesheet)
 - [Adding a Sass Stylesheet](#adding-a-sass-stylesheet)
 - [Post-Processing CSS](#post-processing-css)
 - [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
@@ -46,58 +45,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Advanced Configuration](#advanced-configuration)
 - [Alternatives to Ejecting](#alternatives-to-ejecting)
 
-## Adding a CSS Modules Stylesheet
-
-> Note: this feature is available with `[email protected]` and higher.
-
-This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the `[name].module.css` file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format `[filename]\_[classname]\_\_[hash]`.
-
-> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: `[name].module.scss` or `[name].module.sass`.
-
-CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules [here](https://css-tricks.com/css-modules-part-1-need/).
-
-### `Button.module.css`
-
-```css
-.error {
-  background-color: red;
-}
-```
-
-### `another-stylesheet.css`
-
-```css
-.error {
-  color: red;
-}
-```
-
-### `Button.js`
-
-```js
-import React, { Component } from 'react';
-import styles from './Button.module.css'; // Import css modules stylesheet as styles
-import './another-stylesheet.css'; // Import regular stylesheet
-
-class Button extends Component {
-  render() {
-    // reference as a js object
-    return <button className={styles.error}>Error Button</button>;
-  }
-}
-```
-
-### Result
-
-No clashes from other `.error` class names
-
-```html
-<!-- This button has red background but not red text -->
-<button class="Button_error_ax7yz"></div>
-```
-
-**This is an optional feature.** Regular `<link>` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension.
-
 ## Adding a Sass Stylesheet
 
 > Note: this feature is available with `[email protected]` and higher.

docusaurus/website/sidebars.json

@@ -21,7 +21,8 @@
       "installing-a-dependency",
       "importing-a-component",
       "code-splitting",
-      "adding-a-stylesheet"
+      "adding-a-stylesheet",
+      "adding-a-css-modules-stylesheet"
     ],
     "Testing": ["running-tests", "debugging-tests"],
     "Deployment": ["publishing-components-to-npm", "deployment"],