swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-11-28 02:29:04 +03:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat(css/prefixer): Implement preset-env (#5247)

Browse Source
This commit is contained in:
Alexander Akait 2022-07-20 06:12:40 +03:00 committed by GitHub
parent 5147965fb4
commit e78d23d193
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
94 changed files with 5467 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Cargo.lock generated
View File

@ -3251,6 +3251,10 @@ dependencies = [
name = "swc_css_prefixer"
version = "0.109.0"
dependencies = [
"once_cell",
"preset_env_base",
"serde",
"serde_json",
"swc_atoms",
"swc_common",
"swc_css_ast",

6
crates/swc_css_prefixer/Cargo.toml
View File

@ -3,7 +3,7 @@ authors = ["강동윤 <kdy1997.dev@gmail.com>"]
description = "Port of stylis"
documentation = "https://rustdoc.swc.rs/swc_stylis/"
edition = "2021"
include = ["Cargo.toml", "src/**/*.rs"]
include = ["Cargo.toml", "src/**/*.rs", "src/**/*.json"]
license = "Apache-2.0"
name = "swc_css_prefixer"
repository = "https://github.com/swc-project/swc.git"
@ -13,6 +13,10 @@ version = "0.109.0"
bench = false
[dependencies]
once_cell = "1.10.0"
preset_env_base = { version = "0.2.0", path = "../preset_env_base" }
serde = { version = "1.0.118", features = ["derive"] }
serde_json = "1.0.61"
swc_atoms = { version = "0.2.7", path = "../swc_atoms" }
swc_common = { version = "0.24.0", path = "../swc_common" }
swc_css_ast = { version = "0.100.0", path = "../swc_css_ast" }

2093
crates/swc_css_prefixer/data/prefixes_and_browsers.json Normal file
View File

File diff suppressed because it is too large Load Diff

1
crates/swc_css_prefixer/src/lib.rs
View File

@ -1,3 +1,4 @@
pub use self::prefixer::prefixer;
pub mod options;
mod prefixer;

15
crates/swc_css_prefixer/src/options.rs Normal file
View File

@ -0,0 +1,15 @@
use preset_env_base::query::Query;
pub use preset_env_base::query::Targets;
use serde::Deserialize;
#[derive(Debug, Default, Clone, Deserialize)]
#[serde(rename_all = "camelCase")]
#[serde(deny_unknown_fields)]
pub struct Options {
#[serde(default = "default_targets")]
pub env: Option<Targets>,
}
fn default_targets() -> Option<Targets> {
Some(Targets::Query(Query::Single("".into())))
}

732
crates/swc_css_prefixer/src/prefixer.rs
View File

File diff suppressed because it is too large Load Diff

12
crates/swc_css_prefixer/tests/fixture/advanced-filter/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
div {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
div {
background: -webkit-filter(url('image.jpg'), blur(2px));
background: filter(url('image.jpg'), blur(2px));
}
div {
background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
background: url(image.jpg), filter(url('image.jpg'), blur(2px));
}

28
crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,28 @@
.class {
animation: inherit;
}
.class {
animation-duration: 0.6s;
}
.class {
animation-name: slidein;
}
.class {
animation-iteration-count: infinite;
}
.class {
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.class {
animation-direction: alternate;
animation-direction: reverse;
animation-direction: REVERSE;
animation-direction: alternate-reverse;
animation: rotation-reverse;
animation: rotation-reverse reverse;
animation: test reverse;
animation: reverse test;
}
div {
animation-direction: var(--test);
}

9
crates/swc_css_prefixer/tests/fixture/any-link/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
a:-webkit-any-link {
color: red;
}
a:-moz-any-link {
color: red;
}
a:any-link {
color: red;
}

8
crates/swc_css_prefixer/tests/fixture/appearance/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,8 @@
a {
-webkit-appearance: none;
appearance: none;
}
b {
-webkit-appearance: auto;
appearance: auto;
}

12
crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
input:-webkit-autofill {
border: 3px solid blue;
}
input:autofill {
border: 3px solid blue;
}
input:-webkit-autofill {
border: 3px solid blue;
}
input:AUTOFILL {
border: 3px solid blue;
}

4
crates/swc_css_prefixer/tests/fixture/backdrop-filter/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
a {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}

9
crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
dialog::-webkit-backdrop {
background: rgba(255, 0, 0, .25);
}
dialog::-ms-backdrop {
background: rgba(255, 0, 0, .25);
}
dialog::backdrop {
background: rgba(255, 0, 0, .25);
}

4
crates/swc_css_prefixer/tests/fixture/backface-visibility/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
.class {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

7
crates/swc_css_prefixer/tests/fixture/background-clip/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,7 @@
a {
-webkit-background-clip: text;
background-clip: text;
}
b {
background-clip: content-box;
}

12
crates/swc_css_prefixer/tests/fixture/background-img-opts/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
.class {
-webkit-background-origin: initial;
-moz-background-origin: initial;
-o-background-origin: initial;
background-origin: initial;
}
.class {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

12
crates/swc_css_prefixer/tests/fixture/background-size/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
a {
-webkit-background-size: 20px;
-moz-background-size: 20px;
-o-background-size: 20px;
background-size: 20px;
}
b {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

23
crates/swc_css_prefixer/tests/fixture/background/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,23 @@
.class {
background: none;
}
.class {
background: -webkit-image-set(url(foo.jpg) 2x);
background: image-set(url(foo.jpg) 2x);
}
.class {
background-image: -webkit-image-set(url(foo.jpg) 2x);
background-image: image-set(url(foo.jpg) 2x);
}
.class {
background: -webkit-filter(url('image.jpg'), blur(2px));
background: filter(url('image.jpg'), blur(2px));
}
.class {
background: -webkit-filter(url('image.jpg'), blur(2px));
background: filter(url('image.jpg'), blur(2px));
}
.class {
background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
background: url(image.jpg), filter(url('image.jpg'), blur(2px));
}

18
crates/swc_css_prefixer/tests/fixture/basic/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,18 @@
body {
color: red;
}
:hover {
color: red;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
animation: foo 1s ease-out;
}
div a {
display: none;
}
[data-test] > div {
color: red;
}

6
crates/swc_css_prefixer/tests/fixture/border-image/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.class {
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;
}

7
crates/swc_css_prefixer/tests/fixture/border-radius/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,7 @@
a {
border-radius: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

4
crates/swc_css_prefixer/tests/fixture/box-decoration-break/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
.class {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}

3
crates/swc_css_prefixer/tests/fixture/box-shadow/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
box-shadow: 10px 5px 5px red;
}

3
crates/swc_css_prefixer/tests/fixture/box-sizing/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
box-sizing: border-box;
}

18
crates/swc_css_prefixer/tests/fixture/calc/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,18 @@
.class {
width: -webkit-calc(20px + 40px);
width: -moz-calc(20px + 40px);
width: calc(20px + 40px);
}
.class {
margin: -webkit-calc(5% + 5px) -webkit-calc(10% + 10px);
margin: -moz-calc(5% + 5px) -moz-calc(10% + 10px);
margin: calc(5% + 5px) calc(10% + 10px);
}
div {
-webkit-background-size: -webkit-calc(20px);
-moz-background-size: -moz-calc(20px);
-o-background-size: calc(20px);
background-size: -webkit-calc(20px);
background-size: -moz-calc(20px);
background-size: calc(20px);
}

8
crates/swc_css_prefixer/tests/fixture/case-insensivity/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,8 @@
a {
-webkit-appearance: NONE;
APPEARANCE: NONE;
}
b {
-webkit-appearance: AUTO;
APPEARANCE: AUTO;
}

4
crates/swc_css_prefixer/tests/fixture/check-down/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
* {
transition: all 1s;
-o-transition: all 1s;
}

4
crates/swc_css_prefixer/tests/fixture/clip-path/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
.class {
-webkit-clip-path: none;
clip-path: none;
}

8
crates/swc_css_prefixer/tests/fixture/color-adjust/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,8 @@
.a {
-webkit-print-color-adjust: economy;
color-adjust: economy;
}
.b {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}

3
crates/swc_css_prefixer/tests/fixture/color/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
color: red;
}

30
crates/swc_css_prefixer/tests/fixture/columns/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,30 @@
.class {
columns: auto;
}
.class {
column-count: auto;
}
.class {
column-fill: auto;
}
.class {
column-gap: auto;
}
.class {
column-rule: auto;
}
.class {
column-rule-color: auto;
}
.class {
column-rule-style: auto;
}
.class {
column-rule-width: auto;
}
.class {
column-span: auto;
}
.class {
column-width: auto;
}

45
crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,45 @@
a {
background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.2);
background-image: cross-fade(20% url(foo.png), url(bar.png));
}
b {
background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.5);
background-image: cross-fade(url(foo.png), url(bar.png));
}
h1 {
background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.10823);
background-image: cross-fade(10.823% url(foo.png), url(bar.png));
}
h2 {
background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
background-image: cross-fade(0.59 url(foo.png), url(bar.png));
}
h3 {
background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
background-image: cross-fade(.59 url(foo.png), url(bar.png));
}
.foo {
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 {
background-image: -webkit-cross-fade(url(white.png), url(black.png), 0);
background-image: cross-fade(url(white.png) 0%, url(black.png) 100%);
background-image: -webkit-cross-fade(url(white.png), url(black.png), 0.25);
background-image: cross-fade(url(white.png) 25%, url(black.png) 75%);
background-image: -webkit-cross-fade(url(white.png), url(black.png), 0.5);
background-image: cross-fade(url(white.png) 50%, url(black.png) 50%);
background-image: -webkit-cross-fade(url(white.png), url(black.png), 0.75);
background-image: cross-fade(url(white.png) 75%, url(black.png) 25%);
background-image: -webkit-cross-fade(url(white.png), url(black.png), 1);
background-image: cross-fade(url(white.png) 100%, url(black.png) 0%);
background-image: cross-fade(url(green.png) 75%, url(red.png) 75%);
background-image: -webkit-cross-fade(url(white.png), url(black.png), 0.25);
background-image: cross-fade(url(white.png), url(black.png) 75%);
background-image: cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
}
.broken {
background-image: cross-fade(url(red.png) 33.33%);
}

9
crates/swc_css_prefixer/tests/fixture/css-regions/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
.class {
flow-into: table-content;
}
.class {
flow-from: none;
}
.class {
region-fragment: break;
}

47
crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,47 @@
.class {
cursor: none;
}
.class {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.class {
cursor: url(cursor_1.png) 4 12, -webkit-grab;
cursor: url(cursor_1.png) 4 12, -moz-grab;
cursor: url(cursor_1.png) 4 12, grab;
}
.class {
cursor: -webkit-image-set(url(foo.jpg) 2x), pointer;
cursor: image-set(url(foo.jpg) 2x), pointer;
}
.class {
cursor: -webkit-image-set(url(foo.jpg) 2x), -webkit-grab;
cursor: image-set(url(foo.jpg) 2x), -moz-grab;
cursor: image-set(url(foo.jpg) 2x), grab;
}
.class {
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), -webkit-image-set(url(foo.jpg) 2x) 5 5, -webkit-grab;
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image-set(url(foo.jpg) 2x) 5 5, -moz-grab;
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image-set(url(foo.jpg) 2x) 5 5, grab;
}
.class {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.class {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
.class {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.class {
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -webkit-grab;
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -moz-grab;
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, GRAB;
}

44
crates/swc_css_prefixer/tests/fixture/display/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,44 @@
.class {
display: block;
}
.class {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.class {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.class {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
:-webkit-full-screen a {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
:-moz-full-screen a {
display: -moz-box;
display: flex;
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex;
}
:fullscreen a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}

24
crates/swc_css_prefixer/tests/fixture/duplicate-at-rule/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,24 @@
@-webkit-keyframes anim {}
@-moz-keyframes anim {}
@-o-keyframes anim {}
@keyframes anim {}
@-webkit-keyframes anim {
0% {
color: red;
}
}
@-moz-keyframes anim {
0% {
color: red;
}
}
@-o-keyframes anim {
0% {
color: red;
}
}
@keyframes anim {
0% {
color: red;
}
}

13
crates/swc_css_prefixer/tests/fixture/element/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,13 @@
div {
background: -moz-element(#id);
background: element(#id);
}
div {
background: url(image.jpg), -moz-element(#id);
background: url(image.jpg), element(#id);
}
div {
background: -webkit-image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), element(#id);
background: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), -moz-element(#id);
background: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x), element(#id);
}

7
crates/swc_css_prefixer/tests/fixture/error-recovery/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,7 @@
.class {
__styled-jsx-placeholder__1
animation: slide 3s ease infinite;}
.class {
animation: slide 3s ease infinite;
__styled-jsx-placeholder__1
}

18
crates/swc_css_prefixer/tests/fixture/file-selector-button/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,18 @@
input[type=file]::-webkit-file-upload-button {
border: 2px solid #6c5ce7;
}
input[type=file]::-ms-browse {
border: 2px solid #6c5ce7;
}
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
}
input[type=file]::-webkit-file-upload-button:hover {
border: 2px solid #00cec9;
}
input[type=file]::-ms-browse:hover {
border: 2px solid #00cec9;
}
input[type=file]::file-selector-button:hover {
border: 2px solid #00cec9;
}

20
crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,20 @@
.class {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
fill: red;
}
a {
-webkit-filter: blur(10px);
filter: blur(10px);
transition: -webkit-filter 2s;
transition: filter 2s;
}
div {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
b {
filter: alpha(opacity=100);
}
em {
filter: Alpha(opacity=100);
}

387
crates/swc_css_prefixer/tests/fixture/flex/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,387 @@
a {
-js-display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-moz-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 2;
-moz-box-flex: 0;
-ms-flex: 0 1 2;
flex: 0 1 2;
transition: flex 200ms;
}
.inline {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-flex: 1;
-webkit-flex: auto;
-moz-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-box-flex: 0;
-webkit-flex: none;
-moz-box-flex: 0;
-ms-flex: none;
flex: none;
}
.b {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.c {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: reverse-wrap;
-ms-flex-wrap: reverse-wrap;
flex-wrap: reverse-wrap;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.e {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-moz-box-orient: vertical;
-moz-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline;
}
.f {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.g {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: calc(1em + 1px);
-webkit-flex: -webkit-calc(1em + 1px) 0 0;
-moz-box-flex: calc(1em + 1px);
-ms-flex: calc(1em + 1px) 0 0px;
flex: -webkit-calc(1em + 1px) 0 0;
flex: -moz-calc(1em + 1px) 0 0;
flex: calc(1em + 1px) 0 0;
}
.h {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column wrap;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.i {
-webkit-flex-flow: nowrap;
-ms-flex-flow: nowrap;
flex-flow: nowrap;
}
.inherit {
-webkit-box-ordinal-group: inherit;
-webkit-order: inherit;
-moz-box-ordinal-group: inherit;
-ms-flex-order: inherit;
order: inherit;
-webkit-flex-direction: inherit;
-ms-flex-direction: inherit;
flex-direction: inherit;
}
@supports (display: flex) {
.foo {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
}
@supports (flex: auto) {
.foo {
-webkit-box-flex: 1;
-webkit-flex: auto;
-moz-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
}
.class {
-webkit-box-flex: inherit;
-webkit-flex: inherit;
-moz-box-flex: inherit;
-ms-flex: inherit;
flex: inherit;
}
.class {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.class {
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.class {
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.class {
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.class {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.class {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.class {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.class {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.class {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
}
.class {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.class {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.class {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.class {
-webkit-box-pack: stretch;
-webkit-justify-content: stretch;
-moz-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
}
.class {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.class {
justify-items: center;
}
.class {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.class {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.class {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: wrap column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-flow: wrap column;
flex-flow: wrap column;
}
.class-17 {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}

9
crates/swc_css_prefixer/tests/fixture/font-feature/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
.class {
font-feature-settings: initial;
}
.class {
font-variant-ligatures: initial;
}
.class {
font-language-override: initial;
}

3
crates/swc_css_prefixer/tests/fixture/font-kerning/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
font-kerning: none;
}

4
crates/swc_css_prefixer/tests/fixture/forced-color-adjust/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
.class {
-ms-high-contrast-adjust: auto;
forced-color-adjust: auto;
}

12
crates/swc_css_prefixer/tests/fixture/fullscreen/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
:-webkit-full-screen a {
color: red;
}
:-moz-full-screen a {
color: red;
}
:-ms-fullscreen a {
color: red;
}
:fullscreen a {
color: red;
}

231
crates/swc_css_prefixer/tests/fixture/gradient/output.defaults-not-ie-11.css Normal file
View 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%);
}

89
crates/swc_css_prefixer/tests/fixture/grouping-rule/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,89 @@
.grid {
display: grid;
}
.a,
.b,
.c::selection,
.d:read-only,
.e::-webkit-input-placeholder {
color: yellow;
}
.a,
.b,
.c::-moz-selection,
.d:-moz-read-only,
.e:-moz-placeholder {
color: yellow;
}
.a,
.b,
.c::-moz-selection,
.d:-moz-read-only,
.e::-moz-placeholder {
color: yellow;
}
.a,
.b,
.c::selection,
.d:read-only,
.e:-ms-input-placeholder {
color: yellow;
}
.a,
.b,
.c::selection,
.d:read-only,
.e::-ms-input-placeholder {
color: yellow;
}
.a,
.b,
.c::selection,
.d:read-only,
.e::placeholder {
color: yellow;
}
::-moz-selection {
color: red;
}
::selection {
color: red;
}
:-moz-read-only {
color: black;
}
:read-only {
color: black;
}
.f:-moz-read-write,
.g:-moz-read-write {
background: #fff;
}
.f:read-write,
.g:read-write {
background: #fff;
}
.example:-webkit-any-link:read-only {
color: red;
}
.example:-moz-any-link:-moz-read-only {
color: red;
}
.example:any-link:read-only {
color: red;
}
.element1:focus,
.element1:-moz-read-only {
background-color: red;
}
.element1:focus,
.element1:read-only {
background-color: red;
}
.c::-moz-selection {
backface-visibility: visible;
}
.c::selection {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}

4
crates/swc_css_prefixer/tests/fixture/hyphens/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,4 @@
.class {
-webkit-hyphens: auto;
hyphens: auto;
}

23
crates/swc_css_prefixer/tests/fixture/image-rendering/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,23 @@
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
img.other {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-pixelated;
image-rendering: pixelated;
}
img.already {
-ms-interpolation-mode: nearest-neighbor;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-pixelated;
image-rendering: pixelated;
}

42
crates/swc_css_prefixer/tests/fixture/image-set/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,42 @@
a {
background-image: -webkit-image-set(url(foo@1x.png) 1x, url(foo@2x.png) 2x);
background-image: image-set(url(foo@1x.png) 1x, url(foo@2x.png) 2x);
}
h1 {
background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
border-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
-webkit-mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
mask: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
-webkit-mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
mask-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
list-style: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
list-style: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
list-style-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
list-style-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.class {
content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
}
.broken {
content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x) "test";
content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
}

3
crates/swc_css_prefixer/tests/fixture/important/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
box-shadow: 10px 5px 5px red !important;
}

18
crates/swc_css_prefixer/tests/fixture/isolate-override/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,18 @@
.bible-quote {
direction: rtl;
unicode-bidi: -webpack-isolate-override;
unicode-bidi: -moz-isolate-override;
unicode-bidi: isolate-override;
}
.bible-quote {
direction: rtl;
unicode-bidi: -webpack-plaintext;
unicode-bidi: -moz-plaintext;
unicode-bidi: plaintext;
}
.bible-quote {
direction: rtl;
unicode-bidi: -webkit-isolate;
unicode-bidi: -moz-isolate;
unicode-bidi: isolate;
}

109
crates/swc_css_prefixer/tests/fixture/keyframes/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,109 @@
@-webkit-keyframes anim {
from {
top: -webkit-calc(10% + 10px);
top: calc(10% + 10px);
transform: rotate(10deg);
}
50% {
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
to {
top: -webkit-calc(10%);
top: calc(10%);
transform: rotate(0);
}
}
@-moz-keyframes anim {
from {
top: -moz-calc(10% + 10px);
top: calc(10% + 10px);
transform: rotate(10deg);
}
50% {
top: 0;
display: -moz-box;
display: flex;
}
to {
top: -moz-calc(10%);
top: calc(10%);
transform: rotate(0);
}
}
@-o-keyframes anim {
from {
top: calc(10% + 10px);
transform: rotate(10deg);
}
50% {
top: 0;
display: flex;
}
to {
top: calc(10%);
transform: rotate(0);
}
}
@keyframes anim {
from {
top: -webkit-calc(10% + 10px);
top: -moz-calc(10% + 10px);
top: calc(10% + 10px);
transform: rotate(10deg);
}
50% {
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
to {
top: -webkit-calc(10%);
top: -moz-calc(10%);
top: calc(10%);
transform: rotate(0);
}
}
@media screen {
@-webkit-keyframes inside {}
@-moz-keyframes inside {}
@-o-keyframes inside {}
@keyframes inside {}
}
@-webkit-keyframes spaces {
from {
color: black;
}
to {
color: white;
}
}
@-moz-keyframes spaces {
from {
color: black;
}
to {
color: white;
}
}
@-o-keyframes spaces {
from {
color: black;
}
to {
color: white;
}
}
@keyframes spaces {
from {
color: black;
}
to {
color: white;
}
}

39
crates/swc_css_prefixer/tests/fixture/margid-border-padding-logical/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,39 @@
.class {
margin-inline-start: 20px;
}
.class {
margin-inline-end: 20px;
}
a {
margin-block-start: 1px;
margin-inline-start: 1px;
padding-inline-end: 1px;
}
.border {
border-block-end: 1px;
border-inline-end: 1px;
}
.class {
padding-block-start: 1px;
padding-block-end: 1px;
}
.class {
margin-block-start: 1px;
margin-block-end: 1px;
}
.class {
border-block-start: 1px;
border-block-end: 1px;
}
.class {
padding-inline-start: 1px;
padding-inline-end: 1px;
}
.class {
margin-inline-start: 1px;
margin-inline-end: 1px;
}
.class {
border-inline-start: 1px;
border-inline-end: 1px;
}

79
crates/swc_css_prefixer/tests/fixture/mask/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,79 @@
.class {
-webkit-mask: none;
mask: none;
}
.class {
-webkit-mask-image: none;
mask-image: none;
}
.class {
-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 {
mask-mode: initial;
}
.class {
-webkit-mask-clip: initial;
mask-clip: initial;
}
.class {
-webkit-mask-size: initial;
mask-size: initial;
}
.class {
-webkit-mask-repeat: initial;
mask-repeat: initial;
}
.class {
-webkit-mask-origin: initial;
mask-origin: initial;
}
.class {
-webkit-mask-position: initial;
mask-position: initial;
}
.class {
-webkit-mask-composite: initial;
mask-composite: initial;
}
.class {
-webkit-mask-border-source: url(image.png);
mask-border-source: url(image.png);
-webkit-mask-box-image-slice: 50% fill;
mask-border-slice: 50% fill;
-webkit-mask-box-image-width: auto 1 50%;
mask-border-width: auto 1 50%;
-webkit-mask-box-image-outset: 0 1 2;
mask-border-outset: 0 1 2;
-webkit-mask-border-repeat: repeat space;
mask-border-repeat: repeat space;
-webkit-mask-box-image: url(#foo) 1 fill;
mask-border: url(#foo) 1 fill;
}
a {
-webkit-mask: url(add.png) add, url(substract.png);
mask: url(add.png) add, url(substract.png);
}
a {
-webkit-mask: url(intersect.png) intersect, url(exclude.png);
mask: url(intersect.png) intersect, url(exclude.png);
}
a {
-webkit-mask: url(image.png) intersect, url(image.png) add, url(image.png);
mask: url(image.png) intersect, url(image.png) add, url(image.png);
}
a {
-webkit-mask-composite: add;
mask-composite: add;
}
a {
mask-composite: ;
}
a {
-webkit-mask-composite: add, subtract, exclude;
mask-composite: add, subtract, exclude;
}

3
crates/swc_css_prefixer/tests/fixture/min-zoom/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
min-zoom: 0;
}

46
crates/swc_css_prefixer/tests/fixture/multicolumn/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,46 @@
.a {
-webkit-column-break-inside: auto;
break-inside: auto;
-webkit-column-break-before: auto;
break-before: auto;
-webkit-column-break-after: auto;
break-after: auto;
}
.b {
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
.c {
break-inside: avoid-column;
}
.d {
break-inside: avoid-page;
}
.e {
break-inside: avoid-region;
}
.f {
break-inside: region;
}
.class {
break-before: page;
}
.class {
-webkit-column-break-before: avoid;
break-before: avoid;
}
.class {
break-before: avoid-column;
}
.class {
-webkit-column-break-after: avoid;
break-after: avoid;
}
.class {
-webkit-column-break-after: always;
break-after: column;
}
.class {
-webkit-column-break-before: always;
break-before: column;
}

215
crates/swc_css_prefixer/tests/fixture/nested/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,215 @@
@-webkit-keyframes test {
0% {
color: red;
}
}
@-moz-keyframes test {
0% {
color: red;
}
}
@-o-keyframes test {
0% {
color: red;
}
}
@keyframes test {
0% {
color: red;
}
}
@supports (flex-wrap: wrap) {
@-webkit-keyframes test {
0% {
color: red;
}
}
@-moz-keyframes test {
0% {
color: red;
}
}
@-o-keyframes test {
0% {
color: red;
}
}
@keyframes test {
0% {
color: red;
}
}
}
@supports (flex-wrap: wrap) {
@supports (flex-wrap: wrap) {
@-webkit-keyframes test {
0% {
color: red;
}
}
@-moz-keyframes test {
0% {
color: red;
}
}
@-o-keyframes test {
0% {
color: red;
}
}
@keyframes test {
0% {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
color: red;
}
}
}
}
.test {
&.class::-webkit-input-placeholder {
color: red;
}
&.class:-moz-placeholder {
color: red;
}
&.class::-moz-placeholder {
color: red;
}
&.class:-ms-input-placeholder {
color: red;
}
&.class::-ms-input-placeholder {
color: red;
}
&.class::placeholder {
color: red;
}
}
.test {
&.class::-webkit-input-placeholder {
-webkit-appearance: auto;
appearance: auto;
}
&.class:-moz-placeholder {
appearance: auto;
}
&.class::-moz-placeholder {
appearance: auto;
}
&.class:-ms-input-placeholder {
appearance: auto;
}
&.class::-ms-input-placeholder {
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
appearance: auto;
}
}
.test {
-webkit-appearance: auto;
appearance: auto;
&.class {
color: red;
}
}
.test {
-webkit-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: auto;
appearance: auto;
}
}
.test {
@supports (foo: bar) {
-webkit-appearance: auto;
appearance: auto;
}
}
.test {
@media (orientation: landscape) {
-webkit-appearance: auto;
appearance: auto;
}
}
.test {
-webkit-appearance: auto;
appearance: auto;
&.class::-webkit-input-placeholder {
-webkit-appearance: auto;
appearance: auto;
}
&.class:-moz-placeholder {
appearance: auto;
}
&.class::-moz-placeholder {
appearance: auto;
}
&.class:-ms-input-placeholder {
appearance: auto;
}
&.class::-ms-input-placeholder {
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
appearance: auto;
}
@media (orientation: landscape) {
-webkit-appearance: auto;
appearance: auto;
}
}
@media (orientation: landscape) {
.test {
&.class::-webkit-input-placeholder {
-webkit-appearance: auto;
appearance: auto;
}
&.class:-moz-placeholder {
appearance: auto;
}
&.class::-moz-placeholder {
appearance: auto;
}
&.class:-ms-input-placeholder {
appearance: auto;
}
&.class::-ms-input-placeholder {
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
appearance: auto;
}
}
}
@media (orientation: landscape) {
.test {
-webkit-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: auto;
appearance: auto;
}
}
}
.test {
-webkit-appearance: none;
appearance: none;
&.class {
-webkit-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: menulist-button;
appearance: menulist-button;
&.class {
-webkit-appearance: button;
appearance: button;
}
}
}
}

6
crates/swc_css_prefixer/tests/fixture/object-fit/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.class {
object-fit: contain;
}
.class {
object-position: 20px;
}

3
crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
text-overflow: clip;
}

12
crates/swc_css_prefixer/tests/fixture/overscroll-behavior/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
.none {
overscroll-behavior: none;
}
.contain {
overscroll-behavior: contain;
}
.auto {
overscroll-behavior: auto;
}
.inherit {
overscroll-behavior: inherit;
}

6
crates/swc_css_prefixer/tests/fixture/perspective/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.class {
perspective: 20px;
}
.class {
perspective-origin: 20px;
}

9
crates/swc_css_prefixer/tests/fixture/placeholder-shown/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
a:-moz-placeholder-shown {
color: red;
}
a:-ms-input-placeholder {
color: red;
}
a:placeholder-shown {
color: red;
}

82
crates/swc_css_prefixer/tests/fixture/placeholder/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,82 @@
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
input::-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
input::-webkit-input-placeholder,
#fs-toggle:-webkit-full-screen {
color: red;
}
input:-moz-placeholder,
#fs-toggle:-moz-full-screen {
color: red;
}
input::-moz-placeholder,
#fs-toggle:-moz-full-screen {
color: red;
}
input:-ms-input-placeholder,
#fs-toggle:-ms-fullscreen {
color: red;
}
input::-ms-input-placeholder,
#fs-toggle:-ms-fullscreen {
color: red;
}
input::placeholder,
#fs-toggle:fullscreen {
color: red;
}
input::-webkit-input-placeholder {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
input:-moz-placeholder {
backdrop-filter: blur(2px);
}
input::-moz-placeholder {
backdrop-filter: blur(2px);
}
input:-ms-input-placeholder {
backdrop-filter: blur(2px);
}
input::-ms-input-placeholder {
backdrop-filter: blur(2px);
}
input::placeholder {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
input.appearance::-webkit-input-placeholder {
-webkit-appearance: none;
appearance: none;
}
input.appearance:-moz-placeholder {
appearance: none;
}
input.appearance::-moz-placeholder {
appearance: none;
}
input.appearance:-ms-input-placeholder {
appearance: none;
}
input.appearance::-ms-input-placeholder {
appearance: none;
}
input.appearance::placeholder {
-webkit-appearance: none;
appearance: none;
}

7
crates/swc_css_prefixer/tests/fixture/position/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,7 @@
.class {
position: relative;
}
.class {
position: -webkit-sticky;
position: sticky;
}

101
crates/swc_css_prefixer/tests/fixture/prefixed/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,101 @@
.class {
-webkit-appearance: auto;
appearance: auto;
}
.class-1 {
-webkit-appearance: unknown;
appearance: auto;
}
.class-2 {
-webkit-appearance: none;
appearance: none;
-webkit-appearance: auto;
appearance: auto;
}
.class-3 {
appearance: none;
appearance: auto;
-webkit-appearance: auto;
}
.class-4 {
appearance: unknown;
appearance: auto;
-webkit-appearance: unknown;
}
.class-5 {
-webkit-appearance: searchfield;
appearance: auto;
-webkit-appearance: auto;
}
.class-6 {
appearance: auto;
-webkit-appearance: auto;
-webkit-appearance: searchfield;
}
.class-7 {
-webkit-appearance: auto;
appearance: auto;
-webkit-appearance: -webkit-button;
appearance: -webkit-button;
}
.class-8 {
appearance: auto;
-webkit-appearance: -webkit-button;
}
.class-9 {
appearance: auto;
-webkit-appearance: -webkit-button;
-webkit-appearance: -webkit-unknown;
}
.class-10 {
-webkit-appearance: -webkit-button;
appearance: none;
}
.class-11 {
-webkit-animation: rotation-reverse;
animation: rotation-reverse reverse;
}
.class-12 {
-webkit-animation: rotation-reverse 100ms;
animation: rotation-reverse;
}
.class-13 {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.class-14 {
-webkit-column-break-before: avoid;
-moz-column-break-before: column;
break-before: column;
}
.class-15 {
align-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
}
.class-16 {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
}
.class-17 {
-webkit-align-content: flex-start;
align-content: flex-start;
-ms-flex-line-pack: end;
-webkit-align-content: flex-start;
align-content: flex-start;
}
.class-19 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}

10
crates/swc_css_prefixer/tests/fixture/print-color-adjust/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,10 @@
.a {
color-adjust: economy;
-webkit-print-color-adjust: economy;
print-color-adjust: economy;
}
.b {
color-adjust: exact;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

6
crates/swc_css_prefixer/tests/fixture/read-only/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.d:-moz-read-only {
color: red;
}
.d:read-only {
color: red;
}

14
crates/swc_css_prefixer/tests/fixture/read-write/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,14 @@
.f:-moz-read-write {
color: red;
}
.f:read-write {
color: red;
}
.f:-moz-read-write,
.g:-moz-read-write {
color: red;
}
.f:read-write,
.g:read-write {
color: red;
}

32
crates/swc_css_prefixer/tests/fixture/recovery/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,32 @@
main {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: __styled-jsx-placeholder;
-ms-flex-direction: __styled-jsx-placeholder;
flex-direction: __styled-jsx-placeholder;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: var(--geist-gap-double);
}
div {
width: 100%;
max-width: -webkit-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
max-width: -moz-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
}
@media (max-width: __styled-jsx-placeholderpx) {
main {
-webkit-flex-direction: __styled-jsx-placeholder;
-ms-flex-direction: __styled-jsx-placeholder;
flex-direction: __styled-jsx-placeholder;
}
div {
max-width: unset;
}
}

76
crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css Normal file
View 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;
}
}

18
crates/swc_css_prefixer/tests/fixture/selection/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,18 @@
.c::-moz-selection {
color: red;
}
.c::selection {
color: red;
}
::-moz-selection {
color: red;
}
::selection {
color: red;
}
::-moz-selection {
color: red;
}
::SeLeCtIoN {
color: red;
}

3
crates/swc_css_prefixer/tests/fixture/selector-list-2/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
div.jsx-5a206f122d1cb32e > span {
color: red;
}

3
crates/swc_css_prefixer/tests/fixture/selector-list/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.container.jsx-c7c3a8e231c9215a > * {
color: red;
}

9
crates/swc_css_prefixer/tests/fixture/shapes/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
.class {
shape-margin: 20px;
}
.class {
shape-outside: url("foo.png");
}
.class {
shape-image-threshold: initial;
}

15
crates/swc_css_prefixer/tests/fixture/snappoints/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,15 @@
.class {
scroll-snap-type: block;
}
.class {
scroll-snap-coordinate: none;
}
.class {
scroll-snap-destination: 400px 600px;
}
.class {
scroll-snap-points-x: none;
}
.class {
scroll-snap-points-y: none;
}

36
crates/swc_css_prefixer/tests/fixture/style-block/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,36 @@
.class {
&.foo {
-webkit-appearance: auto;
appearance: auto;
}
@media all {
-webkit-appearance: auto;
appearance: auto;
}
}
@media (min-width: 50em) {
.foo {
-webkit-appearance: auto;
appearance: auto;
}
@supports (flex-wrap: wrap) {
.foo {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-appearance: auto;
appearance: auto;
}
}
}
@supports (flex-wrap: wrap) {
.foo {
-webkit-appearance: auto;
appearance: auto;
}
@media (min-width: 50em) {
.foo {
-webkit-appearance: auto;
appearance: auto;
}
}
}

3
crates/swc_css_prefixer/tests/fixture/tab-size/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
tab-size: 2;
}

3
crates/swc_css_prefixer/tests/fixture/text-align-last/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
text-align-last: left;
}

32
crates/swc_css_prefixer/tests/fixture/text-decoration/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,32 @@
.shorthand {
-webkit-text-decoration: overline double red;
-moz-text-decoration: overline double red;
text-decoration: overline double red;
}
.full {
-webkit-text-decoration-style: double;
-moz-text-decoration-style: double;
text-decoration-style: double;
}
.old {
text-decoration: underline;
}
.global {
text-decoration: unset;
}
.skip {
-webkit-text-decoration-skip: spaces;
text-decoration-skip: spaces;
}
.ink-auto {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
.ink-all {
-webkit-text-decoration-skip-ink: all;
text-decoration-skip-ink: all;
}
.old-ink {
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}

3
crates/swc_css_prefixer/tests/fixture/text-emphasis/output.css
View File

@ -1,9 +1,8 @@
.class {
-webkit-text-spacing: none;
-webkit-text-emphasis: none;
text-emphasis: none;
}
.class {
-webkit-text-spacing: filled red;
text-emphasis: filled red;
-webkit-text-emphasis: filled red;
}

36
crates/swc_css_prefixer/tests/fixture/text-emphasis/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,36 @@
.class {
-webkit-text-emphasis: none;
text-emphasis: none;
}
.class {
text-emphasis: filled red;
-webkit-text-emphasis: filled red;
}
.class {
-webkit-text-emphasis-position: left;
text-emphasis-position: left;
}
.class {
-webkit-text-emphasis-style: circle;
text-emphasis-style: circle;
}
.class {
-webkit-text-emphasis-color: red;
text-emphasis-color: red;
}
a {
-webkit-text-emphasis-position: over left;
text-emphasis-position: over left;
}
em {
-webkit-text-emphasis-position: under right;
text-emphasis-position: under right;
}
.reverse {
-webkit-text-emphasis-position: left over;
text-emphasis-position: left over;
}
.wrong {
-webkit-text-emphasis-position: over;
text-emphasis-position: over;
}

6
crates/swc_css_prefixer/tests/fixture/text-orientation/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.class {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: mixed;
}

9
crates/swc_css_prefixer/tests/fixture/text-size-adjust/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,9 @@
.class {
text-align: left;
text-transform: none;
text-shadow: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}

3
crates/swc_css_prefixer/tests/fixture/text-spacing/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,3 @@
.class {
text-spacing: none;
}

6
crates/swc_css_prefixer/tests/fixture/touch-action/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,6 @@
.class {
touch-action: none;
}
.class {
touch-action: manipulation;
}

43
crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,43 @@
.class {
transform: rotate(30deg);
}
a {
transition: -webkit-transform 1s;
transition: -moz-transform 1s;
transition: -o-transform 1s;
transition: transform 1s;
transform: rotateX(45deg);
}
b {
transform: translateX(45deg);
transform-origin: 0 0;
}
em {
transform: rotateZ(45deg);
}
@-webkit-keyframes anim {
from {
transform: rotate(90deg);
}
}
@-moz-keyframes anim {
from {
transform: rotate(90deg);
}
}
@-o-keyframes anim {
from {
transform: rotate(90deg);
}
}
@keyframes anim {
from {
transform: rotate(90deg);
}
}
.class {
transform-style: flat;
}
.class {
transform: perspective(500px) rotateY(3deg);
}

147
crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,147 @@
a {
transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -moz-transform 200ms;
transition: color 200ms, -o-transform 200ms;
transition: color 200ms, transform 200ms;
transform: rotate(10deg);
}
div {
-webkit-transition-property: filter;
transition-property: filter;
animation-name: rotating;
}
.good {
-webkit-transition-property: filter;
transition-property: filter;
transition-duration: 1s;
}
.good2 {
-webkit-transition-property: color, filter;
transition-property: color, filter;
transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
}
.bad {
-webkit-transition-property: color, filter;
transition-property: color, filter;
transition-duration: 1s, 2s;
}
.revert {
transition: 200ms -webkit-transform;
transition: 200ms -moz-transform;
transition: 200ms -o-transform;
transition: 200ms transform;
}
input[type=range]::-moz-range-thumb {
transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -moz-transform 200ms;
transition: color 200ms, -o-transform 200ms;
transition: color 200ms, transform 200ms;
transform: rotate(10deg);
}
input[type=range]::-webkit-slider-thumb {
transition: none;
-webkit-transition-property: all;
transition-property: all;
}
button::-moz-submit-invalid {
opacity: 1;
transform: translateX(45px);
transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, transform 0.5s 0.5s;
}
@supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) {
button::-moz-submit-invalid {
opacity: 1;
transform: translateX(45px);
transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, transform 0.5s 0.5s;
}
button {
opacity: 1;
transform: translateX(45px);
transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
transition: opacity 0.5s 2s, transform 0.5s 0.5s;
}
}
button::-webkit-search-cancel-button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -moz-transform 200ms;
transition: color 200ms, -o-transform 200ms;
transition: color 200ms, transform 200ms;
transform: rotate(10deg);
}
button::-webkit-search-cancel-button {
display: -webkit-box;
display: -webkit-flex;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -webkit-transform 200ms;
transition: color 200ms, -moz-transform 200ms;
transition: color 200ms, -o-transform 200ms;
transition: color 200ms, transform 200ms;
transition: color 200ms, -webkit-transform 200ms, -webkit-transform 200ms;
transition: color 200ms, -moz-transform 200ms, -webkit-transform 200ms;
transition: color 200ms, -o-transform 200ms, -webkit-transform 200ms;
transition: color 200ms, transform 200ms, -webkit-transform 200ms;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.a::-webkit-search-cancel-button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-moz-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 2;
-moz-box-flex: 0;
-ms-flex: 0 1 2;
flex: 0 1 2;
transition: flex 200ms;
}
.no-warn {
-webkit-transition-property: color, opacity;
transition-property: color, opacity;
transition-duration: 1s, 2s;
}
div {
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: -moz-transform;
transition-property: -o-transform;
transition-property: transform;
transform: rotate(10deg);
}
div {
transition: -webkit-calc(1s);
transition: -moz-calc(1s);
transition: calc(1s);
}

17
crates/swc_css_prefixer/tests/fixture/user-select/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,17 @@
a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
b {
-webkit-user-select: contain;
-moz-user-select: contain;
-ms-user-select: element;
user-select: contain;
}
.all {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}

12
crates/swc_css_prefixer/tests/fixture/viewport/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,12 @@
@-ms-viewport{
min-width: 640px;
max-width: 800px;
}
@-o-viewport{
min-width: 640px;
max-width: 800px;
}
@viewport{
min-width: 640px;
max-width: 800px;
}

109
crates/swc_css_prefixer/tests/fixture/width-size/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,109 @@
div {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: -webkit-fill-available;
width: -moz-available;
width: fill-available;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content;
max-height: -webkit-fit-content;
max-height: -moz-fit-content;
max-height: fit-content;
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
min-inline-size: -webkit-fit-content;
min-inline-size: -moz-fit-content;
min-inline-size: fit-content;
max-inline-size: -webkit-fit-content;
max-inline-size: -moz-fit-content;
max-inline-size: fit-content;
block-size: -webkit-fit-content;
block-size: -moz-fit-content;
block-size: fit-content;
min-block-size: -webkit-fit-content;
min-block-size: -moz-fit-content;
min-block-size: fit-content;
max-block-size: -webkit-fit-content;
max-block-size: -moz-fit-content;
max-block-size: fit-content;
}
.outdated {
width: -webkit-fill-available;
width: -moz-available;
width: fill;
}
a {
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
}
b {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
p {
block-size: -webkit-min-content;
block-size: -moz-min-content;
block-size: min-content;
min-inline-size: -webkit-fit-content;
min-inline-size: -moz-fit-content;
min-inline-size: fit-content;
}
.outdated {
width: -webkit-fill-available;
width: -moz-available;
width: fill;
}
.old {
width: -webkit-fill-available;
width: -moz-available;
width: fill-available;
}
.ok {
width: -webkit-calc(100% - var(--jqx-circular-progress-bar-fill-size));
width: -moz-calc(100% - var(--jqx-circular-progress-bar-fill-size));
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 {
width: -webkit-fill-available;
}

96
crates/swc_css_prefixer/tests/fixture/width/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,96 @@
.class {
width: auto;
}
.class {
width: unset;
}
.class {
width: initial;
}
.class {
width: inherit;
}
.class {
width: 10;
}
.class {
width: min();
}
.class {
width: var(--foo-content);
}
.class {
width: var(-content);
}
.class {
width: var(--max-content);
}
.class {
width: --max-content;
}
.class {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.class {
width: stackWidth;
}
.class {
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
.class {
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
}
.class {
height: -webkit-fill-available;
height: -moz-available;
height: fill-available;
}
.class {
max-height: -webkit-fit-content;
max-height: -moz-fit-content;
max-height: fit-content;
}
.class {
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
}
.class {
width: -webkit-fill-available !important;
width: -moz-available !important;
width: stretch !important;
}
.class {
min-block-size: -webkit-max-content;
min-block-size: -moz-max-content;
min-block-size: max-content;
}
.class {
min-inline-size: -webkit-max-content;
min-inline-size: -moz-max-content;
min-inline-size: max-content;
}
.class {
width: max(250px, 100px);
}
.class {
height: min(150px, 200px);
}
.class {
min-width: min(100px, 50px);
}
.class {
max-width: max(150px, 200px);
}
.class {
min-height: max(100px, 50px);
}
.class {
max-height: min(150px, 200px);
}

110
crates/swc_css_prefixer/tests/fixture/writing-mode/output.defaults-not-ie-11.css Normal file
View File

@ -0,0 +1,110 @@
.one {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
.two {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.three {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.rtl-vertical-rl {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
direction: rtl;
}
.rtl-vertical-lr {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: bt-lr;
writing-mode: vertical-lr;
direction: rtl;
}
.rtl-horizontal-tb {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
.rtl-horizontal-tb-override-direction {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
direction: rtl;
direction: ltr;
}
.class {
-webkit-writing-mode: none;
-ms-writing-mode: none;
writing-mode: none;
}
.class {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.class {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.class {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
.class {
-webkit-writing-mode: sideways-rl;
writing-mode: sideways-rl;
}
.class {
-webkit-writing-mode: sideways-lr;
writing-mode: sideways-lr;
}
@-ms-viewport{
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
@-o-viewport{
writing-mode: horizontal-tb;
direction: rtl;
}
@viewport{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
@-webkit-keyframes test {
100% {
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
}
@-moz-keyframes test {
100% {
writing-mode: horizontal-tb;
direction: rtl;
}
}
@-o-keyframes test {
100% {
writing-mode: horizontal-tb;
direction: rtl;
}
}
@keyframes test {
100% {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
writing-mode: horizontal-tb;
direction: rtl;
}
}

32
crates/swc_css_prefixer/tests/prefixer.rs
View File

@ -7,19 +7,23 @@
use std::path::PathBuf;
use preset_env_base::query::{Query, Targets};
use swc_css_ast::Stylesheet;
use swc_css_codegen::{
writer::basic::{BasicCssWriter, BasicCssWriterConfig},
CodegenConfig, Emit,
};
use swc_css_parser::{parse_file, parser::ParserConfig};
use swc_css_prefixer::prefixer;
use swc_css_prefixer::{options::Options, prefixer};
use swc_css_visit::VisitMutWith;
use testing::NormalizedOutput;
#[testing::fixture("tests/fixture/**/input.css")]
fn fixture(input: PathBuf) {
let output = input.parent().unwrap().join("output.css");
fn prefix(input: PathBuf, options: Options, suffix: Option<&str>) {
let parent = input.parent().unwrap();
let output = match suffix {
Some(suffix) => parent.join("output.".to_owned() + suffix + ".css"),
_ => parent.join("output.css"),
};
testing::run_test2(false, |cm, handler| {
//
@ -38,7 +42,7 @@ fn fixture(input: PathBuf) {
err.to_diagnostics(&handler).emit();
}
ss.visit_mut_with(&mut prefixer());
ss.visit_mut_with(&mut prefixer(options));
let mut s = String::new();
{
@ -55,3 +59,21 @@ fn fixture(input: PathBuf) {
})
.unwrap();
}
#[testing::fixture("tests/fixture/**/input.css")]
fn test_without_env(input: PathBuf) {
prefix(input, Options::default(), None)
}
#[testing::fixture("tests/fixture/**/input.css")]
fn test_with_env(input: PathBuf) {
prefix(
input,
Options {
env: Some(Targets::Query(Query::Single(String::from(
"defaults, not IE 11",
)))),
},
Some("defaults-not-ie-11"),
)
}