Skip to content

Commit 1962ab3

Browse files
heiazuheiazu
committed
feat: 支径向渐变
1 parent 39a4fab commit 1962ab3

File tree

15 files changed

+301
-54
lines changed

15 files changed

+301
-54
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function parse(
107107
| max-width | Length | ✔️ |
108108
| background | | ✔️ |
109109
| background-color | Color | ✔️ |
110-
| background-image | "src('xxx')", "linear-gradient(xxx)" 支持图片资源和线性渐变 | ✔️ |
110+
| background-image | "src('xxx')", "linear-gradient(xxx)", "radial-gradient(xxx)" 支持图片资源和性渐变 | ✔️ |
111111
| background-size | 'cover', 'contain', Length(x y), Length(x) Length(y) | ✔️ |
112112
| background-position | center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y) | ✔️ |
113113
| background-repeat | 'repeat', 'no-repeat', 'repeat-x', 'repeat-y' | ✔️ |
@@ -143,6 +143,8 @@ export function parse(
143143
⚠️ 注意：
144144

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

‎__test__/fixure/pesudo.jsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,5 @@ import { View, Text } from '@tarojs/components'
22
import './pesudo.scss'
33

44
export default function Pesudo() {
5-
6-
return <>
7-
<View style={{width: '100px'}}></View>
8-
<View style={{width: `${'100px'}`}}></View>
9-
<View style={{width: `${'100px'}`, height: '100px'}}></View>
10-
<View className='a'></View>
11-
<View className={'a' + 1}></View>
12-
<View style={{width: '100px'}} className='a'></View>
13-
<View style={{width: `${'100px'}`}} className='a'></View>
14-
<View style={{width: `${'100px'}`, height: '100px'}} className='a'></View>
15-
</>
5+
return <View className='container'></View>
166
}

‎__test__/fixure/pesudo.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
.container {
2-
height: 200px;
3-
width: 200px;
2+
background-image: radial-gradient(#fff, #000, #00f);
43
}

‎__test__/index.spec.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,9 @@ test('Harmony attrbute test background-image', t => {
335335
.linear-gradient {
336336
background-image: linear-gradient(to right, #f00, #00f);
337337
}
338+
.radial-gradient {
339+
background-image: radial-gradient(30px at center, #fff, #000);
340+
}
338341
`], {
339342
platformString: 'Harmony'
340343
})

‎__test__/index.spec.mjs.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -541,16 +541,36 @@ Generated by [AVA](https://avajs.dev).
541541
colors: [␊
542542
[␊
543543
"#FF0000",␊
544-
"0"␊
544+
0␊
545545
],␊
546546
[␊
547547
"#00f",␊
548-
"0"␊
548+
1␊
549549
]␊
550550
],␊
551551
direction: GradientDirection["Right"]␊
552552
}␊
553553
},␊
554+
"radial-gradient": {␊
555+
backgroundImage: {␊
556+
colors: [␊
557+
[␊
558+
"#fff",␊
559+
0␊
560+
],␊
561+
[␊
562+
"#000",␊
563+
1␊
564+
]␊
565+
],␊
566+
center: [␊
567+
"50%",␊
568+
"50%"␊
569+
],␊
570+
radius: convertNumber2VP(30),␊
571+
repeating: false␊
572+
}␊
573+
},␊
554574
"url": {␊
555575
backgroundImage: {␊
556576
src: "https://www.baidu.com"␊

‎__test__/index.spec.mjs.snap‎

62 Bytes
Binary file not shown.

‎__test__/selector.spec.mjs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,3 +248,26 @@ test('Harmony selector .item:first-child .item:last-child .item.nth-child(2n-1)'
248248
t.snapshot(code)
249249
})
250250

251+
test('Harmony selector style', t => {
252+
const { code } = parse(`
253+
import { View, Text } from '@tarojs/components'
254+
import './pesudo.scss'
255+
export default function Pesudo() {
256+
return <>
257+
<View style={{width: '100px'}}></View>
258+
<View style={{width: \`${'100px'}\`}}></View>
259+
<View style={{width: \`${'100px'}\`, height: '100px'}}></View>
260+
<View className='a'></View>
261+
<View className={'a' + 1}></View>
262+
<View style={{width: '100px'}} className='a'></View>
263+
<View style={{width: \`${'100px'}\`}} className='a'></View>
264+
<View style={{width: \`${'100px'}\`, height: '100px'}} className='a'></View>
265+
</>
266+
}
267+
`, [``], {
268+
platformString: 'Harmony'
269+
})
270+
t.snapshot(code)
271+
})
272+
273+

‎__test__/selector.spec.mjs.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,3 +388,53 @@ Generated by [AVA](https://avajs.dev).
388388
};␊
389389
export default Index;␊
390390
`
391+
392+
## Harmony selector style
393+
394+
> Snapshot 1
395+
396+
`import { View } from '@tarojs/components';␊
397+
import './pesudo.scss';␊
398+
import { calcStaticStyle, convertNumber2VP, __combine_nesting_style__, __var_fn, globalCss } from "@tarojs/runtime";␊
399+
let __inner_style_data__;␊
400+
function __inner_style__() {␊
401+
if (__inner_style_data__) return __inner_style_data__;␊
402+
__inner_style_data__ = {};␊
403+
return __inner_style_data__;␊
404+
}␊
405+
export default function Pesudo() {␊
406+
return __combine_nesting_style__(<>␊
407+
␊
408+
<View style={{␊
409+
width: '100px'␊
410+
}}></View>␊
411+
␊
412+
<View style={{␊
413+
width: \`100px\`␊
414+
}}></View>␊
415+
␊
416+
<View style={{␊
417+
width: \`100px\`,␊
418+
height: '100px'␊
419+
}}></View>␊
420+
␊
421+
<View __hmStyle={calcStaticStyle(__inner_style__(), 'a')} className='a'></View>␊
422+
␊
423+
<View __hmStyle={calcStaticStyle(__inner_style__(), 'a' + 1)} className={'a' + 1}></View>␊
424+
␊
425+
<View __hmStyle={calcStaticStyle(__inner_style__(), 'a')} style={{␊
426+
width: '100px'␊
427+
}} className='a'></View>␊
428+
␊
429+
<View __hmStyle={calcStaticStyle(__inner_style__(), 'a')} style={{␊
430+
width: \`100px\`␊
431+
}} className='a'></View>␊
432+
␊
433+
<View __hmStyle={calcStaticStyle(__inner_style__(), 'a')} style={{␊
434+
width: \`100px\`,␊
435+
height: '100px'␊
436+
}} className='a'></View>␊
437+
␊
438+
</>, null);␊
439+
}␊
440+
`

‎__test__/selector.spec.mjs.snap‎

128 Bytes
Binary file not shown.

‎src/style_propetries/background_image.rs‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ use lightningcss::{
33
angle::Angle,
44
gradient::{ Gradient, GradientItem, LineDirection},
55
image::Image,
6-
length::LengthValue,
7-
percentage::DimensionPercentage,
6+
percentage::{DimensionPercentage, Percentage},
87
position::{HorizontalPositionKeyword, VerticalPositionKeyword},
98
}
109
};
@@ -13,9 +12,9 @@ use smallvec::SmallVec;
1312
use swc_core::ecma::ast::*;
1413
use swc_core::common::DUMMY_SP;
1514

16-
use crate::generate_invalid_expr;
15+
use crate::{generate_expr_lit_num, generate_expr_lit_str, generate_invalid_expr};
1716

18-
use super::{graident_properties::linear_gradient::{LinearGradientDirection, LinearGradientItem}, traits::ToExpr, unit::{convert_color_keywords_to_hex, PropertyTuple}};
17+
use super::{graident_properties::{linear_gradient::{LinearGradientDirection, LinearGradientItem}, radial_gradient::{RadialGradientItem, RadialGradientPoint}}, traits::ToExpr, unit::{convert_color_keywords_to_hex, PropertyTuple}};
1918

2019
pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind> {
2120
match image {
@@ -26,15 +25,18 @@ pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind>
2625
match &**gradient {
2726
Gradient::Linear(gradient) => {
2827
let mut color_stops = vec![];
29-
for item in &gradient.items {
28+
let mut now_percentage = 0.0;
29+
let colors_len = gradient.items.len() - 1;
30+
for (index, item) in gradient.items.clone().into_iter().enumerate() {
3031
match item {
3132
GradientItem::ColorStop(color_stop) => {
33+
let item_pecentage = now_percentage + (((1.0 - now_percentage) / colors_len as f32) * index as f32);
3234
let color_stop_position = color_stop
3335
.position
3436
.clone()
35-
.unwrap_or(DimensionPercentage::Dimension(LengthValue::Px(0.0)));
37+
.unwrap_or(DimensionPercentage::Percentage(Percentage(item_pecentage)));
3638
color_stops.push((
37-
convert_color_keywords_to_hex(color_stop
39+
generate_expr_lit_str!(convert_color_keywords_to_hex(color_stop
3840
.color
3941
.to_css_string(PrinterOptions {
4042
minify: false,
@@ -44,15 +46,14 @@ pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind>
4446
},
4547
..PrinterOptions::default()
4648
})
47-
.unwrap()),
49+
.unwrap())),
4850
match &color_stop_position {
49-
DimensionPercentage::Dimension(length) => {
50-
length.to_css_string(PrinterOptions::default()).unwrap()
51-
}
52-
DimensionPercentage::Percentage(percentage) => percentage.0.to_string(),
53-
_ => color_stop_position
54-
.to_css_string(PrinterOptions::default())
55-
.unwrap(),
51+
DimensionPercentage::Dimension(_) => generate_expr_lit_num!(0.0),
52+
DimensionPercentage::Percentage(percentage) => {
53+
now_percentage = percentage.0;
54+
generate_expr_lit_num!(percentage.0 as f64)
55+
},
56+
DimensionPercentage::Calc(_) => generate_expr_lit_num!(0.0),
5657
},
5758
));
5859
}
@@ -117,17 +118,20 @@ pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind>
117118
},
118119
Gradient::RepeatingLinear(_) => None,
119120
Gradient::Radial(gradient) => {
120-
// Radial 话啊喂的半径需要
121+
// Radial 华为的半径需要具体的单位
121122
let mut color_stops = vec![];
122-
for item in &gradient.items {
123+
let mut now_percentage = 0.0;
124+
let colors_len = gradient.items.len() - 1;
125+
for (index, item) in gradient.items.clone().into_iter().enumerate() {
123126
match item {
124127
GradientItem::ColorStop(color_stop) => {
128+
let item_pecentage = now_percentage + (((1.0 - now_percentage) / colors_len as f32) * index as f32);
125129
let color_stop_position = color_stop
126130
.position
127131
.clone()
128-
.unwrap_or(DimensionPercentage::Dimension(LengthValue::Px(0.0)));
132+
.unwrap_or(DimensionPercentage::Percentage(Percentage(item_pecentage)));
129133
color_stops.push((
130-
convert_color_keywords_to_hex(color_stop
134+
generate_expr_lit_str!(convert_color_keywords_to_hex(color_stop
131135
.color
132136
.to_css_string(PrinterOptions {
133137
minify: false,
@@ -137,23 +141,28 @@ pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind>
137141
},
138142
..PrinterOptions::default()
139143
})
140-
.unwrap()),
144+
.unwrap())),
141145
match &color_stop_position {
142-
DimensionPercentage::Dimension(length) => {
143-
length.to_css_string(PrinterOptions::default()).unwrap()
144-
}
145-
DimensionPercentage::Percentage(percentage) => percentage.0.to_string(),
146-
_ => color_stop_position
147-
.to_css_string(PrinterOptions::default())
148-
.unwrap(),
146+
DimensionPercentage::Dimension(_) => generate_expr_lit_num!(0.0),
147+
DimensionPercentage::Percentage(percentage) => {
148+
now_percentage = percentage.0;
149+
generate_expr_lit_num!(percentage.0 as f64)
150+
},
151+
DimensionPercentage::Calc(_) => generate_expr_lit_num!(0.0),
149152
},
150153
));
151154
}
152155
_ => {}
153156
};
154157
}
155158

156-
None
159+
160+
161+
Some(BackgroundImageKind::RadialGradient(RadialGradientItem {
162+
color_stops,
163+
point: RadialGradientPoint { x: gradient.position.x.clone(), y: gradient.position.y.clone() },
164+
shape: gradient.shape.clone(),
165+
}))
157166
},
158167
Gradient::RepeatingRadial(_) => None,
159168
Gradient::Conic(_) => None,
@@ -178,7 +187,8 @@ pub fn parse_background_image(image: &SmallVec<[Image; 1]>) -> Vec<BackgroundIma
178187
#[derive(Debug, Clone)]
179188
pub enum BackgroundImageKind {
180189
String(String),
181-
LinearGradient(LinearGradientItem)
190+
LinearGradient(LinearGradientItem),
191+
RadialGradient(RadialGradientItem),
182192
}
183193

184194
#[derive(Debug, Clone)]
@@ -205,6 +215,9 @@ impl ToExpr for BackgroundImage {
205215
Some(BackgroundImageKind::LinearGradient(linear_gradient)) => {
206216
linear_gradient.to_expr()
207217
},
218+
Some(BackgroundImageKind::RadialGradient(radial_gradient)) => {
219+
radial_gradient.to_expr()
220+
},
208221
_ => generate_invalid_expr!()
209222
};
210223
PropertyTuple::One(

0 commit comments

Comments
 (0)