mirror of
https://github.com/swc-project/swc.git
synced 2024-12-24 14:16:12 +03:00
feat(css/prefixer): Prefix more properties (#4153)
This commit is contained in:
Alexander Akait
GitHub
parent
979f38b7dc
commit
46c35dab25
@ -1,3 +1,4 @@
|
||||
use core::f64::consts::PI;
|
||||
use std::mem::take;
|
||||
|
||||
use swc_atoms::JsWord;
|
||||
@ -187,12 +188,250 @@ where
|
||||
});
|
||||
}
|
||||
|
||||
pub struct LinearGradientFunctionReplacerOnLegacyVariant<'a> {
|
||||
from: &'a str,
|
||||
to: &'a str,
|
||||
}
|
||||
|
||||
// TODO ` -webkit-mask-image` need duplicate with original property for better
|
||||
// TODO improve for very old browsers https://github.com/postcss/autoprefixer/blob/main/lib/hacks/gradient.js#L233
|
||||
impl VisitMut for LinearGradientFunctionReplacerOnLegacyVariant<'_> {
|
||||
fn visit_mut_function(&mut self, n: &mut Function) {
|
||||
n.visit_mut_children_with(self);
|
||||
|
||||
if &*n.name.value.to_lowercase() == self.from {
|
||||
n.name.value = self.to.into();
|
||||
n.name.raw = self.to.into();
|
||||
|
||||
let first = n.value.get(0);
|
||||
|
||||
match first {
|
||||
Some(ComponentValue::Ident(Ident { value, .. }))
|
||||
if value.as_ref().eq_ignore_ascii_case("to") =>
|
||||
{
|
||||
fn get_old_direction(direction: &str) -> Option<&str> {
|
||||
match direction {
|
||||
"top" => Some("bottom"),
|
||||
"left" => Some("right"),
|
||||
"bottom" => Some("top"),
|
||||
"right" => Some("left"),
|
||||
_ => None,
|
||||
}
|
||||
}
|
||||
|
||||
match (n.value.get(1), n.value.get(2)) {
|
||||
(
|
||||
Some(ComponentValue::Ident(Ident {
|
||||
value: first_value,
|
||||
span: first_span,
|
||||
..
|
||||
})),
|
||||
Some(ComponentValue::Ident(Ident {
|
||||
value: second_value,
|
||||
span: second_span,
|
||||
..
|
||||
})),
|
||||
) => {
|
||||
if let (Some(new_first_direction), Some(new_second_direction)) = (
|
||||
get_old_direction(&*first_value),
|
||||
get_old_direction(&*second_value),
|
||||
) {
|
||||
let new_value = vec![
|
||||
ComponentValue::Ident(Ident {
|
||||
span: *first_span,
|
||||
value: new_first_direction.into(),
|
||||
raw: new_first_direction.into(),
|
||||
}),
|
||||
ComponentValue::Ident(Ident {
|
||||
span: *second_span,
|
||||
value: new_second_direction.into(),
|
||||
raw: new_second_direction.into(),
|
||||
}),
|
||||
];
|
||||
|
||||
n.value.splice(0..3, new_value);
|
||||
}
|
||||
}
|
||||
(Some(ComponentValue::Ident(Ident { value, span, .. })), Some(_)) => {
|
||||
if let Some(new_direction) = get_old_direction(&*value) {
|
||||
let new_value = vec![ComponentValue::Ident(Ident {
|
||||
span: *span,
|
||||
value: new_direction.into(),
|
||||
raw: new_direction.into(),
|
||||
})];
|
||||
|
||||
n.value.splice(0..2, new_value);
|
||||
}
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
Some(ComponentValue::Dimension(Dimension::Angle(Angle {
|
||||
value,
|
||||
unit,
|
||||
span,
|
||||
..
|
||||
}))) => {
|
||||
let angle = match &*unit.value {
|
||||
"deg" => (value.value % 360.0 + 360.0) % 360.0,
|
||||
"grad" => value.value * 180.0 / 200.0,
|
||||
"rad" => value.value * 180.0 / PI,
|
||||
"turn" => value.value * 360.0,
|
||||
_ => {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
if angle == 0.0 {
|
||||
n.value[0] = ComponentValue::Ident(Ident {
|
||||
span: *span,
|
||||
value: "bottom".into(),
|
||||
raw: "bottom".into(),
|
||||
});
|
||||
} else if angle == 90.0 {
|
||||
n.value[0] = ComponentValue::Ident(Ident {
|
||||
span: *span,
|
||||
value: "left".into(),
|
||||
raw: "left".into(),
|
||||
});
|
||||
} else if angle == 180.0 {
|
||||
n.value[0] = ComponentValue::Ident(Ident {
|
||||
span: *span,
|
||||
value: "top".into(),
|
||||
raw: "top".into(),
|
||||
});
|
||||
} else if angle == 270.0 {
|
||||
n.value[0] = ComponentValue::Ident(Ident {
|
||||
span: *span,
|
||||
value: "right".into(),
|
||||
raw: "right".into(),
|
||||
});
|
||||
} else {
|
||||
let new_value = ((450.0 - angle).abs() % 360.0 * 1000.0).round() / 1000.0;
|
||||
|
||||
n.value[0] = ComponentValue::Dimension(Dimension::Angle(Angle {
|
||||
span: *span,
|
||||
value: Number {
|
||||
span: value.span,
|
||||
value: new_value,
|
||||
raw: new_value.to_string().into(),
|
||||
},
|
||||
unit: Ident {
|
||||
span: unit.span,
|
||||
value: "deg".into(),
|
||||
raw: "deg".into(),
|
||||
},
|
||||
}));
|
||||
}
|
||||
}
|
||||
Some(_) | None => {}
|
||||
}
|
||||
|
||||
if matches!(self.from, "radial-gradient" | "repeating-radial-gradient") {
|
||||
let at_index = n.value.iter().position(|n| match n {
|
||||
ComponentValue::Ident(Ident { value, .. })
|
||||
if value.as_ref().eq_ignore_ascii_case("at") =>
|
||||
{
|
||||
true
|
||||
}
|
||||
_ => false,
|
||||
});
|
||||
let first_comma_index = n.value.iter().position(|n| {
|
||||
matches!(
|
||||
n,
|
||||
ComponentValue::Delimiter(Delimiter {
|
||||
value: DelimiterValue::Comma,
|
||||
..
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
if let (Some(at_index), Some(first_comma_index)) = (at_index, first_comma_index) {
|
||||
let mut new_value = vec![];
|
||||
|
||||
new_value.append(&mut n.value[at_index + 1..first_comma_index].to_vec());
|
||||
new_value.append(&mut vec![ComponentValue::Delimiter(Delimiter {
|
||||
span: DUMMY_SP,
|
||||
value: DelimiterValue::Comma,
|
||||
})]);
|
||||
new_value.append(&mut n.value[0..at_index].to_vec());
|
||||
|
||||
n.value.splice(0..first_comma_index, new_value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn replace_gradient_function_on_legacy_variant<N>(node: &mut N, from: &str, to: &str)
|
||||
where
|
||||
N: for<'aa> VisitMutWith<LinearGradientFunctionReplacerOnLegacyVariant<'aa>>,
|
||||
{
|
||||
node.visit_mut_with(&mut LinearGradientFunctionReplacerOnLegacyVariant { from, to });
|
||||
}
|
||||
|
||||
pub struct MediaFeatureResolutionReplacerOnLegacyVariant<'a> {
|
||||
from: &'a str,
|
||||
to: &'a str,
|
||||
}
|
||||
|
||||
impl VisitMut for MediaFeatureResolutionReplacerOnLegacyVariant<'_> {
|
||||
fn visit_mut_media_feature_plain(&mut self, n: &mut MediaFeaturePlain) {
|
||||
n.visit_mut_children_with(self);
|
||||
|
||||
if let MediaFeatureValue::Dimension(Dimension::Resolution(Resolution {
|
||||
span: resolution_span,
|
||||
value: resolution_value,
|
||||
unit: resolution_unit,
|
||||
})) = &n.value
|
||||
{
|
||||
let MediaFeatureName::Ident(Ident {
|
||||
value: feature_name_value,
|
||||
span: feature_name_span,
|
||||
..
|
||||
}) = &n.name;
|
||||
|
||||
if &*feature_name_value.to_lowercase() == self.from {
|
||||
n.name = MediaFeatureName::Ident(Ident {
|
||||
span: *feature_name_span,
|
||||
value: self.to.into(),
|
||||
raw: self.to.into(),
|
||||
});
|
||||
|
||||
let left = match &*resolution_unit.value.to_lowercase() {
|
||||
"dpi" => (resolution_value.value / 96.0 * 100.0).round() / 100.0,
|
||||
"dpcm" => (((resolution_value.value * 2.54) / 96.0) * 100.0).round() / 100.0,
|
||||
_ => resolution_value.value,
|
||||
};
|
||||
|
||||
n.value = MediaFeatureValue::Ratio(Ratio {
|
||||
span: *resolution_span,
|
||||
left: Number {
|
||||
span: resolution_value.span,
|
||||
value: left,
|
||||
raw: left.to_string().into(),
|
||||
},
|
||||
right: None,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn replace_media_feature_resolution_on_legacy_variant<N>(node: &mut N, from: &str, to: &str)
|
||||
where
|
||||
N: for<'aa> VisitMutWith<MediaFeatureResolutionReplacerOnLegacyVariant<'aa>>,
|
||||
{
|
||||
node.visit_mut_with(&mut MediaFeatureResolutionReplacerOnLegacyVariant { from, to });
|
||||
}
|
||||
|
||||
#[derive(Default)]
|
||||
struct Prefixer {
|
||||
in_stylesheet: bool,
|
||||
in_media_query_list: bool,
|
||||
in_keyframe_block: bool,
|
||||
added_rules: Vec<Rule>,
|
||||
in_simple_block: bool,
|
||||
added_rules: Vec<Rule>,
|
||||
added_declarations: Vec<Declaration>,
|
||||
}
|
||||
|
||||
@ -239,6 +478,64 @@ pub enum Prefix {
|
||||
}
|
||||
|
||||
impl VisitMut for Prefixer {
|
||||
// TODO handle declarations in `@media`/`@support`
|
||||
// TODO handle `@viewport`
|
||||
// TODO handle `@keyframes`
|
||||
|
||||
fn visit_mut_media_query_list(&mut self, media_query_list: &mut MediaQueryList) {
|
||||
let old_in_media_query_list = self.in_media_query_list;
|
||||
|
||||
self.in_media_query_list = true;
|
||||
|
||||
let mut new = vec![];
|
||||
|
||||
for mut n in take(&mut media_query_list.queries) {
|
||||
n.visit_mut_children_with(self);
|
||||
|
||||
let mut new_webkit_value = n.clone();
|
||||
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_webkit_value,
|
||||
"min-resolution",
|
||||
"-webkit-min-device-pixel-ratio",
|
||||
);
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_webkit_value,
|
||||
"max-resolution",
|
||||
"-webkit-max-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if n != new_webkit_value {
|
||||
new.push(new_webkit_value);
|
||||
}
|
||||
|
||||
let mut new_moz_value = n.clone();
|
||||
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_moz_value,
|
||||
"min-resolution",
|
||||
"min--moz-device-pixel-ratio",
|
||||
);
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_moz_value,
|
||||
"max-resolution",
|
||||
"max--moz-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if n != new_moz_value {
|
||||
new.push(new_moz_value);
|
||||
}
|
||||
|
||||
// TODO opera support
|
||||
|
||||
new.push(n);
|
||||
}
|
||||
|
||||
media_query_list.queries = new;
|
||||
|
||||
self.in_media_query_list = old_in_media_query_list;
|
||||
}
|
||||
|
||||
fn visit_mut_keyframe_block(&mut self, n: &mut KeyframeBlock) {
|
||||
let old_in_keyframe_block = self.in_keyframe_block;
|
||||
|
||||
@ -249,11 +546,6 @@ impl VisitMut for Prefixer {
|
||||
self.in_keyframe_block = old_in_keyframe_block;
|
||||
}
|
||||
|
||||
// TODO handle `resolution` in media/supports at-rules
|
||||
// TODO handle declarations in `@media`/`@support`
|
||||
// TODO handle `@viewport`
|
||||
// TODO handle `@keyframes`
|
||||
|
||||
fn visit_mut_qualified_rule(&mut self, n: &mut QualifiedRule) {
|
||||
n.visit_mut_children_with(self);
|
||||
|
||||
@ -441,12 +733,75 @@ impl VisitMut for Prefixer {
|
||||
"-webkit-cross-fade",
|
||||
);
|
||||
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_new_value,
|
||||
"linear-gradient",
|
||||
"-webkit-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_new_value,
|
||||
"repeating-linear-gradient",
|
||||
"-webkit-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_new_value,
|
||||
"radial-gradient",
|
||||
"-webkit-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_new_value,
|
||||
"repeating-radial-gradient",
|
||||
"-webkit-repeating-radial-gradient",
|
||||
);
|
||||
|
||||
let mut moz_new_value = n.value.clone();
|
||||
|
||||
replace_function_name(&mut moz_new_value, "element", "-moz-element");
|
||||
replace_function_name(&mut moz_new_value, "calc", "-moz-calc");
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_new_value,
|
||||
"linear-gradient",
|
||||
"-moz-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_new_value,
|
||||
"repeating-linear-gradient",
|
||||
"-moz-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_new_value,
|
||||
"radial-gradient",
|
||||
"-moz-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_new_value,
|
||||
"repeating-radial-gradient",
|
||||
"-moz-repeating-linear-gradient",
|
||||
);
|
||||
|
||||
let mut o_new_value = n.value.clone();
|
||||
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_new_value,
|
||||
"linear-gradient",
|
||||
"-o-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_new_value,
|
||||
"repeating-linear-gradient",
|
||||
"-o-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_new_value,
|
||||
"radial-gradient",
|
||||
"-o-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_new_value,
|
||||
"repeating-radial-gradient",
|
||||
"-o-repeating-radial-gradient",
|
||||
);
|
||||
|
||||
let ms_new_value = n.value.clone();
|
||||
|
||||
macro_rules! same_content {
|
||||
@ -484,7 +839,9 @@ impl VisitMut for Prefixer {
|
||||
}};
|
||||
}
|
||||
|
||||
match &*name.to_lowercase() {
|
||||
let property_name = &*name.to_lowercase();
|
||||
|
||||
match property_name {
|
||||
"appearance" => {
|
||||
same_content!(Prefix::Webkit, "-webkit-appearance");
|
||||
same_content!(Prefix::Moz, "-moz-appearance");
|
||||
@ -562,7 +919,6 @@ impl VisitMut for Prefixer {
|
||||
same_content!(Prefix::O, "-o-animation-timing-function");
|
||||
}
|
||||
|
||||
// TODO improve me https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
|
||||
"background-clip" => {
|
||||
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
|
||||
if &*value.to_lowercase() == "text" {
|
||||
@ -759,14 +1115,28 @@ impl VisitMut for Prefixer {
|
||||
same_content!(Prefix::Ms, "-ms-flex-line-pack");
|
||||
}
|
||||
|
||||
// TODO fix me https://developer.mozilla.org/en-US/docs/Web/CSS/Image-Rendering
|
||||
"image-rendering" => {
|
||||
// Fallback to nearest-neighbor algorithm
|
||||
replace_ident(
|
||||
&mut webkit_new_value,
|
||||
"pixelated",
|
||||
"-webkit-optimize-contrast",
|
||||
);
|
||||
replace_ident(
|
||||
&mut webkit_new_value,
|
||||
"crisp-edges",
|
||||
"-webkit-optimize-contrast",
|
||||
);
|
||||
|
||||
// Fallback to nearest-neighbor algorithm
|
||||
replace_ident(&mut moz_new_value, "pixelated", "-moz-crisp-edges");
|
||||
replace_ident(&mut moz_new_value, "crisp-edges", "-moz-crisp-edges");
|
||||
|
||||
replace_ident(&mut o_new_value, "pixelated", "-o-pixelated");
|
||||
|
||||
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
|
||||
if &*value.to_lowercase() == "pixelated" {
|
||||
simple!("-ms-interpolation-mode", "nearest-neighbor");
|
||||
same_name!("-webkit-optimize-contrast");
|
||||
same_name!("-moz-crisp-edges");
|
||||
same_name!("-o-pixelated");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -906,11 +1276,7 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
|
||||
"position" if n.value.len() == 1 => {
|
||||
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
|
||||
if &*value.to_lowercase() == "sticky" {
|
||||
same_name!("-webkit-sticky");
|
||||
}
|
||||
}
|
||||
replace_ident(&mut webkit_new_value, "sticky", "-webkit-sticky");
|
||||
}
|
||||
|
||||
"user-select" => {
|
||||
@ -1133,40 +1499,52 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
}
|
||||
|
||||
"width" | "min-width" | "max-width" | "height" | "min-height" | "max-height"
|
||||
| "inline-size" | "min-inline-size" | "max-inline-size" | "block-size"
|
||||
| "min-block-size" | "max-block-size"
|
||||
if n.value.len() == 1 =>
|
||||
{
|
||||
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
|
||||
match &*value.to_lowercase() {
|
||||
"fit-content" => {
|
||||
same_name!("-webkit-fit-content");
|
||||
same_name!("-moz-fit-content");
|
||||
}
|
||||
"width"
|
||||
| "min-width"
|
||||
| "max-width"
|
||||
| "height"
|
||||
| "min-height"
|
||||
| "max-height"
|
||||
| "inline-size"
|
||||
| "min-inline-size"
|
||||
| "max-inline-size"
|
||||
| "block-size"
|
||||
| "min-block-size"
|
||||
| "max-block-size"
|
||||
| "grid"
|
||||
| "grid-template"
|
||||
| "grid-template-rows"
|
||||
| "grid-template-columns"
|
||||
| "grid-auto-columns"
|
||||
| "grid-auto-rows" => {
|
||||
let is_grid_property = matches!(
|
||||
property_name,
|
||||
"grid"
|
||||
| "grid-template"
|
||||
| "grid-template-rows"
|
||||
| "grid-template-columns"
|
||||
| "grid-auto-columns"
|
||||
| "grid-auto-rows"
|
||||
);
|
||||
|
||||
"max-content" => {
|
||||
same_name!("-webkit-max-content");
|
||||
same_name!("-moz-max-content");
|
||||
}
|
||||
replace_ident(&mut webkit_new_value, "fit-content", "-webkit-fit-content");
|
||||
replace_ident(&mut webkit_new_value, "max-content", "-webkit-max-content");
|
||||
replace_ident(&mut webkit_new_value, "min-content", "-webkit-min-content");
|
||||
replace_ident(
|
||||
&mut webkit_new_value,
|
||||
"fill-available",
|
||||
"-webkit-fill-available",
|
||||
);
|
||||
replace_ident(&mut webkit_new_value, "fill", "-webkit-fill-available");
|
||||
replace_ident(&mut webkit_new_value, "stretch", "-webkit-fill-available");
|
||||
|
||||
"min-content" => {
|
||||
same_name!("-webkit-min-content");
|
||||
same_name!("-moz-min-content");
|
||||
}
|
||||
|
||||
"fill-available" | "fill" => {
|
||||
same_name!("-webkit-fill-available");
|
||||
same_name!("-moz-available");
|
||||
}
|
||||
|
||||
"stretch" => {
|
||||
same_name!("-webkit-fill-available");
|
||||
same_name!("-moz-available");
|
||||
}
|
||||
|
||||
_ => {}
|
||||
}
|
||||
if !is_grid_property {
|
||||
replace_ident(&mut moz_new_value, "fit-content", "-moz-fit-content");
|
||||
replace_ident(&mut moz_new_value, "max-content", "-moz-max-content");
|
||||
replace_ident(&mut moz_new_value, "min-content", "-moz-min-content");
|
||||
replace_ident(&mut moz_new_value, "fill-available", "-moz-available");
|
||||
replace_ident(&mut moz_new_value, "fill", "-moz-available");
|
||||
replace_ident(&mut moz_new_value, "stretch", "-moz-available");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1200,23 +1578,21 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
|
||||
"unicode-bidi" => {
|
||||
if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] {
|
||||
match &*value.to_lowercase() {
|
||||
"isolate" => {
|
||||
same_name!("-moz-isolate");
|
||||
same_name!("-webkit-isolate");
|
||||
}
|
||||
"isolate-override" => {
|
||||
same_name!("-moz-isolate-override");
|
||||
same_name!("-webpack-isolate-override");
|
||||
}
|
||||
"plaintext" => {
|
||||
same_name!("-moz-plaintext");
|
||||
same_name!("-webpack-plaintext");
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
replace_ident(&mut moz_new_value, "isolate", "-moz-isolate");
|
||||
replace_ident(
|
||||
&mut moz_new_value,
|
||||
"isolate-override",
|
||||
"-moz-isolate-override",
|
||||
);
|
||||
replace_ident(&mut moz_new_value, "plaintext", "-moz-plaintext");
|
||||
|
||||
replace_ident(&mut webkit_new_value, "isolate", "-webkit-isolate");
|
||||
replace_ident(
|
||||
&mut webkit_new_value,
|
||||
"isolate-override",
|
||||
"-webpack-isolate-override",
|
||||
);
|
||||
replace_ident(&mut webkit_new_value, "plaintext", "-webpack-plaintext");
|
||||
}
|
||||
|
||||
"text-spacing" => {
|
||||
@ -1318,7 +1694,6 @@ impl VisitMut for Prefixer {
|
||||
same_content!(Prefix::Ms, "-ms-hyphens");
|
||||
}
|
||||
|
||||
// TODO fix me https://github.com/postcss/autoprefixer/blob/main/lib/hacks/border-image.js
|
||||
"border-image" => {
|
||||
same_content!(Prefix::Webkit, "-webkit-border-image");
|
||||
same_content!(Prefix::Moz, "-moz-border-image");
|
||||
@ -1447,9 +1822,7 @@ impl VisitMut for Prefixer {
|
||||
same_content!(Prefix::Moz, "-moz-border-radius-bottomleft");
|
||||
}
|
||||
|
||||
// TODO add `grid` support https://github.com/postcss/autoprefixer/tree/main/lib/hacks (starting with grid) and https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js#L559 and https://github.com/postcss/autoprefixer/blob/main/lib/hacks/intrinsic.js
|
||||
// TODO handle https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js#L938
|
||||
// TODO handle `linear-gradient()`/`repeating-linear-gradient()`/`radial-gradient()`/`repeating-radial-gradient()` in all properties https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js#L168
|
||||
// TODO add `grid` support https://github.com/postcss/autoprefixer/tree/main/lib/hacks (starting with grid)
|
||||
// TODO fix me https://github.com/postcss/autoprefixer/blob/main/test/cases/custom-prefix.out.css
|
||||
_ => {}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.class {
|
||||
border-image: fill;
|
||||
border-image: linear-gradient(black, white) 20% fill stretch stretch;
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
.class {
|
||||
-webkit-border-image: fill;
|
||||
-moz-border-image: fill;
|
||||
-o-border-image: fill;
|
||||
border-image: fill;
|
||||
-webkit-border-image: -webkit-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
-moz-border-image: -moz-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
-o-border-image: -o-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: -webkit-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: -moz-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: -o-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: linear-gradient(black, white) 20% fill stretch stretch;
|
||||
}
|
||||
|
||||
@ -19,7 +19,9 @@ h3 {
|
||||
background-image: cross-fade(.59 url(foo.png), url(bar.png));
|
||||
}
|
||||
.foo {
|
||||
background-image: -webkit-cross-fade(linear-gradient(white, black), radial-gradient(circle closest-corner, white, black), 0.59);
|
||||
background-image: -webkit-cross-fade(-webkit-linear-gradient(white, black), -webkit-radial-gradient(circle closest-corner, white, black), 0.59);
|
||||
background-image: cross-fade(.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
|
||||
background-image: cross-fade(.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
|
||||
background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
|
||||
}
|
||||
.class {
|
||||
|
||||
143
crates/swc_stylis/tests/fixture/gradient/input.css
Normal file
143
crates/swc_stylis/tests/fixture/gradient/input.css
Normal file
@ -0,0 +1,143 @@
|
||||
a {
|
||||
background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
|
||||
b {
|
||||
background-image: linear-gradient(rgba(0,0,0,1), white), linear-gradient(white, black);
|
||||
}
|
||||
|
||||
strong {
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
}
|
||||
|
||||
div {
|
||||
background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red);
|
||||
}
|
||||
|
||||
.old-radial {
|
||||
background: radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
}
|
||||
|
||||
.simple1 {
|
||||
background: linear-gradient(black, white);
|
||||
}
|
||||
|
||||
.simple2 {
|
||||
background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%);
|
||||
}
|
||||
|
||||
.simple3 {
|
||||
background: linear-gradient(to left, black 50%, white 100%);
|
||||
}
|
||||
|
||||
.simple4 {
|
||||
background: linear-gradient(to right top, black, white);
|
||||
}
|
||||
|
||||
.direction {
|
||||
background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
}
|
||||
|
||||
.silent {
|
||||
background: -webkit-linear-gradient(top left, black, white);
|
||||
}
|
||||
|
||||
.radial {
|
||||
background: radial-gradient(farthest-side at 0 50%, white, black);
|
||||
}
|
||||
|
||||
.second {
|
||||
background: red linear-gradient(red, blue);
|
||||
background: url('logo.png'), linear-gradient(#fff, #000);
|
||||
}
|
||||
|
||||
.px {
|
||||
background: linear-gradient(black 0, white 100px);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style-image: linear-gradient(white, black);
|
||||
}
|
||||
|
||||
.mask {
|
||||
mask: linear-gradient(white, black);
|
||||
}
|
||||
|
||||
.newline {
|
||||
background-image:
|
||||
linear-gradient( white, black ),
|
||||
linear-gradient( black, white );
|
||||
}
|
||||
|
||||
.convert {
|
||||
background: linear-gradient(0deg, white, black);
|
||||
background: linear-gradient(90deg, white, black);
|
||||
background: linear-gradient(180deg, white, black);
|
||||
background: linear-gradient(270deg, white, black);
|
||||
}
|
||||
|
||||
.grad {
|
||||
background: linear-gradient(1grad, white, black);
|
||||
}
|
||||
|
||||
.rad {
|
||||
background: linear-gradient(1rad, white, black);
|
||||
}
|
||||
|
||||
.turn {
|
||||
background: linear-gradient(0.3turn, white, black);
|
||||
}
|
||||
|
||||
.norm {
|
||||
background: linear-gradient(-90deg, white, black);
|
||||
}
|
||||
|
||||
.mask {
|
||||
mask-image: radial-gradient(circle at 86% 86%, transparent 8px, black 8px);
|
||||
}
|
||||
|
||||
.cover {
|
||||
background: radial-gradient(ellipse cover at center, white, black);
|
||||
}
|
||||
|
||||
.contain {
|
||||
background: radial-gradient(contain at center, white, black);
|
||||
}
|
||||
|
||||
.no-div {
|
||||
background: linear-gradient(black);
|
||||
}
|
||||
|
||||
.background-shorthand {
|
||||
background: radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F;
|
||||
}
|
||||
|
||||
.background-advanced {
|
||||
background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
|
||||
radial-gradient(#FFF, transparent),
|
||||
url(path/to/image.jpg) 50%/cover;
|
||||
}
|
||||
|
||||
.multiradial {
|
||||
mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
|
||||
}
|
||||
|
||||
.broken {
|
||||
mask-image: radial-gradient(white, black);
|
||||
}
|
||||
|
||||
.loop {
|
||||
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
|
||||
}
|
||||
|
||||
.more {
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(33.333deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
|
||||
.broken {
|
||||
background-image: linear-gradient(to, red 50%);
|
||||
}
|
||||
231
crates/swc_stylis/tests/fixture/gradient/output.css
Normal file
231
crates/swc_stylis/tests/fixture/gradient/output.css
Normal file
@ -0,0 +1,231 @@
|
||||
a {
|
||||
background: -webkit-linear-gradient(99.5deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white);
|
||||
background: -moz-linear-gradient(99.5deg, white, black), -moz-linear-gradient(220deg, black, white), -moz-linear-gradient(45deg, black, white);
|
||||
background: -o-linear-gradient(99.5deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white);
|
||||
background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
b {
|
||||
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), white), -webkit-linear-gradient(white, black);
|
||||
background-image: -moz-linear-gradient(rgba(0, 0, 0, 1), white), -moz-linear-gradient(white, black);
|
||||
background-image: -o-linear-gradient(rgba(0, 0, 0, 1), white), -o-linear-gradient(white, black);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black);
|
||||
}
|
||||
strong {
|
||||
background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
}
|
||||
div {
|
||||
background-image: -webkit-radial-gradient(right, white, black), -webkit-repeating-linear-gradient(top left, black, white), -webkit-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: -moz-radial-gradient(right, white, black), -moz-repeating-linear-gradient(top left, black, white), -moz-repeating-linear-gradient(bottom, aqua, red);
|
||||
background-image: -o-radial-gradient(right, white, black), -o-repeating-linear-gradient(top left, black, white), -o-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red);
|
||||
}
|
||||
.old-radial {
|
||||
background: -webkit-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: -moz-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: -o-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
}
|
||||
.simple1 {
|
||||
background: -webkit-linear-gradient(black, white);
|
||||
background: -moz-linear-gradient(black, white);
|
||||
background: -o-linear-gradient(black, white);
|
||||
background: linear-gradient(black, white);
|
||||
}
|
||||
.simple2 {
|
||||
background: -webkit-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: -moz-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: -o-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
}
|
||||
.simple3 {
|
||||
background: -webkit-linear-gradient(right, black 50%, white 100%);
|
||||
background: -moz-linear-gradient(right, black 50%, white 100%);
|
||||
background: -o-linear-gradient(right, black 50%, white 100%);
|
||||
background: linear-gradient(to left, black 50%, white 100%);
|
||||
}
|
||||
.simple4 {
|
||||
background: -webkit-linear-gradient(left bottom, black, white);
|
||||
background: -moz-linear-gradient(left bottom, black, white);
|
||||
background: -o-linear-gradient(left bottom, black, white);
|
||||
background: linear-gradient(to right top, black, white);
|
||||
}
|
||||
.direction {
|
||||
background: -webkit-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: -moz-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: -o-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
}
|
||||
.silent {
|
||||
background: -webkit-linear-gradient(top left, black, white);
|
||||
}
|
||||
.radial {
|
||||
background: -webkit-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: -moz-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: -o-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: radial-gradient(farthest-side at 0 50%, white, black);
|
||||
}
|
||||
.second {
|
||||
background: red -webkit-linear-gradient(red, blue);
|
||||
background: red -moz-linear-gradient(red, blue);
|
||||
background: red -o-linear-gradient(red, blue);
|
||||
background: red linear-gradient(red, blue);
|
||||
background: url('logo.png'), -webkit-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), -moz-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), -o-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), linear-gradient(#fff, #000);
|
||||
}
|
||||
.px {
|
||||
background: -webkit-linear-gradient(black 0, white 100px);
|
||||
background: -moz-linear-gradient(black 0, white 100px);
|
||||
background: -o-linear-gradient(black 0, white 100px);
|
||||
background: linear-gradient(black 0, white 100px);
|
||||
}
|
||||
.list {
|
||||
list-style-image: -webkit-linear-gradient(white, black);
|
||||
list-style-image: -moz-linear-gradient(white, black);
|
||||
list-style-image: -o-linear-gradient(white, black);
|
||||
list-style-image: linear-gradient(white, black);
|
||||
}
|
||||
.mask {
|
||||
-webkit-mask: -webkit-linear-gradient(white, black);
|
||||
mask: -webkit-linear-gradient(white, black);
|
||||
mask: -moz-linear-gradient(white, black);
|
||||
mask: -o-linear-gradient(white, black);
|
||||
mask: linear-gradient(white, black);
|
||||
}
|
||||
.newline {
|
||||
background-image: -webkit-linear-gradient(white, black), -webkit-linear-gradient(black, white);
|
||||
background-image: -moz-linear-gradient(white, black), -moz-linear-gradient(black, white);
|
||||
background-image: -o-linear-gradient(white, black), -o-linear-gradient(black, white);
|
||||
background-image: linear-gradient(white, black), linear-gradient(black, white);
|
||||
}
|
||||
.convert {
|
||||
background: -webkit-linear-gradient(bottom, white, black);
|
||||
background: -moz-linear-gradient(bottom, white, black);
|
||||
background: -o-linear-gradient(bottom, white, black);
|
||||
background: linear-gradient(0deg, white, black);
|
||||
background: -webkit-linear-gradient(left, white, black);
|
||||
background: -moz-linear-gradient(left, white, black);
|
||||
background: -o-linear-gradient(left, white, black);
|
||||
background: linear-gradient(90deg, white, black);
|
||||
background: -webkit-linear-gradient(top, white, black);
|
||||
background: -moz-linear-gradient(top, white, black);
|
||||
background: -o-linear-gradient(top, white, black);
|
||||
background: linear-gradient(180deg, white, black);
|
||||
background: -webkit-linear-gradient(right, white, black);
|
||||
background: -moz-linear-gradient(right, white, black);
|
||||
background: -o-linear-gradient(right, white, black);
|
||||
background: linear-gradient(270deg, white, black);
|
||||
}
|
||||
.grad {
|
||||
background: -webkit-linear-gradient(89.1deg, white, black);
|
||||
background: -moz-linear-gradient(89.1deg, white, black);
|
||||
background: -o-linear-gradient(89.1deg, white, black);
|
||||
background: linear-gradient(1grad, white, black);
|
||||
}
|
||||
.rad {
|
||||
background: -webkit-linear-gradient(32.704deg, white, black);
|
||||
background: -moz-linear-gradient(32.704deg, white, black);
|
||||
background: -o-linear-gradient(32.704deg, white, black);
|
||||
background: linear-gradient(1rad, white, black);
|
||||
}
|
||||
.turn {
|
||||
background: -webkit-linear-gradient(342deg, white, black);
|
||||
background: -moz-linear-gradient(342deg, white, black);
|
||||
background: -o-linear-gradient(342deg, white, black);
|
||||
background: linear-gradient(0.3turn, white, black);
|
||||
}
|
||||
.norm {
|
||||
background: -webkit-linear-gradient(right, white, black);
|
||||
background: -moz-linear-gradient(right, white, black);
|
||||
background: -o-linear-gradient(right, white, black);
|
||||
background: linear-gradient(-90deg, white, black);
|
||||
}
|
||||
.mask {
|
||||
-webkit-mask-image: -webkit-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -webkit-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -moz-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -o-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: radial-gradient(circle at 86% 86%, transparent 8px, black 8px);
|
||||
}
|
||||
.cover {
|
||||
background: -webkit-radial-gradient(center, ellipse cover, white, black);
|
||||
background: -moz-radial-gradient(center, ellipse cover, white, black);
|
||||
background: -o-radial-gradient(center, ellipse cover, white, black);
|
||||
background: radial-gradient(ellipse cover at center, white, black);
|
||||
}
|
||||
.contain {
|
||||
background: -webkit-radial-gradient(center, contain, white, black);
|
||||
background: -moz-radial-gradient(center, contain, white, black);
|
||||
background: -o-radial-gradient(center, contain, white, black);
|
||||
background: radial-gradient(contain at center, white, black);
|
||||
}
|
||||
.no-div {
|
||||
background: -webkit-linear-gradient(black);
|
||||
background: -moz-linear-gradient(black);
|
||||
background: -o-linear-gradient(black);
|
||||
background: linear-gradient(black);
|
||||
}
|
||||
.background-shorthand {
|
||||
background: -webkit-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: -moz-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: -o-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
}
|
||||
.background-advanced {
|
||||
background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -webkit-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: -moz-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -moz-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -o-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
}
|
||||
.multiradial {
|
||||
-webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -moz-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -o-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
|
||||
}
|
||||
.broken {
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
||||
mask-image: -webkit-radial-gradient(white, black);
|
||||
mask-image: -moz-radial-gradient(white, black);
|
||||
mask-image: -o-radial-gradient(white, black);
|
||||
mask-image: radial-gradient(white, black);
|
||||
}
|
||||
.loop {
|
||||
background-image: url("https://test.com/lol(test.png"), -webkit-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), -moz-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), -o-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
|
||||
}
|
||||
.more {
|
||||
background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(56.667deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white);
|
||||
background: -moz-linear-gradient(56.667deg, white, black), -moz-linear-gradient(220deg, black, white), -moz-linear-gradient(45deg, black, white);
|
||||
background: -o-linear-gradient(56.667deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white);
|
||||
background: linear-gradient(33.333deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
.broken {
|
||||
background-image: -webkit-linear-gradient(to, red 50%);
|
||||
background-image: -moz-linear-gradient(to, red 50%);
|
||||
background-image: -o-linear-gradient(to, red 50%);
|
||||
background-image: linear-gradient(to, red 50%);
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
img {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
img.other {
|
||||
@ -11,6 +13,8 @@ img.other {
|
||||
img.already {
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
display: block;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
|
||||
3
crates/swc_stylis/tests/fixture/important/input.css
Normal file
3
crates/swc_stylis/tests/fixture/important/input.css
Normal file
@ -0,0 +1,3 @@
|
||||
.class {
|
||||
box-shadow: 10px 5px 5px red !important;
|
||||
}
|
||||
5
crates/swc_stylis/tests/fixture/important/output.css
Normal file
5
crates/swc_stylis/tests/fixture/important/output.css
Normal file
@ -0,0 +1,5 @@
|
||||
.class {
|
||||
-webkit-box-shadow: 10px 5px 5px red !important;
|
||||
-moz-box-shadow: 10px 5px 5px red !important;
|
||||
box-shadow: 10px 5px 5px red !important;
|
||||
}
|
||||
@ -1,18 +1,18 @@
|
||||
.bible-quote {
|
||||
direction: rtl;
|
||||
unicode-bidi: -moz-isolate-override;
|
||||
unicode-bidi: -webpack-isolate-override;
|
||||
unicode-bidi: -moz-isolate-override;
|
||||
unicode-bidi: isolate-override;
|
||||
}
|
||||
.bible-quote {
|
||||
direction: rtl;
|
||||
unicode-bidi: -moz-plaintext;
|
||||
unicode-bidi: -webpack-plaintext;
|
||||
unicode-bidi: -moz-plaintext;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
.bible-quote {
|
||||
direction: rtl;
|
||||
unicode-bidi: -moz-isolate;
|
||||
unicode-bidi: -webkit-isolate;
|
||||
unicode-bidi: -moz-isolate;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
@ -7,7 +7,10 @@
|
||||
mask-image: none;
|
||||
}
|
||||
.class {
|
||||
-webkit-mask-image: linear-gradient(#fff);
|
||||
-webkit-mask-image: -webkit-linear-gradient(#fff);
|
||||
mask-image: -webkit-linear-gradient(#fff);
|
||||
mask-image: -moz-linear-gradient(#fff);
|
||||
mask-image: -o-linear-gradient(#fff);
|
||||
mask-image: linear-gradient(#fff);
|
||||
}
|
||||
.class {
|
||||
|
||||
73
crates/swc_stylis/tests/fixture/resolution/input.css
Normal file
73
crates/swc_stylis/tests/fixture/resolution/input.css
Normal file
@ -0,0 +1,73 @@
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 2.5dppx) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 144dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 2x) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 120dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-resolution: 124.8dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 113.38dpcm) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-image: url(image@1x.png);
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
.image {
|
||||
background-image: url(image@2x.png);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 33dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: 0dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
76
crates/swc_stylis/tests/fixture/resolution/output.css
Normal file
76
crates/swc_stylis/tests/fixture/resolution/output.css
Normal file
@ -0,0 +1,76 @@
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2x) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: gray;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: gray;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: gray;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: gray;
|
||||
}
|
||||
::-ms-input-placeholder {
|
||||
color: gray;
|
||||
}
|
||||
::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
.image {
|
||||
background-image: url(image@1x.png);
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
.image {
|
||||
background-image: url(image@2x.png);
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0.34), (min--moz-device-pixel-ratio: 0.34), (min-resolution: 33dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0), (min-resolution: 0dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@ -87,16 +87,21 @@ p {
|
||||
width: calc(100% - var(--jqx-circular-progress-bar-fill-size));
|
||||
}
|
||||
.grid {
|
||||
grid: -webkit-min-content -webkit-max-content/ -webkit-fit-content(500px);
|
||||
grid: min-content max-content/ fit-content(500px);
|
||||
}
|
||||
.grid-template {
|
||||
grid-template: -webkit-min-content/ -webkit-fit-content(10px) -webkit-max-content;
|
||||
grid-template: min-content/ fit-content(10px) max-content;
|
||||
grid-template: -webkit-max-content 1fr -webkit-max-content -webkit-max-content/ -webkit-max-content 1fr;
|
||||
grid-template: max-content 1fr max-content max-content/ max-content 1fr;
|
||||
}
|
||||
.grid-template-columns {
|
||||
grid-template-columns: minmax(100px, -webkit-min-content);
|
||||
grid-template-columns: minmax(100px, min-content);
|
||||
}
|
||||
.grid-auto-columns {
|
||||
grid-auto-columns: -webkit-min-content -webkit-max-content;
|
||||
grid-auto-columns: min-content max-content;
|
||||
}
|
||||
.ignore {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user