[Doc] css modules tutorial (#2341)

* Move topic out of the drafts folder

* Finish revising content

* Removed image file

* Add topic to navigation

* Fix syntax error

* Revise example per feedback recommendation

* Fix link

* Update pwa-devdocs/src/tutorials/pwa-studio-fundamentals/css-modules/index.md

Co-Authored-By: Tommy Wiebell <twiebell@adobe.com>

Co-authored-by: Tommy Wiebell <twiebell@adobe.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>

pwa-devdocs/src/_data/tutorials.yml

@@ -37,3 +37,6 @@ entries:
 
           - label: Using component props
             url: /tutorials/pwa-studio-fundamentals/using-component-props/
+
+          - label: CSS modules
+            url: /tutorials/pwa-studio-fundamentals/css-modules/

pwa-devdocs/src/tutorials/pwa-studio-fundamentals/css-modules/index.md

@@ -0,0 +1,160 @@
+---
+title: CSS Modules
+---
+
+If you used the scaffolding tool to set up your PWA Studio storefront project, then [CSS Modules][] are supported out of the box without additional configuration.
+
+This tutorial provides some guidance on using CSS modules in your components.
+If you require more in depth information on CSS modules, see the [CSS Modules][] topic or [specification repository][].
+
+## Defining and using CSS modules
+
+CSS modules are CSS files which are imported and treated as JavaScript modules.
+
+The recommended naming convention for classes is camelCase naming because it looks cleaner when paired with dot notation(e.g. `style.className`).
+Kebab-case naming can produce unexpected behavior when accessing the class name using dot notation.
+Use bracket notation(e.g. `style['class-name']`) if you intend to use kebab-case.
+
+Example: `foo.css`
+
+```css
+.root {
+    padding: 3rem 1rem 1rem;
+    text-align: center;
+}
+
+.title {
+    text-transform: uppercase;
+}
+
+.title,
+.greeting {
+    padding-bottom: .5rem;
+}
+
+.spacer {
+    max-width: 500px;
+    border-color: #ddd;
+    border-top: 0;
+    margin: 36px auto;
+}
+
+.label {
+    color: #666;
+    padding-bottom: 8px;
+    font-style: italic;
+    font-size: 14px;
+}
+```
+
+Import CSS files as you would a JavaScript module and use dot or bracket notation to access the file name.
+
+Example: `foo.js`
+
+```jsx
+import React from 'react';
+
+import classes from './foo.css';
+
+const Foo = props => {
+    return (
+    <div className={classes.root}>
+        <h1 className={classes.title}>Foo Component</h1>
+        <hr className={classes.spacer} />
+        <p className={classes.label}>A child component with propTypes &amp; CSS Modules:</p>
+        <Greeting name="Joe Bloggs" className={classes.title} />
+    </div>
+    );
+}
+
+export default Foo;
+```
+
+## CSS modules in Venia UI components
+
+Venia UI components let you pass in a `classes` prop with a specific [prop type shape][] to override the class names used to render its elements.
+
+Example: `myButtonWrapper.css`
+
+```css
+.content {
+    /* content class style override */
+}
+
+.root {
+    /* root class style override */
+}
+
+.root_highPriority {
+    /* root_highPriority class style override */
+}
+
+.root_lowPriority {
+    /* root_lowPriority class style override */
+}
+
+.root_normalPriority {
+    /* root_normalPriority class style override */
+}
+```
+
+With the CSS modules feature, you can import a CSS file as an object and pass it in as a prop to Venia UI components.
+This lets you override the style for the specific classes the component expects.
+To find out what classes you can override on a component, see the reference documentation or prop type in the source code.
+
+For example, Venia's [Button][] component lets you override the classes specified in the `myButtonWrapper.css` exampe file.
+
+Example: `myButtonWrapper.js`
+
+```jsx
+import React from 'react';
+
+import Button from '@magento/venia-ui/lib/components/Button';
+
+import buttonOverrides from './myButtonWrapper.css';
+
+const MyButtonWrapper = props => {
+    return <Button classes={buttonOverrides} {...props} />;
+}
+
+export default MyButtonWrapper;
+```
+
+This example defines a component that wraps around Venia's Button component and provides its own set of custom classes to override the default Button classes.
+
+### Adding the class name override feature
+
+The Venia UI library uses the `mergeClasses()` utility function in its `classify` module to add classname override functionality to its components.
+Use this function to add this same feature to your own custom components.
+
+Example: `foo.js`
+
+```diff
+  import React from 'react';
++ import { mergeClasses } from '@magento/venia-ui/lib/classify';
+
+- import classes from './foo.css';
++ import defaultClasses from './foo.css';
+
+  const Foo = props => {
++     const { classes: propClasses } = props;
++
++     const classes = mergeClasses(defaultClasses, propClasses);
++
+      return (
+      <div className={classes.root}>
+          <h1 className={classes.title}>Foo Component</h1>
+          <hr className={classes.spacer} />
+          <p className={classes.label}>A child component with propTypes &amp; CSS Modules:</p>
+          <Greeting name="Joe Bloggs" className={classes.title} />
+      </div>
+      );
+  }
+
+  export default Foo;
+```
+
+[css modules]: <{%link technologies/basic-concepts/css-modules/index.md %}>
+[specification repository]: https://github.com/css-modules/css-modules
+[prop type shape]: https://reactjs.org/docs/typechecking-with-proptypes.html
+[button]: https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/Button/button.js

pwa-devdocs/src/tutorials/pwa-studio-fundamentals/index.md

@@ -24,6 +24,7 @@ During the course of the tutorials, you will create a new storefront application
 -   [Add a static route][] - Add a static route to your PWA Studio app
 -   [Modify the site footer][] - Learn how to modify existing components by modifying the site footer
 -   [Using component props][] - Learn how to use props in your custom components
+-   [CSS modules][] - Learn how to use CSS modules in you custom components
 
 ## Related content
 
@@ -38,5 +39,6 @@ During the course of the tutorials, you will create a new storefront application
 [add a static route]: {%link tutorials/pwa-studio-fundamentals/add-a-static-route/index.md %}
 [modify the site footer]: {%link tutorials/pwa-studio-fundamentals/modify-site-footer/index.md %}
 [using component props]: {%link tutorials/pwa-studio-fundamentals/using-component-props/index.md %}
+[css modules]: {%link tutorials/pwa-studio-fundamentals/css-modules/index.md %}
 
 [react]: https://reactjs.org/