stylelint-taro 多端融合样式校验基于 Stylelint 的 Taro 跨端 CSS 子集校验完全指南【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/tarostylelint-taro 是 Taro 官方仓库中面向多端开发的 Stylelint 规则集合其核心思想是根据目标适配端所支持的最小样式子集进行样式校验开发者声明需要适配 h5、miniprogram、harmony、rn 中的哪些端工具便会自动合并各端的能力约束对不满足任一目标端能力范围的样式给出 warning 提示。本文将以 packages/stylelint-taro/README.md 为主线结合仓库内规则实现与平台配置源码完整讲解安装、配置、内置规则、VS Code 接入方式以及各端样式属性与选择器的支持边界帮助你在一套样式代码中提前拦截跨端不兼容问题。安装在项目根目录以开发依赖方式安装yarn add -D stylelint-taro从 package.json 可以看到该包要求 Node.js 18并以stylelint^16作为 peerDependency即使用前需要确保项目中已经安装 Stylelint 16 及以上版本。包同时提供dist/index.cjs.jsCommonJS与dist/index.esm.jsESM两种构建产物供不同模块体系的项目引入。快速上手使用 mergeConfig 合并多端规则项目根目录创建.stylelintrc.js// .stylelintrc.js const mergeConfig require(stylelint-taro/lib/config) // 合并配置填写需要适配的端h5, miniprogram, harmony, rn module.exports mergeConfig([h5, miniprogram, harmony], { // 自定义样式规范: 支持sass的语言规范 // customSyntax: postcss-scss // 自定义Stylelint配置 rules: {}, })mergeConfig接收两个参数参数类型说明platforms(h5 \| miniprogram \| harmony \| rn)[]需要适配的端列表决定最终生效的样式约束集合stylelintConfigstylelint.Config自定义 Stylelint 配置会与平台规则合并其中rules优先级高于平台默认规则mergeConfig 的底层逻辑从源码 src/config.ts 可以看清mergeConfig做的事注入平台环境变量将平台列表写入process.env.__PLATFORMS__供规则在运行时感知当前适配范围插件合并把 h5 / miniprogram / harmony / rn 各平台配置中声明的plugins与用户自定义的plugins合并因此平台默认会注册stylelint-taro自身规则合并各平台规则通过taroRules(platforms)合并为规则集合随后与用户自定义rules展开合并用户的配置可以覆盖平台默认行为统一告警级别所有由平台生成的规则统一附加{ severity: warning }见 src/config.ts即不阻断构建仅给出样式风险提示。多端规则合并采用取交集策略mergeRule见 src/config.ts当多个平台对同一规则给出数组形式的允许列表时使用_.intersection取公共部分对布尔型规则取并集。这意味着声明的端越多样式约束越严格——最终校验的是所有目标端都支持的公共样式子集。内置 Rule 详解stylelint-taro 注册了 3 条命名空间为taro/的规则注册入口见 src/index.ts规则清单见 src/rules/index.ts规则作用taro/no-nested-selectors仅允许使用单个 class 选择器taro/property-allowed-list允许使用的属性列表按平台分别约束taro/declaration-property-value-allowed-list允许的属性及其对应取值taro/no-nested-selectors仅能使用单类选择器// .stylelintrc.js module.exports mergeConfig([harmony], {})/* 通过检查 */ ✅ .hello { /* ... */ } /* 警告提示harmony平台仅能使用单类选择器 */ ❌ #a { } ❌ .a .b { } ❌ #a .b { } ❌ .a .b { } ❌ .a .b { } ❌ .a ~ .b { }该规则通过正则/^[.#]?[a-zA-Z0-9_-]$/判定选择器是否仅由单个类或 id名称构成任何包含组合器、空格嵌套、伪类的写法都会触发告警实现见 src/rules/no-nested-selectors/index.ts。对应测试用例src/rules/no-nested-selectors/tests/index.spec.ts覆盖了.a .b、#a .b、.a.b、.a.b、.a~.b等拒绝场景以及.app的通过场景告警消息为${selector} 仅能使用单个class选择器受限端 harmony, rn。从源码看该规则实际面向 harmony 与 rn 两个受限端规则内platform [harmony, rn]这也与 harmony 平台配置中的disAllowedSelectors约束一致selector-max-id: 0、selector-max-type: 0、selector-max-attribute: 0、selector-max-universal: 0见 src/platform/harmony.ts。taro/property-allowed-list允许的属性列表该规则按平台分别声明允许使用的 CSS 属性。启用 harmony rn 后平台配置会自动注入对应的允许属性集合见 src/config.ts仅当平台列表中包含 harmony 或 rn 时才启用属性类校验。例如 harmony 平台在 src/platform/harmony.ts 中声明了 margin、padding、width、height、border、background 系列、font 系列、flex 布局系列、position、transform 等属性未在列表中的属性如float、grid等会被提示。taro/declaration-property-value-allowed-list允许的属性及取值允许针对每个平台为属性指定合法取值值可以是布尔true表示接受该属性的所有合法值、字符串枚举或正则{ plugins: [stylelint-taro] rules: { taro/declaration-property-value-allowed-list: { harmony: { color: true, // 支持color属性及所有合法值 text-align: [left, right], // 仅支持left、right 2个值 height: [/^-?\d(\.\d)?(px|vw|vh|%)?$/i] // 支持匹配height为length }, rn: { text-align: [left, center], // 仅支持left、center 2个值 } } } }平台配置中的supportedProperties就是该规则的数据来源其中的true、字符串数组与正则分别对应上述三种取值约束形式。底层使用的正则常量集中在 src/platform/constrant.tsLENGTH_REGEX /^-?\d(\.\d)?(px|rem|vw|vh|%)?$/i单一长度值LENGTH_REGEX_SPLIT支持以空格分隔的多段长度值如 margin 的四个方向NUMBER /^-?\d(\.\d)?$/数值BACKGROUND_IMAGE /(url\(|linear-gradient\()/背景图片资源或线性渐变。多端取值取交集的实际效果同时支持 rn 与 harmony 时// .stylelintrc.js module.exports mergeConfig([harmony, rn], {})/* 通过检查 */ ✅ .hello { text-align: left; } /* 警告提示 */ ❌ .hello2 { /* rn平台的text-align属性暂不支持right */ text-align: right; }原因在于harmony 的text-align支持[center, left, right]而 rn 侧supportedProperties为空对象见 src/platform/rn.ts通过 rn 平台通用规则与实际渲染能力约束后right不在交集内因而触发 warning。这正是多端融合校验的价值在开发阶段即可发现某个取值在某一端不生效的隐患。开启 VS Code 校验项目空间内建议通过修改.vscode/settings.json开启编辑器内联校验// .vscode/settings.json { stylelint.enable: true, stylelint.validate: [css, sass, scss, less, postcss] }配合customSyntax: postcss-scss在mergeConfig的第二个参数中传入即可让 SCSS/Less 等预处理器样式也享受同样的多端校验。样式支持情况值类型类型举例合法值备注Length10px、10vw、10vh、100%、10rem、calc(100% - 20px)1rem 16pxColor#f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green暂不支持 hsl 等方法Border1px solid #f00符合 w3c 规范通用属性以下为所有元素都支持的样式属性✔️ 表示支持❌ 表示当前不支持属性可选值 / 单位支持情况flexflexGrow flexShrink flexBasis✔️flex-growNumber✔️flex-shrinkNumber✔️flex-basisLength✔️flex-directionrow,row-reverse,column,column-reverse✔️justify-contentflex-start, flex-end, center, space-between, space-around, space-evenly✔️align-contentflex-start, flex-end, center, space-between, space-around, space-evenly✔️align-itemsflex-start, flex-end, center, baseline, stretch , auto✔️align-selfflex-start, flex-end, center, baseline, stretch , auto✔️flex-wrapnowrap, wrap, wrap-reverse❌positionrelative, absolute✔️leftLength✔️topLength❌rightLength❌z-indexNumber✔️bottomLength✔️marginLength \ Length Length \ Length Length Length \ Length Length Length Length✔️margin-topLength✔️margin-rightLength✔️margin-bottomLength✔️margin-leftLength✔️paddingLength \ Length Length \ Length Length Length \ Length Length Length Length✔️padding-topLength✔️padding-rightLength✔️padding-bottomLength✔️padding-leftLength✔️widthLength✔️heightLength✔️min-heightLength✔️min-widthLength✔️max-heightLength✔️max-widthLength✔️background✔️background-colorColor✔️background-imagesrc(xxx), linear-gradient(xxx) 支持图片资源和线性渐变✔️background-sizecover, contain, Length(x y), Length(x) Length(y)✔️background-positioncenter, top, bottom, left, right, Length(x y), Length(x) Length(y)✔️background-repeatrepeat, no-repeat, repeat-x, repeat-y✔️borderBorder可设置 4 个值控制 4 个方向✔️border-topBorder✔️border-leftBorder✔️border-rightBorder✔️border-bottomBorder✔️border-colorColor可设置 4 个值控制 4 个方向✔️border-top-colorColor✔️border-right-colorColor✔️border-bottom-colorColor✔️border-left-colorColor✔️border-radiusLength可设置 4 个值控制 4 个方向✔️border-top-left-radiusLength✔️border-top-right-radiusLength✔️border-bottom-left-radiusLength✔️border-bottom-right-radiusLength✔️border-styledotted, dashed, solid 4 个值控制 4 个方向✔️border-top-styledotted, dashed, solid✔️border-right-styledotted, dashed, solid✔️border-bottom-styledotted, dashed, solid✔️border-left-styledotted, dashed, solid✔️opacityNumber✔️displayflex, none, block✔️displayinline-block, inline-flex, inline❌overflowhidden, visible✔️transformtranslate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d✔️transform-originLength Length✔️content✔️⚠️ 注意transform不允许连续出现 2 个同类型如transform: translate(20px 20px) translate3d(10px, 30px, 30px)不合法display不支持行内取值inline / inline-block / inline-flex定位不支持bottom和right对照 harmony 平台配置src/platform/harmony.ts 中仅声明了top与leftposition可选值为absolute | relative | fixed。上表描述的是一般意义上的支持边界实际校验时以mergeConfig声明的平台对应的 harmony.ts 与 rn.ts 等平台配置为准并取多端交集因此不同平台组合下同一属性/取值的最终可用性可能更严格。文本样式属性可选值 / 单位支持情况font-sizeLength✔️font-family✔️font-stylenormal, italic✔️font-weight100~900, bold,bolder,light,lighter,normal✔️line-heightXXpx (需要指定具体指不支持 Number)✔️text-aligncenter, left, right✔️text-decoration(none, underline, line-through, overline) Color✔️text-overflowellipsis, clip✔️colorColor✔️-webkit-line-clampNumber✔️⚠️ 注意文本样式仅对Text/Text节点生效文本样式不支持继承line-height不支持数值即必须写成带单位的长度值如line-height: 20px。以下两种情况是正确的对文本进行样式添加的案例直接将样式添加在Text/上// ✅ 允许 Text classNametxthello/Text样式添加到View/下是一个文本内容// ✅ 允许 View classNametxthello/View错误案例// ❌ hello 父级没有添加文本样式txt的文本属性无法继承下去 View classNametxt Texthello/Text /ViewCSS 选择器通用选择器注意点支持类选择器不支持ID 选择器、标签选择器、属性选择器。选择器示例示例说明支持情况.class.intro选择所有 classintro 的元素✔️.class.class.red.big选择所有 classred big 元素✔️.class, .class.item, .text选择所有 classitem 元素和 classtext 元素✔️.class .class.grandfather .child选择所有 classgrandfather 内所有的 classchild 的元素✔️.class .class.parent .child选择所有父级是 classparent 的 classchild 元素✔️.class.class.red.big选择所有紧跟在 classred 元素之后的第一个 classbig 元素❌.class~.class.red~.big选择所有紧跟在 classred 之后的每一个 classbig 元素❌#id#firstname选择所有 idfirstname 的元素❌**选择所有元素❌elementp选择所有p元素❌[attribute][target]选择所有带有 target 属性元素❌[attributevalue][targetblank]选择所有使用 targetblank 的元素❌...其他❌伪类支持before、after。选择器示例示例说明支持情况:before.intro:before在每个 classintro 元素之前插入内容✔️:after.intro:after在每个 classintro 元素之后插入内容✔️:nth-child().intro:nth-child(2)选择 classintro 元素是其父级的第二个子元素❌:nth-last-child().intro:nth-last-child(2)选择 classintro 元素是其父级的第二个子元素, 从最后一个子项计数❌:first-child.intro:first-child选择 classintro 元素是其父级的第一个子级❌:last-child.intro:last-child选择 classintro 元素是其父级的最后一个子级❌:root:root选择文档的根元素❌:checkedinput:checked选择每个选中的输入元素❌...其他❌选择器层面的约束在平台配置中同样有据可查harmony 平台通过selector-max-id、selector-max-type、selector-max-attribute、selector-max-universal四条内建规则将 id/类型/属性/通配选择器数量上限设为 0并通过selector-pseudo-class-allowed-list: [before, after]限定伪类、selector-combinator-allowed-list: [, ]限定组合器rn 平台则额外设置了selector-max-combinators: 0完全禁止组合器见 src/platform/rn.ts并允许export、root两个伪类。这些约束叠加后代码中应尽量以单类选择器 before/after 伪类的方式编写跨端样式。平台默认规则速查mergeConfig在生成规则时还会附带各平台的通用 Stylelint 规则覆盖于用户rules之下值得在排障时留意harmonysrc/platform/harmony.ts禁止 vendor 前缀属性与取值color-named: never禁止命名颜色应使用#f00、rgb()等允许的单位为px, deg, %, vh, vw, s, rem禁止min / max / clamp等函数禁止规则。rnsrc/platform/rn.ts同样禁止 vendor 前缀允许的单位为px, rem, deg, %, vh, vw, vmin, vmax, srn 额外支持 vmin/vmaxdeclaration-no-important: true禁止!important。理解了这些默认约束即可在自定义rules中按需放行或收紧将 stylelint-taro 无缝嵌入 Taro 多端项目的日常样式开发流程。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
stylelint-taro 多端融合样式校验：基于 Stylelint 的 Taro 跨端 CSS 子集校验完全指南
stylelint-taro 多端融合样式校验基于 Stylelint 的 Taro 跨端 CSS 子集校验完全指南【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/tarostylelint-taro 是 Taro 官方仓库中面向多端开发的 Stylelint 规则集合其核心思想是根据目标适配端所支持的最小样式子集进行样式校验开发者声明需要适配 h5、miniprogram、harmony、rn 中的哪些端工具便会自动合并各端的能力约束对不满足任一目标端能力范围的样式给出 warning 提示。本文将以 packages/stylelint-taro/README.md 为主线结合仓库内规则实现与平台配置源码完整讲解安装、配置、内置规则、VS Code 接入方式以及各端样式属性与选择器的支持边界帮助你在一套样式代码中提前拦截跨端不兼容问题。安装在项目根目录以开发依赖方式安装yarn add -D stylelint-taro从 package.json 可以看到该包要求 Node.js 18并以stylelint^16作为 peerDependency即使用前需要确保项目中已经安装 Stylelint 16 及以上版本。包同时提供dist/index.cjs.jsCommonJS与dist/index.esm.jsESM两种构建产物供不同模块体系的项目引入。快速上手使用 mergeConfig 合并多端规则项目根目录创建.stylelintrc.js// .stylelintrc.js const mergeConfig require(stylelint-taro/lib/config) // 合并配置填写需要适配的端h5, miniprogram, harmony, rn module.exports mergeConfig([h5, miniprogram, harmony], { // 自定义样式规范: 支持sass的语言规范 // customSyntax: postcss-scss // 自定义Stylelint配置 rules: {}, })mergeConfig接收两个参数参数类型说明platforms(h5 \| miniprogram \| harmony \| rn)[]需要适配的端列表决定最终生效的样式约束集合stylelintConfigstylelint.Config自定义 Stylelint 配置会与平台规则合并其中rules优先级高于平台默认规则mergeConfig 的底层逻辑从源码 src/config.ts 可以看清mergeConfig做的事注入平台环境变量将平台列表写入process.env.__PLATFORMS__供规则在运行时感知当前适配范围插件合并把 h5 / miniprogram / harmony / rn 各平台配置中声明的plugins与用户自定义的plugins合并因此平台默认会注册stylelint-taro自身规则合并各平台规则通过taroRules(platforms)合并为规则集合随后与用户自定义rules展开合并用户的配置可以覆盖平台默认行为统一告警级别所有由平台生成的规则统一附加{ severity: warning }见 src/config.ts即不阻断构建仅给出样式风险提示。多端规则合并采用取交集策略mergeRule见 src/config.ts当多个平台对同一规则给出数组形式的允许列表时使用_.intersection取公共部分对布尔型规则取并集。这意味着声明的端越多样式约束越严格——最终校验的是所有目标端都支持的公共样式子集。内置 Rule 详解stylelint-taro 注册了 3 条命名空间为taro/的规则注册入口见 src/index.ts规则清单见 src/rules/index.ts规则作用taro/no-nested-selectors仅允许使用单个 class 选择器taro/property-allowed-list允许使用的属性列表按平台分别约束taro/declaration-property-value-allowed-list允许的属性及其对应取值taro/no-nested-selectors仅能使用单类选择器// .stylelintrc.js module.exports mergeConfig([harmony], {})/* 通过检查 */ ✅ .hello { /* ... */ } /* 警告提示harmony平台仅能使用单类选择器 */ ❌ #a { } ❌ .a .b { } ❌ #a .b { } ❌ .a .b { } ❌ .a .b { } ❌ .a ~ .b { }该规则通过正则/^[.#]?[a-zA-Z0-9_-]$/判定选择器是否仅由单个类或 id名称构成任何包含组合器、空格嵌套、伪类的写法都会触发告警实现见 src/rules/no-nested-selectors/index.ts。对应测试用例src/rules/no-nested-selectors/tests/index.spec.ts覆盖了.a .b、#a .b、.a.b、.a.b、.a~.b等拒绝场景以及.app的通过场景告警消息为${selector} 仅能使用单个class选择器受限端 harmony, rn。从源码看该规则实际面向 harmony 与 rn 两个受限端规则内platform [harmony, rn]这也与 harmony 平台配置中的disAllowedSelectors约束一致selector-max-id: 0、selector-max-type: 0、selector-max-attribute: 0、selector-max-universal: 0见 src/platform/harmony.ts。taro/property-allowed-list允许的属性列表该规则按平台分别声明允许使用的 CSS 属性。启用 harmony rn 后平台配置会自动注入对应的允许属性集合见 src/config.ts仅当平台列表中包含 harmony 或 rn 时才启用属性类校验。例如 harmony 平台在 src/platform/harmony.ts 中声明了 margin、padding、width、height、border、background 系列、font 系列、flex 布局系列、position、transform 等属性未在列表中的属性如float、grid等会被提示。taro/declaration-property-value-allowed-list允许的属性及取值允许针对每个平台为属性指定合法取值值可以是布尔true表示接受该属性的所有合法值、字符串枚举或正则{ plugins: [stylelint-taro] rules: { taro/declaration-property-value-allowed-list: { harmony: { color: true, // 支持color属性及所有合法值 text-align: [left, right], // 仅支持left、right 2个值 height: [/^-?\d(\.\d)?(px|vw|vh|%)?$/i] // 支持匹配height为length }, rn: { text-align: [left, center], // 仅支持left、center 2个值 } } } }平台配置中的supportedProperties就是该规则的数据来源其中的true、字符串数组与正则分别对应上述三种取值约束形式。底层使用的正则常量集中在 src/platform/constrant.tsLENGTH_REGEX /^-?\d(\.\d)?(px|rem|vw|vh|%)?$/i单一长度值LENGTH_REGEX_SPLIT支持以空格分隔的多段长度值如 margin 的四个方向NUMBER /^-?\d(\.\d)?$/数值BACKGROUND_IMAGE /(url\(|linear-gradient\()/背景图片资源或线性渐变。多端取值取交集的实际效果同时支持 rn 与 harmony 时// .stylelintrc.js module.exports mergeConfig([harmony, rn], {})/* 通过检查 */ ✅ .hello { text-align: left; } /* 警告提示 */ ❌ .hello2 { /* rn平台的text-align属性暂不支持right */ text-align: right; }原因在于harmony 的text-align支持[center, left, right]而 rn 侧supportedProperties为空对象见 src/platform/rn.ts通过 rn 平台通用规则与实际渲染能力约束后right不在交集内因而触发 warning。这正是多端融合校验的价值在开发阶段即可发现某个取值在某一端不生效的隐患。开启 VS Code 校验项目空间内建议通过修改.vscode/settings.json开启编辑器内联校验// .vscode/settings.json { stylelint.enable: true, stylelint.validate: [css, sass, scss, less, postcss] }配合customSyntax: postcss-scss在mergeConfig的第二个参数中传入即可让 SCSS/Less 等预处理器样式也享受同样的多端校验。样式支持情况值类型类型举例合法值备注Length10px、10vw、10vh、100%、10rem、calc(100% - 20px)1rem 16pxColor#f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green暂不支持 hsl 等方法Border1px solid #f00符合 w3c 规范通用属性以下为所有元素都支持的样式属性✔️ 表示支持❌ 表示当前不支持属性可选值 / 单位支持情况flexflexGrow flexShrink flexBasis✔️flex-growNumber✔️flex-shrinkNumber✔️flex-basisLength✔️flex-directionrow,row-reverse,column,column-reverse✔️justify-contentflex-start, flex-end, center, space-between, space-around, space-evenly✔️align-contentflex-start, flex-end, center, space-between, space-around, space-evenly✔️align-itemsflex-start, flex-end, center, baseline, stretch , auto✔️align-selfflex-start, flex-end, center, baseline, stretch , auto✔️flex-wrapnowrap, wrap, wrap-reverse❌positionrelative, absolute✔️leftLength✔️topLength❌rightLength❌z-indexNumber✔️bottomLength✔️marginLength \ Length Length \ Length Length Length \ Length Length Length Length✔️margin-topLength✔️margin-rightLength✔️margin-bottomLength✔️margin-leftLength✔️paddingLength \ Length Length \ Length Length Length \ Length Length Length Length✔️padding-topLength✔️padding-rightLength✔️padding-bottomLength✔️padding-leftLength✔️widthLength✔️heightLength✔️min-heightLength✔️min-widthLength✔️max-heightLength✔️max-widthLength✔️background✔️background-colorColor✔️background-imagesrc(xxx), linear-gradient(xxx) 支持图片资源和线性渐变✔️background-sizecover, contain, Length(x y), Length(x) Length(y)✔️background-positioncenter, top, bottom, left, right, Length(x y), Length(x) Length(y)✔️background-repeatrepeat, no-repeat, repeat-x, repeat-y✔️borderBorder可设置 4 个值控制 4 个方向✔️border-topBorder✔️border-leftBorder✔️border-rightBorder✔️border-bottomBorder✔️border-colorColor可设置 4 个值控制 4 个方向✔️border-top-colorColor✔️border-right-colorColor✔️border-bottom-colorColor✔️border-left-colorColor✔️border-radiusLength可设置 4 个值控制 4 个方向✔️border-top-left-radiusLength✔️border-top-right-radiusLength✔️border-bottom-left-radiusLength✔️border-bottom-right-radiusLength✔️border-styledotted, dashed, solid 4 个值控制 4 个方向✔️border-top-styledotted, dashed, solid✔️border-right-styledotted, dashed, solid✔️border-bottom-styledotted, dashed, solid✔️border-left-styledotted, dashed, solid✔️opacityNumber✔️displayflex, none, block✔️displayinline-block, inline-flex, inline❌overflowhidden, visible✔️transformtranslate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d✔️transform-originLength Length✔️content✔️⚠️ 注意transform不允许连续出现 2 个同类型如transform: translate(20px 20px) translate3d(10px, 30px, 30px)不合法display不支持行内取值inline / inline-block / inline-flex定位不支持bottom和right对照 harmony 平台配置src/platform/harmony.ts 中仅声明了top与leftposition可选值为absolute | relative | fixed。上表描述的是一般意义上的支持边界实际校验时以mergeConfig声明的平台对应的 harmony.ts 与 rn.ts 等平台配置为准并取多端交集因此不同平台组合下同一属性/取值的最终可用性可能更严格。文本样式属性可选值 / 单位支持情况font-sizeLength✔️font-family✔️font-stylenormal, italic✔️font-weight100~900, bold,bolder,light,lighter,normal✔️line-heightXXpx (需要指定具体指不支持 Number)✔️text-aligncenter, left, right✔️text-decoration(none, underline, line-through, overline) Color✔️text-overflowellipsis, clip✔️colorColor✔️-webkit-line-clampNumber✔️⚠️ 注意文本样式仅对Text/Text节点生效文本样式不支持继承line-height不支持数值即必须写成带单位的长度值如line-height: 20px。以下两种情况是正确的对文本进行样式添加的案例直接将样式添加在Text/上// ✅ 允许 Text classNametxthello/Text样式添加到View/下是一个文本内容// ✅ 允许 View classNametxthello/View错误案例// ❌ hello 父级没有添加文本样式txt的文本属性无法继承下去 View classNametxt Texthello/Text /ViewCSS 选择器通用选择器注意点支持类选择器不支持ID 选择器、标签选择器、属性选择器。选择器示例示例说明支持情况.class.intro选择所有 classintro 的元素✔️.class.class.red.big选择所有 classred big 元素✔️.class, .class.item, .text选择所有 classitem 元素和 classtext 元素✔️.class .class.grandfather .child选择所有 classgrandfather 内所有的 classchild 的元素✔️.class .class.parent .child选择所有父级是 classparent 的 classchild 元素✔️.class.class.red.big选择所有紧跟在 classred 元素之后的第一个 classbig 元素❌.class~.class.red~.big选择所有紧跟在 classred 之后的每一个 classbig 元素❌#id#firstname选择所有 idfirstname 的元素❌**选择所有元素❌elementp选择所有p元素❌[attribute][target]选择所有带有 target 属性元素❌[attributevalue][targetblank]选择所有使用 targetblank 的元素❌...其他❌伪类支持before、after。选择器示例示例说明支持情况:before.intro:before在每个 classintro 元素之前插入内容✔️:after.intro:after在每个 classintro 元素之后插入内容✔️:nth-child().intro:nth-child(2)选择 classintro 元素是其父级的第二个子元素❌:nth-last-child().intro:nth-last-child(2)选择 classintro 元素是其父级的第二个子元素, 从最后一个子项计数❌:first-child.intro:first-child选择 classintro 元素是其父级的第一个子级❌:last-child.intro:last-child选择 classintro 元素是其父级的最后一个子级❌:root:root选择文档的根元素❌:checkedinput:checked选择每个选中的输入元素❌...其他❌选择器层面的约束在平台配置中同样有据可查harmony 平台通过selector-max-id、selector-max-type、selector-max-attribute、selector-max-universal四条内建规则将 id/类型/属性/通配选择器数量上限设为 0并通过selector-pseudo-class-allowed-list: [before, after]限定伪类、selector-combinator-allowed-list: [, ]限定组合器rn 平台则额外设置了selector-max-combinators: 0完全禁止组合器见 src/platform/rn.ts并允许export、root两个伪类。这些约束叠加后代码中应尽量以单类选择器 before/after 伪类的方式编写跨端样式。平台默认规则速查mergeConfig在生成规则时还会附带各平台的通用 Stylelint 规则覆盖于用户rules之下值得在排障时留意harmonysrc/platform/harmony.ts禁止 vendor 前缀属性与取值color-named: never禁止命名颜色应使用#f00、rgb()等允许的单位为px, deg, %, vh, vw, s, rem禁止min / max / clamp等函数禁止规则。rnsrc/platform/rn.ts同样禁止 vendor 前缀允许的单位为px, rem, deg, %, vh, vw, vmin, vmax, srn 额外支持 vmin/vmaxdeclaration-no-important: true禁止!important。理解了这些默认约束即可在自定义rules中按需放行或收紧将 stylelint-taro 无缝嵌入 Taro 多端项目的日常样式开发流程。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
