chore: update repo

Author: liuchuzhang

README.md

@@ -1,5 +1,61 @@
 # React CSS Module File
 
-## Feature
+File reference to add CSS Modules.
+
+```jsx
+// app.jsx
+import React from 'react'
+import Row from './row'
+import './app.css'
+
+export default () => {
+  return (
+    <div className="list">
+      <div className="row">
+        <Row />
+      </div>
+    </div>
+  )
+}
+
+// row.jsx
+import React from 'react'
+import './row.css'
+
+export default () => <div class="row">row</div>
+```
+
+The `app.jsx` rendered as:
+
+```html
+<div class="list___c021c">
+  <div class="row___c021c">
+    <div class="row__d3e0cf">row</div>
+  </div>
+</div>
+```
+
+## Usage
+
+```shell
+yarn add babel-plugin-react-css-modules-file css-modules-file-loader -D
+```
+
+.babelrc
+```js
+"plugins": ["babel-plugin-react-css-modules-file"]
+``` 
+
+webpack config
+```js
+{
+  test: /\.(sc|c|sa)ss$/,
+  use: [
+    'style-loader',
+    'css-loader',
+    'css-modules-file-loader',
+    'sass-loader'
+  ]
+}
+```
 
-- React CSS modules

examples/css-modules/.babelrc demo/css-modules/.babelrcexamples/css-modules/.babelrc renamed to demo/css-modules/.babelrc

@@ -1,9 +1,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import './test.css'
+
 export default () => {
   return (
-    <div className={classnames('a')}>
+    <div className={classnames('test')}>
       test
     </div>
   )

examples/css-modules/Test.jsx demo/css-modules/Test.jsxexamples/css-modules/Test.jsx renamed to demo/css-modules/Test.jsx

@@ -1,6 +1,7 @@
-.a {
+.red {
   color: red;
 }
-.b {
+.blue {
   font-size: 20px;
+  color: blue;
 }

examples/css-modules/app.css demo/css-modules/app.cssexamples/css-modules/app.css renamed to demo/css-modules/app.css

@@ -6,10 +6,11 @@ import './app.css'
 export default () => {
   return (
     <div
-      className={classnames('a', {
-        b: true
+      className={classnames('red', {
+        blue: false
       })}>
-      Hello12
+      red
+      <div className="blue">blue</div>
       <Test></Test>
     </div>
   )

examples/css-modules/app.jsx demo/css-modules/app.jsxexamples/css-modules/app.jsx renamed to demo/css-modules/app.jsx

@@ -23,7 +23,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-react-css-modules-file": "0.0.1",
     "css-loader": "^5.0.2",
-    "css-modules-file-css-loader": "0.0.1",
+    "css-modules-file-loader": "0.0.1",
     "html-webpack-plugin": "^4.5.1",
     "react-refresh": "^0.9.0",
     "sass-loader": "^11.0.1",

examples/css-modules/index.html demo/css-modules/index.htmlexamples/css-modules/index.html renamed to demo/css-modules/index.html

@@ -0,0 +1,4 @@
+.test {
+  font-size: 50px;
+  color: black;
+}

examples/css-modules/main.js demo/css-modules/main.jsexamples/css-modules/main.js renamed to demo/css-modules/main.js

@@ -30,7 +30,7 @@ module.exports = {
           use: [
             'style-loader',
             'css-loader',
-            'css-modules-file-css-loader',
+            'css-modules-file-loader',
           ]
       }
     ]