@tarojs/parse-css-to-stylesheet v1.1.8

parse-css-to-stylesheet

简介

对 CSS 代码进行解析编码处理，应用于 React Native 、鸿蒙等不支持 CSS 写法的场景

使用方式

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

// Harmony
const { code } = parse([cssCode1, cssCode2, ...], {
  platformString: 'Harmony',
  designWidth: 750
})
// code: CSS 代码 string

参数说明

export interface OutputOptions {
  isBin?: boolean
}
export interface ParseOptions {
  platformString: string  // 平台 Harmony
  output?: OutputOptions
}
export interface ParseResult {
  code?: string
  buffer?: Buffer
}

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

ParseOptions

ParseResult

样式支持情况

通用属性

所有元素都支持的样式：

⚠️ 注意：

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

文本样式

⚠️ 注意：

• 文本样式 仅对<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 选择器、标签选择器、属性选择器

伪元素 / 伪类

• 支持before、after，

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>
  );
}