Skip to content

NervJS/parse-css-to-stylesheet

BranchesTags

Repository files navigation

parse-css-to-stylesheet

简介

解析 React 组件与对应的 CSS 文件，为每一个 React 节点计算样式最终样式，应用于 React Native 、鸿蒙等不支持 CSS 写法的场景

使用方式

import { parse } from '@tarojs/parse-css-to-stylesheet'

// Harmony
const { code } = parse(jsxCode, [cssCode1, cssCode2, ...], {
  platformString: 'Harmony',
  isEnableNesting: true // 支持解析嵌套选择器，默认关闭
})
// code: jsx代码 string

参数说明

export interface ParseOptions {
  platformString: string; // 平台：'Harmony'
  isEnableNesting?: boolean; // 是否支持嵌套解析
}
export interface ParseResult {
  code: string; // 输出的jsxcode
}

// 样式解析
export function parse(
  component: string,
  styles: Array<string>,
  options: ParseOptions
): ParseResult;

ParseOptions

配置参数 类型 可选值 说明
platformString String 'Harmony'、'ReactNative' 平台
isEnableNesting Boolean 样式嵌套解析开关

ParseResult

配置参数 类型 说明
code String 经过样式解析后的 JSX 代码

在 Harmony 中，编译结果会依赖@tarojs/plugin-platform-harmony-ets中提供的几个包方法：

  1. convertNumber2VP 用于运行时进行单位转换
  2. calcStaticStyle 用于合成类，匹配类名
  3. __combine_nesting_style__ 嵌套样式的合成

具体位于 Taro 主仓 路径：/taro/packages/taro-platform-harmony/src/runtime-ets 中

样式支持情况

类型 举例合法值 备注
Length 10px、10vw、10vh、100%、10rem、calc(100% - 20px) 1rem = 16px
Color #f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green 暂不支持 hsl 等方法
Border '1px solid #f00' 符合 w3c 规范

通用属性

所有元素都支持的样式：

属性 可选值 / 单位 支持情况
flex 'flexGrow', 'flexShrink', 'flexBasis' ✔️
flex-grow Number ✔️
flex-shrink Number ✔️
flex-basis Length ✔️
flex-direction 'row','row-reverse','column','column-reverse' ✔️
justify-content 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' ✔️
align-content 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' ✔️
align-items 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' ✔️
align-self 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' ✔️
flex-wrap 'nowrap', 'wrap', 'wrap-reverse' ✔️
position 'relative', 'absolute', 'fixed' ✔️
left Length ✔️
top Length ✔️
bottom Length ❌
right Length ❌
z-index Number ✔️
bottom Length ✔️
margin Length \ Length Length \ Length Length Length \ Length Length Length Length ✔️
margin-top Length ✔️
margin-right Length ✔️
margin-bottom Length ✔️
margin-left Length ✔️
padding Length \ Length Length \ Length Length Length \ Length Length Length Length ✔️
padding-top Length ✔️
padding-right Length ✔️
padding-bottom Length ✔️
padding-left Length ✔️
width Length ✔️
height Length ✔️
min-height Length ✔️
min-width Length ✔️
max-height Length ✔️
max-width Length ✔️
background ✔️
background-color Color ✔️
background-image "src('xxx')", "linear-gradient(xxx)", "radial-gradient(xxx)" 支持图片资源和性渐变 ✔️
background-size 'cover', 'contain', Length(x y), Length(x) Length(y) ✔️
background-position center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y) ✔️
background-repeat 'repeat', 'no-repeat', 'repeat-x', 'repeat-y' ✔️
border Border（可设置 4 个值，控制 4 个方向） ✔️
border-top Border ✔️
border-left Border ✔️
border-right Border ✔️
border-bottom Border ✔️
border-color Color（可设置 4 个值，控制 4 个方向） ✔️
border-top-color Color ✔️
border-right-color Color ✔️
border-bottom-color Color ✔️
border-left-color Color ✔️
border-radius Length（可设置 4 个值，控制 4 个方向）, 不支持百分比 ✔️
border-top-left-radius Length, 不支持百分比 ✔️
border-top-right-radius Length, 不支持百分比 ✔️
border-bottom-left-radius Length, 不支持百分比 ✔️
border-bottom-right-radius Length, 不支持百分比 ✔️
border-style 'dotted', 'dashed', 'solid' （4 个值，控制 4 个方向） ✔️
border-top-style 'dotted', 'dashed', 'solid' ✔️
border-right-style 'dotted', 'dashed', 'solid' ✔️
border-bottom-style 'dotted', 'dashed', 'solid' ✔️
border-left-style 'dotted', 'dashed', 'solid' ✔️
opacity Number ✔️
display 'flex', 'none', 'block' ✔️
display 'inline-block', 'inline-flex', 'inline' ❌
overflow 'hidden', 'visible', 'scroll', 'auto' ✔️
transform translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d ✔️
transform-origin Length(top/center/bottom) Length(left/center/right) ✔️
animation 仅支持 animation-name, animation-duration , animation-timing-function, animation-delay, animation-iteration-count， 暂不支持 style 设置 ✔️
box-shadow ✔️
content ✔️

⚠️ 注意：

  • transform 不允许连续出现 2 个同类型如：transform: translate(20px 20px) translate3d(10px, 30px, 30px)
  • radial-linear
    • <radial-extent>不支持, 如（closest-side、closest-corner、farthest-side、farthest-corner）
  • display 不支持 行内
  • 定位不支持 bottom 和 right

文本样式

属性 可选值 / 单位 支持情况
font-size Length ✔️
font-family ✔️
font-style 'normal', 'italic' ✔️
font-weight 100~900, 'bold','bolder','lighter','normal' ✔️
line-height 'XXpx' (需要指定具体指，不支持 Number) ✔️
text-align 'center', 'left', 'right' ✔️
text-decoration ('none', 'underline', 'line-through', 'overline') Color ✔️
text-overflow 'ellipsis', 'clip' ✔️
vertical-align 'middle', 'top', 'bottom' ✔️
color Color ✔️
-webkit-line-clamp Number ✔️

⚠️ 注意：

  • 文本样式 仅对<Text></Text>节点生效
  • 文本样式 不支持继承
  • line-height不支持数值

以下两种情况是正确的对文本进行样式添加的案例：

1.直接将样式添加在<Text/>上

// ✅ 允许
<Text className="txt">hello</Text>

2.样式添加到<View/>下是一个文本内容

// ✅ 允许
<View className="txt">hello</View>

错误案例：

// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去
<View className="txt">
  <Text>hello</Text>
</View>

CSS 选择器

通用选择器

注意点：

  • 支持类选择器，
  • 不支持ID 选择器、标签选择器、属性选择器
选择器 示例 示例说明 Harmony 备注
.class .intro 选择所有 class="intro" 的元素 ✔️
.class.class .red.big 选择所有 class="red big" 元素 ✔️
.class, .class .item, .text 选择所有 class="item" 元素和 class="text" 元素 ✔️
.class .class .grandfather .child 选择所有 class="grandfather" 内所有的 class="child" 的元素 ✔️
.class > .class .parent > .child 选择所有 父级是 class="parent"的 class="child" 元素 ✔️
.class+.class .red+.big 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 ❌ 后续支持
.class~.class .red~.big 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 ❌ 后续支持
#id #firstname 选择所有 id="firstname"的元素 ❌
* * 选择所有元素 ❌ 不支持
element p 选择所有<p>元素 ❌
[attribute] [target] 选择所有带有 target 属性元素 ❌ 不支持
[attribute=value] [target=blank] 选择所有使用 target="blank"的元素 ❌ 不支持
... 其他 ❌

伪元素 / 伪类

  • 支持before、after，
选择器 示例 示例说明 支持情况 备注
:before .intro:before 在每个 class="intro" 元素之前插入内容 ✔️
:after .intro:after 在每个 class="intro" 元素之后插入内容 ✔️
:nth-child() .intro:nth-child(2) 选择 class="intro" 元素是其父级的第二个子元素 ✔️
:first-child .intro:first-child 选择 class="intro" 元素是其父级的第一个子级 ✔️
:last-child .intro:last-child 选择 class="intro" 元素是其父级的最后一个子级 ✔️
:empty .intro:empty 选择 class="intro" 元素并且其没有子级 ✔️
:checked input:checked 选择每个选中的输入元素 ❌
... 其他 ❌

CSS 变量

⚠️：暂不支持 动态修改 Css 变量的值

:root {
  --color: #403635;
  --angle: 30deg;
  --var: var(--color, 30px);
}

.hello {
  height: 30px;
  color: var(--color);
}

常见问题

1. 跨组件传递 className、style

❌ 错误做法

比如业务上针对@tarojs/components的组件进行重导出，如引入了Image，对其进行了二次封装，然后通过一个入口统一导出如：

// ./components.js
import { View, Text } from "@tarojs/components";

// 这里的Image实际上是对TaroImage的二次封装，一样的暴露出style和classname使用
export { default as Image } from "./xxxx";
  • 在 Taro 编译的视角来看<Image/>已经是一个自定义组件，并且它接收了className，也就说明了它的类名其实是往下传递了，我们会在运行时进行样式合成
  • <View/>和<Text/>其实是原封不动的直接导出的，本质上它并不是一个自定义组件，所以 Taro 在编译时，会在编译阶段将样式赋予上去
// 注意：这里的组件从统一入口进行导入
import { View, Image } from "./components";

function Index() {
  return (
    <View className="xxx">
      <Image className="xxxxxx" />
    </View>
  );
}

但是问题来了，这里在实际使用时，<View/>和<Image/>都是通过'./components'导入，编译阶段无法知道他们是Taro 组件还是自定义组件，顾在实际运行时，都会视为自定义组件对待

因为自定义组件是在运行时动态合成样式，顾性能远不及Taro 组件

✅ 正确做法

如果 Taro 组件没有二次封装，我们建议从@tarojs/components导入，提供编译的优化效果

// 自定义组件引入
import { Image } from "./components";
// Taro组件引入
import { View } from "@tarojs/components";

function Index() {
  return (
    <View className="xxx">
      <Image className="xxxxxx" />
    </View>
  );
}

About

css转stylesheet插件，适用于鸿蒙、RN

Resources

Readme
Activity
Custom properties

Stars

18 stars

Watchers

4 watching

Forks

3 forks
Report repository

Releases 83

v1.0.22 Latest
Sep 25, 2024
+ 82 releases

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages