tmui-cli 2.0.2 → 2.0.4

package/data/uniappx/css/common/length.md

@@ -0,0 +1,178 @@
+## 长度单位 @length
+
+长度单位用于定义元素在页面中的尺寸、间距、位置和大小等视觉表现。
+
+### 类型  
+
+#### length @lengthvalue
+CSS 长度数据类型 `<length>` 表述一个表示距离值，由一个 `<number>` 和一个长度单位构成，在单位的字面值与数字之间没有空格。  
+许多 CSS 属性会用到长度，比如 [width](../width.md)、[height](../height.md)、[margin](../margin.md)、[padding](../padding.md)、[border-width](../border-width.md) 等。
+
+**注意**  
+- App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
+- Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理
+
+#### percentage @lengthpercentage
+CSS 长度数据类型 `<percentage>` 表述一个百分比值。许多 CSS 属性 可以取百分比值，用以根据父元素来确定大小。百分比值由一个`<number>`具体数值后跟着%符号构成，在%和数值之间是不允许有空格。  
+许多 CSS 属性支持使用百分比，如 [width](../width.md)、[height](../height.md)、[margin](../margin.md)、[padding](../padding.md) 等。
+
+### 兼容性
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| em | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rem | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ch | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cm | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqmax | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqmin | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ex | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ic | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| in | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| mm | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| pc | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| pt | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| q | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rcap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rch | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rex | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ric | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rlh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vmax | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vmin | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| % | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | app平台仅width、height、padding(-*)、margin(-*)、top、left、right、bottom、flex-basis等属性支持 |
+| fr | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+
+### rpx
+`rpx` 是一个以设备750px为基准的单位，`750rpx`即为屏幕宽度，相当于100%；`375rpx`即为屏幕一半宽度，相当于50%。
+
+因为很多设计稿是以750px为基准出图的，所以使用rpx可以比较好的在不同屏幕宽度下还原设计稿。
+
+但是，机械的照搬设计图，是无法自适应不同宽度的屏幕的。尤其是pc宽屏、pad、折叠屏、横屏。
+
+在移动互联网早期，手机屏幕宽度都差不多，rpx曾经广泛流行。但随着宽屏适配需求越来越强，rpx使用范围已经非常少了。
+
+有些开发者误以为只有rpx才能在适配好大小屏幕，他们担心使用px，会在小屏幕上超级大。这个理解恰恰反了。
+
+其实px不是物理像素，px也是逻辑像素。正常使用px，在所有屏幕上都有合适的大小。\
+比如不设置font-size时，text组件默认字号是16px，这个字号在各种大小的屏幕上都和OS系统默认字号大小一致。\
+设置了rpx，反而在大屏幕上，比如pad、折叠屏、横屏、pc宽屏上，字体显得特别的大。
+
+除了宽屏适配问题，rpx的性能和精度也不如px，但优于百分比。
+
+不管是rpx还是百分比单位，都需要在运行时计算，转换为实际的px才能渲染。
+
+rpx需要根据屏幕宽度做一次计算转换；而百分比需要根据父容器的宽度做计算转换。屏幕宽度是固定的，取一次即可。父容器宽度的计算更复杂，所以百分比单位比rpx的转换逻辑更耗时。
+
+**所以推荐开发者尽量使用px。**
+
+- 在需要根据屏幕宽度适应的场景，使用rpx
+- 在需要根据父容器宽度按百分比适应的场景，使用百分比
+
+有些开发者，在font-size，height、padding、margin、边框、阴影，都在使用rpx。这是非常不推荐的行为，性能差且屏幕适配能力差。
+
+rpx仅适用于需要根据屏幕宽度变化的view或image的宽度width设置。
+
+那么不用rpx的话，设计师如何出图、如何切图？
+
+推荐设计师在设计软件中使用1x画布，按390px出普通竖屏图、按834px或1280px出宽屏图。
+
+竖屏图中需根据情况标注不同内容：
+1. 弹性容器，即屏幕变宽后，哪块区域向右填充。填充常使用`flex:1`铺满剩余空间
+2. 普通限宽小组件，比如按钮，就按设计师标准的px做，图中要求60px宽，那就直接写`width:60px`。
+3. 字体规范，默认字体不标，就选用系统默认字体（16px），然后设几个固定字号规范，较大、大、较小、小，都是多少px都要说明。不要让设计图随意给出无限种字号。
+4. 间距、圆角规范。同样固定几个枚举值，整个应用所有css中的单位都在这几个固定的值域中。
+
+宽屏图在大多数情况就是一个示意图，无需切图。
+除非有特殊的图片，在宽屏下要请求不同的图源、设不同的宽度，此时可放在[match-media组件](../../component/match-media.md)中，为不同的屏幕宽度设不同的内容宽度。
+
+宽屏适配指南[另见](../../adapt.md)
+
+如果坚持不适配宽屏，那么为了防止在宽屏上出问题，可以在app.uvue的page选择器中全局设置页面宽度的max-width，但同时仍需放弃rpx。（注意app平台需蒸汽模式才支持page选择器）
+
+### 不同单位的差异
+- 长度默认值差异
+	* App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
+	* Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理 \
+	App平台允许设置纯数字是为了性能考虑，在需要频繁更改长度时，使用纯数字会比"数字+px"稍微快一点。\
+	日常开发为了更好的跨端兼容，还是推荐给长度 `<length>` 指定明确单位。
+
+- 单位精度差异
+	- px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在不同浏览器和手机OS，可能造成细微的误差。\
+	尤其是浏览器对于小数点的px兼容不够好，早期浏览器很难正常显示`0.5px`。但app可以正常显示。\
+	另外`rpx`和`百分比`，比`px`更容易产生浮点数，所以**如果px能满足需求，尽量不用rpx和百分比**。
+
+- 性能差异
+   * 性能 px > rpx > 百分比。rpx需要根据屏幕宽度换算为px，而百分比需要根据父容器的高或宽换算为px，计算复杂度高于rpx。
+
+## 字体大小单位
+
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| em | Web 4.0 / 微信小程序 4.41 / Android(VDOM) 3.9 / Android(Vapor) x / iOS(VDOM) 4.11 / iOS(Vapor) x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | app平台仅line-height属性支持 |
+| rem | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ch | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cm | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqmax | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqmin | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| cqw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| dvw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ex | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ic | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| in | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| lvw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| mm | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| pc | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| pt | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| q | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rcap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rch | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rex | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| ric | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| rlh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| svw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vb | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vh | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vi | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vmax | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vmin | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
+| vw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |

package/data/uniappx/css/common/selector.md

@@ -0,0 +1,55 @@
+# 选择器 @selector
+
+- web和小程序支持page元素选择器，以替代body元素选择器。
+- web端可以使用`html`、`body`、`:root`等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，`html`、`:root`写在页面style内无效，只能写在App.uvue内。
+- 深度选择器 `:deep()/::v-deep` 用法参考 [单文件 style - 深度选择器](/vue/index#scoped) 文档。
+
+| 名称 | 示例 | Web | Android | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | 描述 |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| 通配选择器 | * {} | 4.0 | x | x | x | x | x |  |
+| 类选择器 | .class {} | 4.0 | 3.9 | 4.11 | 5.11 | 4.61 | 5.0 |  |
+| 元素选择器 | \[tag] {} | 4.0 | x | x | x | x | x | App平台蒸汽模式支持page选择器 |
+| ID 选择器 | #\[id] {} | 4.0 | x | x | x | x | x |  |
+| 属性选择器 | \[attr] {} | 4.0 | x | x | x | x | x |  |
+| 分组选择器 | .a, .b {} | 4.0 | 3.9 | 4.11 | 5.11 | 4.61 | 5.0 |  |
+| 直接子代选择器 | .a > .b {} | 4.0 | 3.9 | 4.11 |   | 4.61 | x |  |
+| 后代选择器 | .a .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
+| 一般兄弟选择器 | .a ~ .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
+| 紧邻兄弟选择器 | .a + .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
+| 伪类选择器 | :active {} | 4.0 | x | x | x | x | x |  |
+| 伪元素选择器 | ::before {} | 4.0 | x | x | x | x | x |  |
+
+::: warning 注意
+1. 选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，**当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新**。
+2. :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。小程序平台均给view组件引入了`hover-class`，考虑到跨端兼容和体验，建议使用 `hover-class` 属性来实现点击态效果。[详见](../../component/view.md#hover-class)
+3. 不推荐使用伪元素来创建不占宽度的边框，W3C标准推荐使用 box-sizing 来控制边框是否占宽度。
+4. 关系类选择器（分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择），无法在编译期处理，必须运行时动态计算，在App上有额外的性能损耗。推荐尽量使用简单的选择器来解决问题。
+
+## 示例
+
+```vue
+<template>
+  <view :class="docBody">
+    <text :class="rowDesc">描述内容</text>
+  </view>
+</template>
+
+<style>
+  .doc-body1 .row-desc1 {
+    color: #ff0000;
+  }
+  .doc-body1 .row-desc2 {
+    color: #0000ff;
+  }
+  .doc-body2 .row-desc1 {
+    color: #00ff00;
+  }
+</style>
+
+```
+
+以上代码示例，当我们把 `rowDesc` 变量从 `row-desc1` 变为 `row-desc2` 时，会更新 `text` 节点样式，但是如果把 `docBody` 变量从 `doc-body1` 变为 `doc-body2`，是不会更新 `text` 节点样式的。\
+因为 `doc-body` 不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能。
+
+::: warning 注意
+App端相邻选择器暂不支持动态新增或删减节点，为了优化性能减少一些重新渲染工作，示例 [https://issues.dcloud.net.cn/pages/issues/detail?id=1452](https://issues.dcloud.net.cn/pages/issues/detail?id=1452)

package/data/uniappx/css/common/style-isolation.md

@@ -0,0 +1,215 @@
+# class样式隔离策略
+## 背景
+uni-app x中，有3种class样式
+- 全局样式：在app.uvue里引入的class
+- 页面样式：页面中的style节点下的class
+- 组件样式：组件中的style节点下的class
+
+这3者的影响关系，引用和覆盖，就是class样式隔离策略。
+- 引用
+指的是否能引用到某个class，比如组件里是否可以引用到页面中的class、全局的class。
+- 覆盖
+指的是同名时，谁能覆盖谁。比如全局的class中有一个classA，页面中也有一个classA、组件中也有一个classA，同名了，那么到底谁的优先级更高。
+
+在实际开发中，有的组件是自己开发的、有的是引入三方组件，不同场景下隔离需求也不一样。
+
+对于组件作者，大多不希望外部的class影响自身的样式，导致自己的组件不正常。
+
+但有的组件作者，没有给组件使用者提供恰当的组件样式自定义方式，导致依赖被外部覆盖class来定制组件样式。
+
+有些插件作者开发的不是组件，而是页面模板，尤其是基于dialogPage的页面插件，也同样存在如何让插件使用者自定义插件内样式的问题。
+
+这是一个有点复杂的多边关系，需要一个明确的默认策略，并提供自定义方案。
+
+在HBuilderX 5.0以前，这个关系并没有梳理清楚，web、各家小程序各有各的策略。
+
+从HBuilderX 5.0起，全平台统一了样式隔离策略。**这可能会造成一定的向下兼容问题，开发者需要注意。**
+
+## HBuilderX 5.0以前的策略
+- web
+	* 全局影响所有
+	* 页面、组件、父子组件之间隔离，互不影响
+	* 可以使用v-deep/deep向下穿透样式。
+- 微信小程序和App
+	* 全局影响所有
+	* 页面影响组件。父组件不影响子组件。
+	* 不支持v-deep
+	* 同权重选择器下，优先级从低到高依次为：全局样式 < 页面样式 < 组件样式
+
+## HBuilderX 5.0+ 全平台统一样式隔离策略2.0
+
+uni-app x 5.0起，提供了 `样式隔离策略2.0`
+
+蒸汽模式仅支持`样式隔离策略2.0`
+
+VDOM 模式，考虑到向下兼容问题，目前没有废弃老版样式隔离策略，暂时默认是老策略。需要显式开启2.0策略。
+
+### VDOM 模式的开启方式
+在manifest.json源码视图中设置：`manifest.json -> uni-app-x -> styleIsolationVersion: "2"`，可以开启`样式隔离策略2.0`
+```json
+{
+	"name": "Hello uni-app x",
+	"appid": "__UNI__HelloUniAppX",
+	"versionName": "2.0.0",
+	"versionCode": 20000,
+	"uni-app-x": {
+		"styleIsolationVersion":"2"
+	}
+}
+```
+
+推荐插件作者在自己的项目下打开样式隔离策略2.0，尽快完成插件适配。主流插件作者陆续改造完毕后，HBuilderX将再次升级，调整为 VDOM 模式也默认使用样式隔离策略2.0，并逐步废弃老版样式隔离策略。
+
+样式隔离策略2.0的详细介绍如下：
+
+### 默认策略
+- 全局影响页面
+	* 页面可以引用全局class，如果有同名class则合并，优先级页面>全局。
+	* 组件不可以引用全局class。
+- 页面、组件、父子组件之间隔离，互不影响。
+- 组件根样式传递依然生效，不受样式隔离策略影响
+	* 如果组件是单根节点，组件父层使用时给组件上设置class和style，会作用到组件的根节点。
+	* 如果组件是多根节点，父层使用时设置的class和style如何分配，需要组件内部写代码分配这些样式传递给哪些元素。
+
+### 自定义方式
+#### isolated配置是否隔离
+虽然有默认策略，但页面和组件，均支持通过配置样式隔离策略，单独声明自己是否允许被外部影响。
+
+在`
+```
+
+- 选项式示例
+
+推荐开发者尽快升级选项式为组合式，但样式隔离策略2.0在 VDOM 模式下也支持选项式写法。
+
+```vue
+
+```
+
+本文所指的页面，不区分普通页面还是dialogPage。
+
+本策略调整，会对插件市场的组件使用造成较大影响。
+
+如果组件作者，希望保持向下兼容，即兼容HBuilderX 5.0以前的样式方案。可以在组件内配置app-and-page，允许全局和页面进行同名class合并。
+
+但注意即便配置了app-and-page，只是尽可能减少向下兼容，和原来也有少许差异，即原本web下页面不能影响组件，配置app-and-page后会被影响。
+
+#### external-class
+
+当组件隔离后，不受外部class影响，那么组件的样式定制，就需要一套新的完善方案。
+
+组件的根样式，可以通过父层使用组件时传入style或class来影响。
+
+但很多组件有嵌套子组件，这些子组件也有开放给外部使用者来自定义样式的需求。
+
+有一种方式是把子组件的样式，封装成组件属性。但这种属性封装有较多弊端：
+1. 封装很多属性，组件作者麻烦。封装少了，组件使用者不够用
+2. 属性太多导致组件性能不佳，初始化速度慢
+3. 属性无法使用css变量，很多主题样式依赖css变量
+
+在其他平台，有各自的解决方案：
+- 在web component中，默认也是样式隔离，但设计了一套::part伪元素方案来影响组件的子组件样式。
+- 微信小程序提供的方案是external-class，通过组件属性名称修改组件内部子组件样式。
+
+不过这2套方案无法跨到对方的平台。
+
+uni-app x提供了一套跨平台的新方案。它的写法类似微信小程序的external-class，也是通过组件属性修改组件内部子组件样式。但为了跨平台，逻辑又与微信的实现有差异。
+
+在过去的uni-app中，一直有一个用法，比如input组件的placeholder-class属性，传入一个class名称，可以修改input组件内部的placeholder的样式。
+
+现在这套机制开放出来，所有组件作者都可以使用。
+
+##### external-class：外部影响组件子元素的方案
+
+HBuilderX 5.0+，提供了可跨全平台的external-class，即组件把必要的子组件的样式暴露出去，外部可以传入一个class进行覆盖。相比属性封装，这样更优雅且高性能。
+
+举个例子，假使有一个组件switch开关，它内部有2层结构，根view和圆球view。
+
+根view的样式可以被父层直接设置的class和style影响，那么圆球view可以暴露一个 thumb-class 的扩展class被外部影响。
+
+Switch组件示例源码：
+```vue
+<template>
+  <view class="uni-switch"> 
+    <view class="uni-switch-thumb" :class="thumbClass"></view> 
+  </view>
+</template>
+
+```
+
+有了这样的组件，那么使用时在组件上写一个thumb-class属性，就可以定义组件的子组件样式：
+```vue
+<template>
+	<switch thumb-class="red-thumb-class"></switch>
+</template>
+<style>
+.red-thumb-class{
+	background-color:red
+}
+</style>
+```
+
+上面的代码，会让这个Switch组件的圆球变成红色。
+
+以上只是举例，实际的switch组件要比上述例子复杂。可以参考Switch组件的[源码](https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-form)
+
+defineOptions中配置externalClasses，从HBuilderX5.0起支持。
+
+总结下使用external-class需要做的事情：
+- 对于组件作者：
+1. 给组件定义一个props属性，比如xxxClass
+2. 给组件的子元素上绑定一个动态Class，值为xxxClass属性，比如 :class="xxxClass"
+3. 在script中注册externalClasses，让编译器把外部使用者设置的样式编入组件内可生效，即`defineOptions({externalClasses: ['xxx-class']})`
+- 对于组件使用者：
+1. 在组件属性上使用 xxx-class="yyy"
+2. 在style里或全局里定义名为yyy的class
+
+在HBuilderX 5.0之前，开发者会发现不写这个配置，在非web平台，也可以生效。
+
+这是因为非web平台在HBuilderX 5.0之前，会默认把页面样式合并到组件中，也就是组件在非web平台默认不隔离，可以引用页面class。
+
+从HBuilderX 5.0起，组件样式默认隔离，如果组件不配置`app`或`app-and-page`，就只能通过注册externalClasses来实现外部样式的影响。
+
+**注意事项：**
+
+- 由于全局样式是最低优先级，如果传递给组件externalClasses的class是在全局App.uvue中定义的，且期望覆盖组件内部自身class的部分样式，需要给指定的css属性增加`!important;`。
+- 为兼容小程序平台的组件规范，`externalClasses` 必须在组件定义阶段以静态字面量方式声明，且其内容需要在编译时可确定；不支持通过变量、表达式计算、函数返回值等方式动态生成。
+
+##### 组件避免外部过度干扰样式
+
+如果组件作者有些样式并不想被外部自定义，那么可以写在组件的内联style中。由于class的优先级低于style，所以内联style永远生效（除非class中的样式定义为important）。
+
+还是以Switch组件举例，假使组件源码中圆球view的style写了`border-width: 2px`，那么外部使用者无法改变圆球view的边框粗细。
+```vue
+<template>
+  <view class="uni-switch"> 
+    <view style="border-width: 2px" class="uni-switch-thumb" :class="thumbClass"></view> 
+  </view>
+</template>
+```
+
+- 关于external-style的说明
+
+除了external-class，其实组件作者也可以提供external-style。
+
+此时可作为组件属性直接使用，无需在defineOptions中注册externalClasses。
+
+external-style是内联字符串，不受样式隔离策略影响，它永远生效。所以在HBuilderX 5.0之前也是生效的。
+
+但external-style有个需要注意的问题，这种方式会导致子组件所有样式都能被外部影响。
+
+组件作者难以控制哪部分样式不允许被外部修改。可能出现使用者使用不当导致组件变形。
+
+```vue
+<template>
+  <view class="uni-switch"> 
+    <view :style="thumbStyle" class="uni-switch-thumb" :class="thumbClass"></view> 
+  </view>
+</template>
+
+```
+
+## 注意
+再次提醒，以上介绍的styleIsolation、external-class等内容，均属于样式隔离策略2.0的内容。VDOM 模式的应用未开启 `manifest.json->uni-app-x->styleIsolationVersion: "2"` 是不会生效的。
+
+默认策略下，父组件的样式不会影响子组件。但在web下子组件的根节点依然可能会受父组件的影响，所以需要尽可能避免在子组件的根节点加父组件的样式。

package/data/uniappx/css/common/variable.md

@@ -0,0 +1 @@
+CSS 变量文档已经移至[新地址](./function.md#var)