feat: fix bug of scopecss & peffect unit test

dev/children/vue2/src/pages/page1.vue

@@ -86,8 +86,8 @@ export default {
     margin: 0 auto;
   }
 
-  /* .test-safari-before::before {
+  .test-safari-before::before {
     content: 'ddddd';
     color: red;
-  } */
+  }
 </style>

dev/children/vue3/src/pages/page2.vue

@@ -13,7 +13,7 @@
         <el-input v-model="ruleForm.name"></el-input>
       </el-form-item>
       <el-form-item label="Activity zone" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="Activity zone">
+        <el-select v-model="ruleForm.region" placeholder="Activity zone" :popper-append-to-body="false">
           <el-option label="Zone one" value="shanghai"></el-option>
           <el-option label="Zone two" value="beijing"></el-option>
         </el-select>

dev/main-react16/src/pages/vue3/vue3.js

@@ -24,7 +24,7 @@ function Vue3 () {
         onMounted={() => hideLoading(false)}
         onBeforeshow={() => hideLoading(false)}
         baseRoute='/micro-app/demo/vue3'
-        // disableScopecss
+        disableScopecss
         // keep-alive
         // inline
         // destroy

docs/zh-cn/changelog.md

@@ -8,6 +8,24 @@
 
 ---
 
+### 0.8.0
+
+`2021-01-07`
+
+- **New**
+
+  - 🆕 新增了在样式隔离下的动态忽略规则。
+
+- **Bug Fix**
+
+  - 🐞 修复了在使用css变量时导致样式丢失的问题，fix [#157](https://github.com/micro-zoe/micro-app/issues/157)、[#121](https://github.com/micro-zoe/micro-app/issues/121)。
+  - 🐞 修复了在部分浏览器(如：safari)下，css表现有差异的问题。
+
+- **Update**
+
+  - 🚀 样式隔离重构，提升性能和兼容性。
+
+
 ### 0.7.1
 
 `2021-12-31`

docs/zh-cn/framework/vue.md

@@ -256,11 +256,15 @@ export default defineConfig({
 ```
 <!-- tabs:end -->
 
-#### 2、子应用中element-plus部分组件样式失效
+#### 2、子应用中element-plus部分弹框样式失效
 
-**参考issue：**[121](https://github.com/micro-zoe/micro-app/issues/121)
+**原因：**element-plus中部分组件，如`Select`, `TimePicker`的弹框元素会脱离micro-app的范围逃逸到外层body上，导致样式失效。
 
-**解决方式：** 关闭样式隔离[disablescopecss](/zh-cn/configure?id=disablescopecss)
+**解决方式：** 
+
+  1、关闭样式隔离[disablescopecss](/zh-cn/configure?id=disablescopecss)
+
+  2、部分组件，如`Select`提供了`popper-append-to-body`配置，用于设置弹框不插入body，可以避免这个问题。如果组件没有提供类似的功能，则暂且只能通过关闭样式隔离解决。
 
 
 #### 3、当基座和子应用都是vue-router4，点击浏览器返回按钮页面丢失

docs/zh-cn/scopecss.md

@@ -1,18 +1,87 @@
 `micro-app`中有三种样式隔离形态：默认隔离、禁用隔离、shadowDOM强制隔离
 
-#### 1、默认隔离
+## 一、默认隔离
 默认隔离会以`<micro-app>`标签作为样式作用域，利用标签的`name`属性为每个样式添加前缀，将子应用的样式影响禁锢在当前标签区域。
 
 但基座应用的样式依然会对子应用产生影响，如果发生样式污染，推荐通过约定前缀或CSS Modules方式解决。
 
-#### 2、禁用隔离
-禁用方式：[disableScopecss](/zh-cn/configure?id=disablescopecss)
+## 二、禁用样式隔离
+禁用样式隔离分四个层次：
 
-禁用样式隔离后，`micro-app`不会对任何样式进行处理，同时css静态资源路径补全功能将失效。
+#### 1、在所有应用中禁用
 
-如果css中一些图片等资源无法正常渲染，需要设置__webpack_public_path__，详情请看[静态资源](/zh-cn/static-source)一章
+这主要通过`start`方法进行全局配置，设置后所有应用的样式隔离都会停止。
+```js
+import microApp from '@micro-zoe/micro-app'
 
-#### 3、shadowDOM
+microApp.start({
+  disableScopecss: true, // 默认值false
+})
+
+// 如果希望在某个应用中不受全局配置控制，可以设置`disableScopecss='false'`：
+// <micro-app name='xx' url='xx' disableScopecss='false'></micro-app>
+```
+
+
+#### 2、在某一个应用中禁用
+
+设置后，当前应用的所有css都不会进行样式隔离。
+
+```html
+<micro-app name='xx' url='xx' disableScopecss 或 disable-scopecss></micro-app>
+```
+
+#### 3、在某一个文件中禁用
+可以在你的css文件中使用以下格式的注释来禁用样式隔离：
+```css
+/* ! scopecss-disable */
+.test {
+  color: red;
+}
+/* ! scopecss-enable */
+```
+
+你也可以对指定的选择器禁用样式隔离:
+```css
+/* ! scopecss-disable .test1, .test2 */
+.test1 {
+  color: red;
+}
+.test2 {
+  color: yellow;
+}
+.test3 {
+  color: green;
+}
+/* ! scopecss-enable */
+```
+
+如果想在整个文件范围内禁用样式隔离，将 `/* ! scopecss-disable */` 注释放在文件顶部：
+```css
+/* ! scopecss-disable */
+...
+```
+
+#### 4、在某一行中禁用
+在文件中使用以下格式的注释在某一特定的行上禁用样式隔离：
+```css
+/* ! scopecss-disable-next-line */
+.test1 {
+  color: red;
+}
+
+.test2 {
+  /* ! scopecss-disable-next-line */
+  background: url(/test.png);
+}
+```
+
+> [!NOTE]
+> 上述注释规则中都以叹号开头(/* ! */)，这是因为在build时大部分项目会将css中的注释删除以压缩体积，叹号开头是[cssnano](https://cssnano.co/)的一种规则，可以防止在build后注释被删除[discardcomments](https://cssnano.co/docs/optimisations/discardcomments/)。
+>
+> 我们以cssnano为例，是因为它是PostCSS中使用最广泛的压缩插件，如果你使用了另外的压缩工具，请根据实际情况调整，防止build后的注释被删除。
+
+## 三、shadowDOM
 shadowDOM具有更好的隔离性，但一些框架(如React)对shadowDOM的兼容性不好，请谨慎使用。
 
 开启shadowDOM后，默认的样式隔离将失效。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",