Skip to content

Commit b826649

Browse files
devongovettdevongovett
committed
Add/remove prefixes for gradients
1 parent 723d6c8 commit b826649

File tree

7 files changed

+636
-9
lines changed

7 files changed

+636
-9
lines changed

‎build-prefixes.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ const BROWSER_MAPPING = {
1616
};
1717

1818
let flexSpec = {};
19+
let oldGradient = {};
1920
let p = new Map();
2021
for (let prop in prefixes) {
2122
let browserMap = {};
2223
for (let b of prefixes[prop].browsers) {
23-
let [name, version, flex_spec] = b.split(' ');
24+
let [name, version, variant] = b.split(' ');
2425
if (BROWSER_MAPPING[name] === null) {
2526
continue;
2627
}
@@ -44,8 +45,7 @@ for (let prop in prefixes) {
4445
}
4546
}
4647

47-
if (flex_spec === '2009') {
48-
// console.log(prop, name, version, flex_spec);
48+
if (variant === '2009') {
4949
if (flexSpec[name] == null) {
5050
flexSpec[name] = [v, v];
5151
} else {
@@ -57,6 +57,18 @@ for (let prop in prefixes) {
5757
flexSpec[name][1] = v;
5858
}
5959
}
60+
} else if (variant === 'old' && prop.includes('gradient')) {
61+
if (oldGradient[name] == null) {
62+
oldGradient[name] = [v, v];
63+
} else {
64+
if (v < oldGradient[name][0]) {
65+
oldGradient[name][0] = v;
66+
}
67+
68+
if (v > oldGradient[name][1]) {
69+
oldGradient[name][1] = v;
70+
}
71+
}
6072
}
6173
}
6274
// p[prop] = browserMap;
@@ -133,6 +145,17 @@ pub fn is_flex_2009(browsers: Browsers) -> bool {
133145
}).join('\n ')}
134146
false
135147
}
148+
149+
pub fn is_webkit_gradient(browsers: Browsers) -> bool {
150+
${Object.entries(oldGradient).map(([name, [min, max]]) => {
151+
return `if let Some(version) = browsers.${name} {
152+
if version >= ${min} && version <= ${max} {
153+
return true;
154+
}
155+
}`;
156+
}).join('\n ')}
157+
false
158+
}
136159
`;
137160

138161
fs.writeFileSync('src/properties/prefixes.rs', s);

‎playground/playground.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ async function update() {
1717
filename: 'test.css',
1818
code: enc.encode(source.value),
1919
minify: minify.checked,
20-
targets
20+
targets: Object.keys(targets).length === 0 ? null : targets
2121
});
2222

2323
compiled.value = res;

‎src/declaration.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ impl DeclarationHandler {
6565
pub fn new(important: bool, targets: Option<Browsers>) -> Self {
6666
DeclarationHandler {
6767
important,
68+
background: BackgroundHandler::new(targets),
6869
border: BorderHandler::new(targets),
6970
flex: FlexHandler::new(targets),
7071
align: AlignHandler::new(targets),

‎src/lib.rs‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3344,6 +3344,279 @@ mod tests {
33443344
".foo { background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%) }",
33453345
".foo{background:repeating-conic-gradient(#000 0deg 25%,#fff 0deg 50%)}"
33463346
);
3347+
3348+
test(
3349+
r#"
3350+
.foo {
3351+
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
3352+
background: -webkit-linear-gradient(red, blue);
3353+
background: -moz-linear-gradient(red, blue);
3354+
background: -o-linear-gradient(red, blue);
3355+
background: linear-gradient(red, blue);
3356+
}
3357+
"#,
3358+
indoc! {r#"
3359+
.foo {
3360+
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#00f));
3361+
background: -webkit-linear-gradient(red, #00f);
3362+
background: -moz-linear-gradient(red, #00f);
3363+
background: -o-linear-gradient(red, #00f);
3364+
background: linear-gradient(red, #00f);
3365+
}
3366+
"#}
3367+
);
3368+
3369+
prefix_test(
3370+
r#"
3371+
.foo {
3372+
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
3373+
background: -webkit-linear-gradient(red, blue);
3374+
background: -moz-linear-gradient(red, blue);
3375+
background: -o-linear-gradient(red, blue);
3376+
background: linear-gradient(red, blue);
3377+
}
3378+
"#,
3379+
indoc! {r#"
3380+
.foo {
3381+
background: linear-gradient(red, #00f);
3382+
}
3383+
"#},
3384+
Browsers {
3385+
chrome: Some(95 << 16),
3386+
..Browsers::default()
3387+
}
3388+
);
3389+
prefix_test(
3390+
r#"
3391+
.foo {
3392+
background-image: linear-gradient(red, blue);
3393+
}
3394+
"#,
3395+
indoc! {r#"
3396+
.foo {
3397+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(#00f));
3398+
background-image: -webkit-linear-gradient(red, #00f);
3399+
background-image: linear-gradient(red, #00f);
3400+
}
3401+
"#},
3402+
Browsers {
3403+
chrome: Some(8 << 16),
3404+
..Browsers::default()
3405+
}
3406+
);
3407+
prefix_test(
3408+
r#"
3409+
.foo {
3410+
background-image: linear-gradient(to right, red, blue);
3411+
}
3412+
"#,
3413+
indoc! {r#"
3414+
.foo {
3415+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(#00f));
3416+
background-image: -webkit-linear-gradient(right, red, #00f);
3417+
background-image: linear-gradient(to right, red, #00f);
3418+
}
3419+
"#},
3420+
Browsers {
3421+
chrome: Some(8 << 16),
3422+
..Browsers::default()
3423+
}
3424+
);
3425+
prefix_test(
3426+
r#"
3427+
.foo {
3428+
background-image: linear-gradient(to top, red, blue);
3429+
}
3430+
"#,
3431+
indoc! {r#"
3432+
.foo {
3433+
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(red), to(#00f));
3434+
background-image: -webkit-linear-gradient(top, red, #00f);
3435+
background-image: linear-gradient(to top, red, #00f);
3436+
}
3437+
"#},
3438+
Browsers {
3439+
chrome: Some(8 << 16),
3440+
..Browsers::default()
3441+
}
3442+
);
3443+
prefix_test(
3444+
r#"
3445+
.foo {
3446+
background-image: linear-gradient(to left, red, blue);
3447+
}
3448+
"#,
3449+
indoc! {r#"
3450+
.foo {
3451+
background-image: -webkit-gradient(linear, 100% 0, 0 0, from(red), to(#00f));
3452+
background-image: -webkit-linear-gradient(left, red, #00f);
3453+
background-image: linear-gradient(to left, red, #00f);
3454+
}
3455+
"#},
3456+
Browsers {
3457+
chrome: Some(8 << 16),
3458+
..Browsers::default()
3459+
}
3460+
);
3461+
prefix_test(
3462+
r#"
3463+
.foo {
3464+
background-image: linear-gradient(to left bottom, red, blue);
3465+
}
3466+
"#,
3467+
indoc! {r#"
3468+
.foo {
3469+
background-image: -webkit-gradient(linear, 100% 0, 0 100%, from(red), to(#00f));
3470+
background-image: -webkit-linear-gradient(bottom left, red, #00f);
3471+
background-image: linear-gradient(to bottom left, red, #00f);
3472+
}
3473+
"#},
3474+
Browsers {
3475+
chrome: Some(8 << 16),
3476+
..Browsers::default()
3477+
}
3478+
);
3479+
prefix_test(
3480+
r#"
3481+
.foo {
3482+
background-image: linear-gradient(to top right, red, blue);
3483+
}
3484+
"#,
3485+
indoc! {r#"
3486+
.foo {
3487+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, from(red), to(#00f));
3488+
background-image: -webkit-linear-gradient(top right, red, #00f);
3489+
background-image: linear-gradient(to top right, red, #00f);
3490+
}
3491+
"#},
3492+
Browsers {
3493+
chrome: Some(8 << 16),
3494+
..Browsers::default()
3495+
}
3496+
);
3497+
prefix_test(
3498+
r#"
3499+
.foo {
3500+
background-image: linear-gradient(90deg, red, blue);
3501+
}
3502+
"#,
3503+
indoc! {r#"
3504+
.foo {
3505+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(#00f));
3506+
background-image: -webkit-linear-gradient(90deg, red, #00f);
3507+
background-image: linear-gradient(90deg, red, #00f);
3508+
}
3509+
"#},
3510+
Browsers {
3511+
chrome: Some(8 << 16),
3512+
..Browsers::default()
3513+
}
3514+
);
3515+
prefix_test(
3516+
r#"
3517+
.foo {
3518+
background-image: linear-gradient(45deg, red, blue);
3519+
}
3520+
"#,
3521+
indoc! {r#"
3522+
.foo {
3523+
background-image: -webkit-linear-gradient(45deg, red, #00f);
3524+
background-image: linear-gradient(45deg, red, #00f);
3525+
}
3526+
"#},
3527+
Browsers {
3528+
chrome: Some(8 << 16),
3529+
..Browsers::default()
3530+
}
3531+
);
3532+
prefix_test(
3533+
r#"
3534+
.foo {
3535+
background-image: linear-gradient(red, blue);
3536+
}
3537+
"#,
3538+
indoc! {r#"
3539+
.foo {
3540+
background-image: -webkit-linear-gradient(red, #00f);
3541+
background-image: linear-gradient(red, #00f);
3542+
}
3543+
"#},
3544+
Browsers {
3545+
chrome: Some(10 << 16),
3546+
..Browsers::default()
3547+
}
3548+
);
3549+
prefix_test(
3550+
r#"
3551+
.foo {
3552+
background-image: radial-gradient(20px, red, blue);
3553+
}
3554+
"#,
3555+
indoc! {r#"
3556+
.foo {
3557+
background-image: -webkit-gradient(radial, center center, 0, center center, 20, from(red), to(#00f));
3558+
background-image: -webkit-radial-gradient(20px, red, #00f);
3559+
background-image: radial-gradient(20px, red, #00f);
3560+
}
3561+
"#},
3562+
Browsers {
3563+
chrome: Some(8 << 16),
3564+
..Browsers::default()
3565+
}
3566+
);
3567+
prefix_test(
3568+
r#"
3569+
.foo {
3570+
background-image: radial-gradient(20px at top left, red, blue);
3571+
}
3572+
"#,
3573+
indoc! {r#"
3574+
.foo {
3575+
background-image: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
3576+
background-image: -webkit-radial-gradient(20px at left top, red, #00f);
3577+
background-image: radial-gradient(20px at left top, red, #00f);
3578+
}
3579+
"#},
3580+
Browsers {
3581+
chrome: Some(8 << 16),
3582+
..Browsers::default()
3583+
}
3584+
);
3585+
prefix_test(
3586+
r#"
3587+
.foo {
3588+
background-image: radial-gradient(red, blue);
3589+
}
3590+
"#,
3591+
indoc! {r#"
3592+
.foo {
3593+
background-image: -webkit-radial-gradient(red, #00f);
3594+
background-image: radial-gradient(red, #00f);
3595+
}
3596+
"#},
3597+
Browsers {
3598+
chrome: Some(8 << 16),
3599+
..Browsers::default()
3600+
}
3601+
);
3602+
prefix_test(
3603+
r#"
3604+
.foo {
3605+
background-image: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
3606+
background-image: -webkit-radial-gradient(20px at left top, red, #00f);
3607+
background-image: radial-gradient(20px at left top, red, #00f);
3608+
}
3609+
"#,
3610+
indoc! {r#"
3611+
.foo {
3612+
background-image: radial-gradient(20px at left top, red, #00f);
3613+
}
3614+
"#},
3615+
Browsers {
3616+
chrome: Some(30 << 16),
3617+
..Browsers::default()
3618+
}
3619+
);
33473620
}
33483621

33493622
#[test]

0 commit comments

Comments
 (0)