From 411ddf780bc8ddb48984e8917e914f9778f96650 Mon Sep 17 00:00:00 2001
From: Harald Rudell <harald@attiresoft.com>
Date: Mon, 4 Dec 2017 17:21:26 -0800
Subject: [PATCH 1/2] App component using CSS Modules local class names

---
 packages/react-scripts/template/src/App.css | 14 +++++++-------
 packages/react-scripts/template/src/App.js  | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css
index c5c6e8a68ad..4c3a873a802 100644
--- a/packages/react-scripts/template/src/App.css
+++ b/packages/react-scripts/template/src/App.css
@@ -1,28 +1,28 @@
-.App {
+:local .root {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
+:local .logo {
+  animation: logo-spin infinite 20s linear;
   height: 80px;
 }
 
-.App-header {
+:local .header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;
 }
 
-.App-title {
+:local .title {
   font-size: 1.5em;
 }
 
-.App-intro {
+:local .intro {
   font-size: large;
 }
 
-@keyframes App-logo-spin {
+@keyframes :local(logo-spin) {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
index 203067e4d75..5374217ef7b 100644
--- a/packages/react-scripts/template/src/App.js
+++ b/packages/react-scripts/template/src/App.js
@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
-import './App.css';
+import styles from './App.css';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+      <div className={styles.root}>
+        <header className={styles.header}>
+          <img src={logo} className={styles.logo} alt="logo" />
+          <h1 className={styles.title}>Welcome to React</h1>
         </header>
-        <p className="App-intro">
+        <p className={styles.intro}>
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
       </div>

From 09d422c6a86a0ce797b3e99285abd89678954f9e Mon Sep 17 00:00:00 2001
From: Harald Rudell <harald@attiresoft.com>
Date: Sat, 9 Dec 2017 13:25:51 -0800
Subject: [PATCH 2/2] Single className entry

---
 packages/react-scripts/template/src/App.css | 18 +++++++++---------
 packages/react-scripts/template/src/App.js  | 10 +++++-----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css
index 4c3a873a802..f26bbd79e2c 100644
--- a/packages/react-scripts/template/src/App.css
+++ b/packages/react-scripts/template/src/App.css
@@ -1,24 +1,24 @@
-:local .root {
+:local .component {
   text-align: center;
 }
 
-:local .logo {
-  animation: logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-:local .header {
+:local .component > header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;
 }
 
-:local .title {
+:local .component > header > img {
+  animation: logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+:local .component h1 {
   font-size: 1.5em;
 }
 
-:local .intro {
+:local .component p {
   font-size: large;
 }
 
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
index 5374217ef7b..248b0d429e2 100644
--- a/packages/react-scripts/template/src/App.js
+++ b/packages/react-scripts/template/src/App.js
@@ -5,12 +5,12 @@ import styles from './App.css';
 class App extends Component {
   render() {
     return (
-      <div className={styles.root}>
-        <header className={styles.header}>
-          <img src={logo} className={styles.logo} alt="logo" />
-          <h1 className={styles.title}>Welcome to React</h1>
+      <div className={styles.component}>
+        <header>
+          <img src={logo} alt="logo" />
+          <h1>Welcome to React</h1>
         </header>
-        <p className={styles.intro}>
+        <p>
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
       </div>