chore: 1.补充编译前后的代码对比, 2.补充说明colorMap可以引入符合css格式的less文件

README.md

@@ -58,3 +58,89 @@ p {
 1. 该插件的部分功能需要css注释支撑，如果需要使用这些功能的话，就不应该把删除注释相关的插件放在该插件前面使用. 建议将该插件放在预编译插件后的第一位使用.
 2. red 和 #ff0000 暂不支持被确认为等价，所以开发时最好使用统一规范，如颜色值统一用6位数的16进制，且css变量值也是如此.
 3. colorMap中的文件修改时，devServer需重启
+4. colorMap内支持的是css格式的文件, 所以就算是less等文件，只要符合css，也能使用
+
+## 编译前后对比
+> 纯html+css+js的实例在[github的examples目录下](https://github.com/z-juln/postcss-peeling/tree/master/examples)，为了契合现代的前端开发，这里从webpack+react+less的项目中截取了部分代码作为实例
+
+### 1. 编译前
+/postcss.config.js
+```js
+const resolve = path => require('path').join(__dirname, path)
+
+module.exports = {
+  plugins: [
+    require('postcss-peeling')({
+      colorMap: [
+        resolve('./src/style/theme/white.less'),
+      ],
+    }),
+  ]
+}
+```
+
+/src/style/theme/white.less
+```less
+.theme-white() {
+  --color: #000000;
+  --bgColor: #ffffff;
+}
+```
+
+/src/style/theme/dark.less
+```less
+/* peeling-no-parse */
+.theme-dark() {
+  --color: #ffffff;
+  --bgColor: #000000;
+}
+```
+
+/src/style/theme/index.less
+```less
+@import './white.less';
+@import './dark.less';
+
+body {
+  .theme-white();
+
+  &[theme="dark"] {
+    .theme-dark();
+  }
+}
+```
+
+/src/index.jsx
+```jsx
+import './style/theme/index.less';
+import './index.less'
+
+const HelloWorld = () =>
+	<h1>hello world</h1>
+
+export default HelloWorld
+```
+
+/src/index.less
+```less
+h1 {
+  color: #ffffff; // 通过colorMap（及white.less）中搜索到#ffffff对应的css变量是--color，所以转换后就是 color: var(--color);
+}
+```
+
+### 2. 编译后
+```css
+body {
+  --color: #000000;
+  --bgColor: #ffffff;
+}
+
+body[theme="dark"] {
+  --color: #ffffff;
+  --bgColor: #000000;
+}
+
+h1 {
+  color: var(--color);
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-peeling",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "typings": "./index.d.ts",