Fix

Author: ovrmrw

src/app.css

@@ -4,12 +4,12 @@
 
 
 .my-style {
-  background-color: var(--custome-bg-color); /* Custome Propertyを使用 */
+  background-color: var(--custome-bg-color); /* using Custome Property */
   color: blue;
   font-weight: bold;
 }
 
 
-:fullscreen a { /* PostCSSによりベンダープリフィックスが展開される */
+:fullscreen a { /* expanding vender prefixes by postcss-cssnext */
   display: flex
 }

src/app.tsx

@@ -8,8 +8,8 @@ import { ChildUsual } from './child-usual'
 
 export class App extends React.Component<{}, {}>{
   render() {
-    console.log('app props:', this.props)
-    console.log('app state:', this.state)
+    console.log('app props:', this.props) // {} (empty object)
+    console.log('app state:', this.state) // null
     return (
       <div>
         <div styleName="my-style">

src/child-usual.tsx

@@ -6,8 +6,8 @@ const styles = require('./child.css')
 
 export class ChildUsual extends React.Component<{}, {}>{
   render() {
-    console.log('child-usual props:', this.props)
-    console.log('child-usual state:', this.state)
+    console.log('child-usual props:', this.props) // {} (empty object)
+    console.log('child-usual state:', this.state) // null
     return (
       <div>
         <div className={styles['my-style']}>

src/child.css

@@ -4,6 +4,6 @@
 
 
 .my-style {
-  composes: my-style from './app.css'; /* app.cssの.my-styleを継承 */
-  background-color: var(--custome-bg-color); /* Custome Propertyを使用 */
+  composes: my-style from './app.css'; /* extending .my-style from app.css */
+  background-color: var(--custome-bg-color); /* using Custome Property */
 }

src/child.tsx

@@ -5,8 +5,8 @@ import './child.css'
 
 export class Child extends React.Component<{}, {}>{
   render() {
-    console.log('child props:', this.props)
-    console.log('child state:', this.state)
+    console.log('child props:', this.props) // {} (empty object)
+    console.log('child state:', this.state) // null
     return (
       <div>
         <div styleName="my-style">

src/root.tsx

@@ -8,7 +8,7 @@ export class Root extends React.Component<{}, {}>{
     return (
       <div>
         <div className="my-style">
-          root text
+          root text {/* no css attached */}
         </div>
         <App />
       </div>