tmui-cli 2.0.3 → 2.0.5

package/data/uni-app-x-docs/css/common/style-isolation.md

@@ -0,0 +1,258 @@
+# 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配置是否隔离
+虽然有默认策略，但页面和组件，均支持通过配置样式隔离策略，单独声明自己是否允许被外部影响。
+
+在`<script setup>`中使用 defineOptions 定义 styleIsolation，取值值域有 isolated | app | app-and-page。
+
+页面的默认值是 app，组件的默认值是 isolated。（注意一个uvue页面，也可以同时被当做组件使用，此时默认值也变成了 isolated）
+
+- isolated：表示隔离，不受外部影响
+	* 配置为isolated的页面，不能引用全局class，页面中出现与全局class中同名的class，也不会和全局class合并。
+	* 配置为isolated的组件，不能引用全局class、不能引用父页面或父组件的class。全局、页面或父组件的class中出现与组件同名的class，也不会合并。
+- app：表示允许全局class影响
+	* 配置为app的页面，可以引用全局class，页面中出现与全局class中同名的class，会和全局class合并，优先级：页面 > 全局。
+	* 配置为app的组件，可以引用全局class，不受所在页面的配置影响（不管页面配置的是isolated还是app），组件中出现与全局class中同名的class，会和全局class合并，优先级：组件 > 全局。
+- app-and-page：表示组件允许全局和页面的class影响。此配置对页面无效。
+	* 配置为app-and-page的组件，可以引用全局和页面的class，组件中出现与全局和页面class中同名的class，会和全局、页面class合并，优先级：页面 > 组件 > 全局。
+	* 配置为app-and-page的组件，不受所在页面的配置影响（不管页面配置的是isolated还是app），均会按上一条规则合并。
+
+使用示例：
+- 组合式示例
+```vue
+<script setup lang="uts">
+	defineOptions({
+		styleIsolation: 'isolated' //表示隔离，不受外部影响
+	})
+</script>
+```
+
+- 选项式示例
+
+推荐开发者尽快升级选项式为组合式，但样式隔离策略2.0在 VDOM 模式下也支持选项式写法。
+
+```vue
+<script>
+export default {
+    styleIsolation: 'isolated' //表示隔离，不受外部影响
+}
+</script>
+```
+
+本文所指的页面，不区分普通页面还是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 -->
+    <view class="uni-switch-thumb" :class="thumbClass"></view> <!-- 这里是圆球view -->
+  </view>
+</template>
+<script lang="uts" setup>
+const props = withDefaults(defineProps<SwitchProps>(), {
+  thumbClass: '' // 定义一个thumbClass属性
+})
+
+defineOptions({
+  externalClasses: ['thumb-class'] // 注册扩展class，有了这个配置，uni-app x 框架就会把没有写在组件里的外部class传入进来。数组方式，支持配置多个external-class
+})
+</script>
+```
+
+有了这样的组件，那么使用时在组件上写一个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 -->
+    <view style="border-width: 2px" class="uni-switch-thumb" :class="thumbClass"></view> <!-- 这里是圆球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 -->
+    <view :style="thumbStyle" class="uni-switch-thumb" :class="thumbClass"></view> <!-- 这里是圆球view -->
+  </view>
+</template>
+<script lang="uts" setup>
+const props = withDefaults(defineProps<SwitchProps>(), {
+  thumbClass: '' // 定义一个thumbClass属性
+  thumbStyle: '' // 定义一个thumbStyle属性
+})
+
+defineOptions({
+  externalClasses: ['thumb-class'] // 注册扩展class，无需注册扩展style
+})
+</script>
+```
+
+## 注意
+再次提醒，以上介绍的styleIsolation、external-class等内容，均属于样式隔离策略2.0的内容。VDOM 模式的应用未开启 `manifest.json->uni-app-x->styleIsolationVersion: "2"` 是不会生效的。
+
+默认策略下，父组件的样式不会影响子组件。但在web下子组件的根节点依然可能会受父组件的影响，所以需要尽可能避免在子组件的根节点加父组件的样式。

package/data/uni-app-x-docs/css/common/variable.md

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

package/data/uni-app-x-docs/css/direction.md

@@ -0,0 +1,18 @@
+## direction
+
+
+<!-- CSSJSON.direction.description -->
+
+<!-- CSSJSON.direction.compatibility -->
+
+<!-- CSSJSON.direction.syntax -->
+
+<!-- CSSJSON.direction.values -->
+
+<!-- CSSJSON.direction.defaultValue -->
+
+<!-- CSSJSON.direction.unixTags -->
+
+<!-- CSSJSON.direction.example -->
+
+<!-- CSSJSON.direction.reference -->

package/data/uni-app-x-docs/css/display.md

@@ -0,0 +1,23 @@
+## display
+
+
+<!-- CSSJSON.display.description -->
+
+<!-- CSSJSON.display.syntax -->
+
+<!-- CSSJSON.display.restrictions -->
+
+<!-- CSSJSON.display.values -->
+
+**注意**
+设置 visibility 为 hidden，或设置 display 为 none 都可以隐藏元素。差异是通过 visibility 隐藏元素仍然占据页面位置，通过 display 隐藏元素不占据页面位置。
+
+<!-- CSSJSON.display.defaultValue -->
+
+<!-- CSSJSON.display.unixTags -->
+
+<!-- CSSJSON.display.compatibility -->
+
+<!-- CSSJSON.display.example -->
+
+<!-- CSSJSON.display.reference -->

package/data/uni-app-x-docs/css/flex-basis.md

@@ -0,0 +1,20 @@
+## flex-basis
+
+
+<!-- CSSJSON.flex-basis.description -->
+
+<!-- CSSJSON.flex-basis.syntax -->
+
+<!-- CSSJSON.flex-basis.restrictions -->
+
+<!-- CSSJSON.flex-basis.values -->
+
+<!-- CSSJSON.flex-basis.defaultValue -->
+
+<!-- CSSJSON.flex-basis.unixTags -->
+
+<!-- CSSJSON.flex-basis.compatibility -->
+
+<!-- CSSJSON.flex-basis.example -->
+
+<!-- CSSJSON.flex-basis.reference -->

package/data/uni-app-x-docs/css/flex-direction.md

@@ -0,0 +1,20 @@
+## flex-direction
+
+
+<!-- CSSJSON.flex-direction.description -->
+
+<!-- CSSJSON.flex-direction.syntax -->
+
+<!-- CSSJSON.flex-direction.restrictions -->
+
+<!-- CSSJSON.flex-direction.values -->
+
+<!-- CSSJSON.flex-direction.defaultValue -->
+
+<!-- CSSJSON.flex-direction.unixTags -->
+
+<!-- CSSJSON.flex-direction.compatibility -->
+
+<!-- CSSJSON.flex-direction.example -->
+
+<!-- CSSJSON.flex-direction.reference -->

package/data/uni-app-x-docs/css/flex-flow.md

@@ -0,0 +1,20 @@
+## flex-flow
+
+
+<!-- CSSJSON.flex-flow.description -->
+
+<!-- CSSJSON.flex-flow.syntax -->
+
+<!-- CSSJSON.flex-flow.restrictions -->
+
+<!-- CSSJSON.flex-flow.values -->
+
+<!-- CSSJSON.flex-flow.defaultValue -->
+
+<!-- CSSJSON.flex-flow.unixTags -->
+
+<!-- CSSJSON.flex-flow.compatibility -->
+
+<!-- CSSJSON.flex-flow.example -->
+
+<!-- CSSJSON.flex-flow.reference -->

package/data/uni-app-x-docs/css/flex-grow.md

@@ -0,0 +1,20 @@
+## flex-grow
+
+
+<!-- CSSJSON.flex-grow.description -->
+
+<!-- CSSJSON.flex-grow.syntax -->
+
+<!-- CSSJSON.flex-grow.restrictions -->
+
+<!-- CSSJSON.flex-grow.values -->
+
+<!-- CSSJSON.flex-grow.defaultValue -->
+
+<!-- CSSJSON.flex-grow.unixTags -->
+
+<!-- CSSJSON.flex-grow.compatibility -->
+
+<!-- CSSJSON.flex-grow.example -->
+
+<!-- CSSJSON.flex-grow.reference -->

package/data/uni-app-x-docs/css/flex-shrink.md

@@ -0,0 +1,20 @@
+## flex-shrink
+
+
+<!-- CSSJSON.flex-shrink.description -->
+
+<!-- CSSJSON.flex-shrink.syntax -->
+
+<!-- CSSJSON.flex-shrink.restrictions -->
+
+<!-- CSSJSON.flex-shrink.values -->
+
+<!-- CSSJSON.flex-shrink.defaultValue -->
+
+<!-- CSSJSON.flex-shrink.unixTags -->
+
+<!-- CSSJSON.flex-shrink.compatibility -->
+
+<!-- CSSJSON.flex-shrink.example -->
+
+<!-- CSSJSON.flex-shrink.reference -->

package/data/uni-app-x-docs/css/flex-wrap.md

@@ -0,0 +1,20 @@
+## flex-wrap
+
+
+<!-- CSSJSON.flex-wrap.description -->
+
+<!-- CSSJSON.flex-wrap.syntax -->
+
+<!-- CSSJSON.flex-wrap.restrictions -->
+
+<!-- CSSJSON.flex-wrap.values -->
+
+<!-- CSSJSON.flex-wrap.defaultValue -->
+
+<!-- CSSJSON.flex-wrap.unixTags -->
+
+<!-- CSSJSON.flex-wrap.compatibility -->
+
+<!-- CSSJSON.flex-wrap.example -->
+
+<!-- CSSJSON.flex-wrap.reference -->

package/data/uni-app-x-docs/css/flex.md

@@ -0,0 +1,20 @@
+## flex
+
+
+<!-- CSSJSON.flex.description -->
+
+<!-- CSSJSON.flex.syntax -->
+
+<!-- CSSJSON.flex.restrictions -->
+
+<!-- CSSJSON.flex.values -->
+
+<!-- CSSJSON.flex.defaultValue -->
+
+<!-- CSSJSON.flex.unixTags -->
+
+<!-- CSSJSON.flex.compatibility -->
+
+<!-- CSSJSON.flex.example -->
+
+<!-- CSSJSON.flex.reference -->

package/data/uni-app-x-docs/css/font-family.md

@@ -0,0 +1,50 @@
+## font-family
+
+
+<!-- CSSJSON.font-family.description -->
+
+<!-- CSSJSON.font-family.syntax -->
+
+<!-- CSSJSON.font-family.restrictions -->
+
+<!-- CSSJSON.font-family.values -->
+
+<!-- CSSJSON.font-family.defaultValue -->
+
+<!-- CSSJSON.font-family.unixTags -->
+
+<!-- CSSJSON.font-family.compatibility -->
+
+<!-- CSSJSON.font-family.example -->
+
+### 字体设置
+
+对于系统中已经存在的字体，font-family里直接写字体名称即可。\
+但对于系统中不存在的字体，需要通过src属性的url方法来指定字体路径。如下：
+```css
+@font-face {
+    font-family: UniFontFamily;
+    src: url('/static/uni.ttf');
+  }
+```
+
+**关于自定义字体的格式**
+- app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体
+- app-ios: 支持ttf、otf、woff、woff2，需要注意，css 中的 font-family 值可以随意取，这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。如果你使用 [http://www.iconfont.cn/](http://www.iconfont.cn/) 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，极大可能发生冲突。
+- web: 支持的字体取决于浏览器，详见mdn或caniuse
+- app平台: 指定自定义字体路径时，必须使用url()包裹，支持本地文件路径、远程地址，4.33 版本开始支持 base64 格式数据；
+- HarmonyOS平台: 支持ttf、otf 使用 [@ohos.font](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-font-V13?ha_source=Dcloud&ha_sourceId=89000448) 实现
+
+自定义字体的加载
+1. 在css中加载：[@font-face](./common/at-rules.md)
+2. 使用API加载： [uni.loadFontface](../api/load-font-face.md)
+
+
+### App平台差异
+- app平台 font-family 样式不支持继承，每层组件都需要设样式
+- app平台 font-family 属性值不支持使用分隔符（,）多个字体名称设置字体回退列表，仅支持设置一个字体
+- app平台由于不支持伪元素，字体图标加载需使用unicode直显。[详见](./common/at-rules.md)
+
+<!-- CSSJSON.font-family.reference -->
+
+[示例代码](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/CSS/text/font-family.uvue)

package/data/uni-app-x-docs/css/font-size.md

@@ -0,0 +1,51 @@
+## font-size
+
+
+<!-- CSSJSON.font-size.description -->
+
+<!-- CSSJSON.font-size.syntax -->
+
+<!-- CSSJSON.font-size.restrictions -->
+
+<!-- CSSJSON.font-size.values -->
+
+<!-- CSSJSON.font-size.defaultValue -->
+
+<!-- CSSJSON.font-size.unixTags -->
+
+<!-- CSSJSON.font-size.compatibility -->
+
+<!-- CSSJSON.font-size.example -->
+
+#### App平台差异
+- 字体单位说明
+
+App平台仅支持 px 和 rpx 单位设置字体大小，默认值为16px。
+
+如果仅开发App，那么属性值可以不设置单位，不设置单位时当做 px 处理。但无法兼容web和小程序。
+
+不支持百分比的单位、不支持基于用户默认字体大小的绝对大小关键字，如small、medium、large等、不支持em、rem、ex等单位。
+
+虽然支持但不推荐使用rpx。
+
+正常情况下，普通字体不需要、也不应该设置font-size。使用默认的16px即可。
+
+更并不需要显式的设置`font-size:16px`，这种多余的代码浪费性能。
+
+需要变大或变小的字体，基于16px的默认值，适当增加或缩小字号即可。
+
+如果在font-size中使用rpx，类似于web开发中给字体大小设百分比，没有意义。rpx在font-size中使用有如下问题：
+1. 根据屏幕宽度动态计算，在超宽屏上脱离预期的大
+2. rpx性能不如px，排版引擎需要根据屏幕宽度给页面里每个text设置样式，如果text组件很多，就会加重计算耗时。尤其是一些开发者给所有text组件都设rpx，性能会很差。大部分字体应该不仅没有rpx，甚至连px也不设，就使用默认的字号即可。
+3. rpx会计算出小数，小数又需要取整，在不同情况下就会产生精度误差。这个在贴边场景下会比较明显，有的屏幕下2个元素看起来是挨着的，有的屏幕下2个元素中间有条缝。
+
+详见[rpx适用范围](./common/length.md#rpx)
+
+- 继承说明
+App平台不支持样式继承，font-size 也不例外。font-size仅对作用的当前[text](../component/text.md)组件生效。
+
+
+#### Web规范
+属性值必须设置单位，无单位时当做非法值处理。非法值会回退为默认值，即16px。
+
+<!-- CSSJSON.font-size.reference -->

package/data/uni-app-x-docs/css/font-style.md

@@ -0,0 +1,23 @@
+## font-style
+
+
+<!-- CSSJSON.font-style.description -->
+
+<!-- CSSJSON.font-style.syntax -->
+
+<!-- CSSJSON.font-style.restrictions -->
+
+<!-- CSSJSON.font-style.values -->
+
+<!-- CSSJSON.font-style.defaultValue -->
+
+<!-- CSSJSON.font-style.unixTags -->
+
+<!-- CSSJSON.font-style.compatibility -->
+
+<!-- CSSJSON.font-style.example -->
+
+#### App平台差异
+- app平台 font-style 样式不支持继承
+
+<!-- CSSJSON.font-style.reference -->

package/data/uni-app-x-docs/css/font-weight.md

@@ -0,0 +1,24 @@
+## font-weight
+
+
+<!-- CSSJSON.font-weight.description -->
+
+<!-- CSSJSON.font-weight.syntax -->
+
+<!-- CSSJSON.font-weight.restrictions -->
+
+<!-- CSSJSON.font-weight.values -->
+
+<!-- CSSJSON.font-weight.defaultValue -->
+
+<!-- CSSJSON.font-weight.unixTags -->
+
+<!-- CSSJSON.font-weight.compatibility -->
+
+<!-- CSSJSON.font-weight.example -->
+
+#### App平台差异
+- app平台 font-weight 样式不支持继承
+- app-android平台，部分自定义字体（如：字体中只包含单一字重文件、不是支持字重轴的可变字体）不支持设置font-weight具体数值
+
+<!-- CSSJSON.font-weight.reference -->

package/data/uni-app-x-docs/css/height.md

@@ -0,0 +1,23 @@
+## height
+
+
+<!-- CSSJSON.height.description -->
+
+<!-- CSSJSON.height.syntax -->
+
+<!-- CSSJSON.height.restrictions -->
+
+<!-- CSSJSON.height.values -->
+
+**注意**
+> 属性值为长度 `<length>` 时，App平台可以不设置单位，Web端必须设置单位，详情参考[长度单位](./README.md#length)。
+
+<!-- CSSJSON.height.defaultValue -->
+
+<!-- CSSJSON.height.unixTags -->
+
+<!-- CSSJSON.height.compatibility -->
+
+<!-- CSSJSON.height.example -->
+
+<!-- CSSJSON.height.reference -->

package/data/uni-app-x-docs/css/justify-content.md

@@ -0,0 +1,20 @@
+## justify-content
+
+
+<!-- CSSJSON.justify-content.description -->
+
+<!-- CSSJSON.justify-content.syntax -->
+
+<!-- CSSJSON.justify-content.restrictions -->
+
+<!-- CSSJSON.justify-content.values -->
+
+<!-- CSSJSON.justify-content.defaultValue -->
+
+<!-- CSSJSON.justify-content.unixTags -->
+
+<!-- CSSJSON.justify-content.compatibility -->
+
+<!-- CSSJSON.justify-content.example -->
+
+<!-- CSSJSON.justify-content.reference -->

package/data/uni-app-x-docs/css/left.md

@@ -0,0 +1,20 @@
+## left
+
+
+<!-- CSSJSON.left.description -->
+
+<!-- CSSJSON.left.syntax -->
+
+<!-- CSSJSON.left.restrictions -->
+
+<!-- CSSJSON.left.values -->
+
+<!-- CSSJSON.left.defaultValue -->
+
+<!-- CSSJSON.left.unixTags -->
+
+<!-- CSSJSON.left.compatibility -->
+
+<!-- CSSJSON.left.example -->
+
+<!-- CSSJSON.left.reference -->