fix(example): import styles as ESModules in simple-auth (#29823)

examples/simple-auth/src/components/Form/index.js

@@ -1,38 +1,38 @@
 import React from "react"
-import styles from "./form.module.css"
+import { form, form__label, form__input, form__button } from "./form.module.css"
 import { navigate } from "@reach/router"
 
 export default ({ handleSubmit, handleUpdate }) => (
   <form
-    className={styles.form}
+    className={form}
     method="post"
     onSubmit={event => {
       handleSubmit(event)
       navigate(`/app/profile`)
     }}
   >
-    <p className={styles[`form__instructions`]}>
+    <p>
       For this demo, please log in with the username <code>gatsby</code> and the
       password <code>demo</code>.
     </p>
-    <label className={styles[`form__label`]}>
+    <label className={form__label}>
       Username
       <input
-        className={styles[`form__input`]}
+        className={form__input}
         type="text"
         name="username"
         onChange={handleUpdate}
       />
     </label>
-    <label className={styles[`form__label`]}>
+    <label className={form__label}>
       Password
       <input
-        className={styles[`form__input`]}
+        className={form__input}
         type="password"
         name="password"
         onChange={handleUpdate}
       />
     </label>
-    <input className={styles[`form__button`]} type="submit" value="Log In" />
+    <input className={form__button} type="submit" value="Log In" />
   </form>
 )

examples/simple-auth/src/components/Header/header.module.css

@@ -31,7 +31,7 @@
   text-decoration: none;
 }
 
-.header__link--home {
+.header__linkHome {
   font-size: 2rem;
   margin-left: -0.25rem;
 }

examples/simple-auth/src/components/Header/index.js

@@ -1,28 +1,30 @@
 import React from "react"
 import { Link } from "gatsby"
-import styles from "./header.module.css"
+import {
+  header,
+  header__wrap,
+  header__heading,
+  header__nav,
+  header__link,
+  header__linkHome,
+} from "./header.module.css"
 
 const Header = () => (
-  <header className={styles.header}>
-    <div className={styles[`header__wrap`]}>
-      <h1 className={styles[`header__heading`]}>
-        <Link
-          to="/"
-          className={`${styles[`header__link`]} ${
-            styles[`header__link--home`]
-          }`}
-        >
+  <header className={header}>
+    <div className={header__wrap}>
+      <h1 className={header__heading}>
+        <Link to="/" className={`${header__link} ${header__linkHome}`}>
           Gatsby Auth
         </Link>
       </h1>
-      <nav role="main" className={styles[`header__nav`]}>
-        <Link to="/" className={styles[`header__link`]}>
+      <nav role="main" className={header__nav}>
+        <Link to="/" className={header__link}>
           Home
         </Link>
-        <Link to="/app/profile" className={styles[`header__link`]}>
+        <Link to="/app/profile" className={header__link}>
           Profile
         </Link>
-        <Link to="/app/details" className={styles[`header__link`]}>
+        <Link to="/app/details" className={header__link}>
           Details
         </Link>
       </nav>

examples/simple-auth/src/components/Layout/index.js

@@ -5,13 +5,13 @@ import Header from "../Header"
 
 // Global styles and component-specific styles.
 import "./global.css"
-import styles from "./main.module.css"
+import { main } from "./main.module.css"
 
 const Layout = ({ children }) => (
   <div>
     <Helmet title="Simple Authentication With Gatsby" />
     <Header />
-    <main className={styles.main}>{children}</main>
+    <main className={main}>{children}</main>
   </div>
 )
 

examples/simple-auth/src/components/Status/index.js

@@ -1,13 +1,13 @@
 import React from "react"
 import { Link, navigate } from "@reach/router"
 import { getCurrentUser, isLoggedIn, logout } from "../../utils/auth"
-import styles from "./status.module.css"
+import { status, status__text } from "./status.module.css"
 
 export default () => {
   let details
   if (!isLoggedIn()) {
     details = (
-      <p className={styles[`status__text`]}>
+      <p className={status__text}>
         To get the full app experience, you’ll need to
         {` `}
         <Link to="/app/login">log in</Link>.
@@ -17,7 +17,7 @@ export default () => {
     const { name, email } = getCurrentUser()
 
     details = (
-      <p className={styles[`status__text`]}>
+      <p className={status__text}>
         Logged in as {name} ({email}
         )!
         {` `}
@@ -34,5 +34,5 @@ export default () => {
     )
   }
 
-  return <div className={styles.status}>{details}</div>
+  return <div className={status}>{details}</div>
 }

examples/simple-auth/src/components/View/index.js

@@ -1,10 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
-import styles from "./view.module.css"
+import { view } from "./view.module.css"
 
 const View = ({ title, children }) => (
-  <section className={styles.view}>
-    <h1 className={styles[`view__heading`]}>{title}</h1>
+  <section className={view}>
+    <h1>{title}</h1>
     {children}
   </section>
 )