1.1.18 • Published 24 days ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
24 days ago

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

配置参数类型可选值说明
platformStringString'Harmony'、'ReactNative'平台
outputObject{ isBin: false }输出格式

ParseResult

配置参数类型说明
codeString经过样式解析后的样式代码
bufferBuffer经过样式解析后的二进制

样式支持情况

类型举例合法值备注
Length10px、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-growNumber✔️
flex-shrinkNumber✔️
flex-basisLength✔️
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'✔️
leftLength✔️
topLength✔️
bottomLength
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-image"src('xxx')", "linear-gradient(xxx)", "radial-gradient(xxx)" 支持图片资源和性渐变✔️
background-size'cover', 'contain', Length(x y), Length(x) Length(y)✔️
background-positioncenter', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y)✔️
background-repeat'repeat', '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-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'✔️
opacityNumber✔️
display'flex', 'none', 'block'✔️
display'inline-block', 'inline-flex', 'inline'
overflow'hidden', 'visible', 'scroll', 'auto'✔️
transformtranslate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d✔️
transform-originLength(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
    • \不支持, 如(closest-side、closest-corner、farthest-side、farthest-corner)
  • display 不支持 行内
  • 定位不支持 bottomright

文本样式

属性可选值 / 单位支持情况
font-sizeLength✔️
font-family✔️
font-style'normal', 'italic'✔️
font-weight100~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'✔️
colorColor✔️
-webkit-line-clampNumber✔️

⚠️ 注意:

  • 文本样式 仅对<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"的元素
**选择所有元素不支持
elementp选择所有\元素
[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" 元素并且其没有子级✔️
:checkedinput: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>
  );
}
1.1.9

3 months ago

1.1.12

3 months ago

1.1.11

3 months ago

1.1.10

3 months ago

1.1.16

2 months ago

1.1.15

2 months ago

1.1.14

2 months ago

1.1.13

2 months ago

1.1.18

24 days ago

1.1.17

1 month ago

1.1.8

4 months ago

1.1.7

4 months ago

1.1.6

4 months ago

1.1.5

5 months ago

1.1.3

5 months ago

1.1.2

6 months ago

1.1.1

6 months ago

1.1.0

7 months ago

1.0.22

9 months ago

1.0.19

11 months ago

1.0.18

11 months ago

1.0.1

1 year ago

1.0.17

11 months ago

1.0.0

1 year ago

1.0.16

11 months ago

1.0.9

12 months ago

1.0.8

12 months ago

1.0.7

12 months ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.20

11 months ago

1.0.11

12 months ago

1.0.10

12 months ago

1.0.13

12 months ago

1.0.12

12 months ago

0.0.68

1 year ago

0.0.69

1 year ago

0.0.64

1 year ago

0.0.66

1 year ago

0.0.67

1 year ago

0.0.63

1 year ago

0.0.60

1 year ago

0.0.59

1 year ago

0.0.58

1 year ago

0.0.57

1 year ago

0.0.56

1 year ago

0.0.55

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.52

1 year ago

0.0.51

1 year ago

0.0.50

1 year ago

0.0.49

1 year ago

0.0.48

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.44

1 year ago

0.0.45

1 year ago

0.0.43

1 year ago

0.0.42

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.36

1 year ago

0.0.35

1 year ago

0.0.34

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.31

1 year ago

0.0.30

2 years ago

0.0.29

2 years ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago