样式问题汇总

[yacheng]

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Feature request

2. Describe your issue:

• 目前rpx、px转换vw正常，但rem转换会有计算错误，em和%转换正常
• 修复自定义属性的使用
• 部分选择器不符合W3C标准，比如 通配符选择器、标签选择器、伪类选择器和ID选择器等
• 组合选择器不生效
• 类名的命名有一定的要求，只有B__E或B__M_M方式能适合
• 无全局className和自定义属性，不支持className覆盖
• 在一旦脚手架中，使用style引用外部样式文件中的类，不生效，会报相应的错误信息

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodePen
   .

[wssgcg1213]

按规则 rem 不参与计算

[yuanyan]

1.0 rem 已经是对齐 web 标准了，不会按 750 计算

[yacheng]

• 1、style-unit： rem 转换会有计算错误 与 对内联样式和样式表文件中样式单位转换逻辑不一致 #1319 问题计划本周对 style-unit 升级大版本进行修复
• 2、自定义属性问题，已修复 PR feat: driver-universal support CSS custom properties #1335
• 3、stylesheet-loader： 纯 web 应用不做限制，近期支持

[xcodebuild]

.container {
  .title {
    color: red;
  }
}

<View className="container">
   <View className="title"></View>
</View>

是否考虑在静态分析层面实现这种父子组合选择器，这块目前的书写体验和 Web 的差距比较大

[yacheng]

与纯 web 样式对标使用方式

工程插件版本

• rax-script 2.0.0
• rax-plugin-app 0.1.18

build.json 配置开启不转成行内样式开关

{
  "inlineStyle": false,
  "plugins": [
  	["rax-plugin-app", { "targets": ["web"] }]
  ]
}

样式使用示例

import {createElement, useState} from 'rax';
import View from 'rax-view';
import './index.css';
import style from './inline.js';

export default (props) => {
  return (
  	<View className={'list'}>
    	<div className={'item red'}> Hello List</div>
    	<View className={'item'}>item1</View>
    	<View className={'item green'}>item2 (className item & green)</View>
    	<View className={'item'}>item3</View>
    	<View id="yellow" className={'item'}>item4 (id is yellow)</View>
    	<View className={'item'}>item5</View>
    	<p className={'item'}>item6 (this is p)</p>
    	<View style={style.inlineItem}>item7 (inline style)</View>
    </View>
  );
};

样式示例

body {
	padding: 0;
	margin: 0;
}
.list {
	background-color: #efefef;
	padding: 10px;
}
.item {
	background-color: blue;
	margin-bottom: 5px;
	padding: 5px;
	color: #fff;
}
.list .green {
	background-color: green;
}
.red {
	background-color: red;
}
#yellow {
	background-color: yellow;
	color: #333;
}
p {
	margin: 0;
	padding: 5px;
	background-color: #333 !important;
	color: #fff !important;
}

预览效果

[yacheng]

已和需求方验收确认