swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-10-04 12:18:08 +03:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(css/prefixer): Fix more bugs (#4330)

Browse Source
This commit is contained in:
Alexander Akait 2022-04-14 07:10:30 +03:00 committed by GitHub
parent 845312ee45
commit 405e5ed0b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 1270 additions and 516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

4
crates/swc_css_prefixer/tests/fixture/display/input.css
View File

@ -13,3 +13,7 @@
.class {
display: flex;
}
:fullscreen a {
display: flex;
}

20
crates/swc_css_prefixer/tests/fixture/display/output.css
View File

@ -22,3 +22,23 @@
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;
}

13
crates/swc_css_prefixer/tests/fixture/duplicate-at-rule/input.css Normal file
View File

@ -0,0 +1,13 @@
@-webkit-keyframes anim {}
@keyframes anim {}
@-webkit-keyframes anim {
0% {
color: red
}
}
@keyframes anim {
0% {
color: red
}
}

24
crates/swc_css_prefixer/tests/fixture/duplicate-at-rule/output.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;
}
}

1
crates/swc_css_prefixer/tests/fixture/grouping-rule/output.css
View File

@ -81,7 +81,6 @@
background-color: red;
}
.c::-moz-selection {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
backface-visibility: visible;
}

23
crates/swc_css_prefixer/tests/fixture/keyframes/output.css
View File

@ -1,7 +1,6 @@
@-webkit-keyframes anim {
from {
top: -webkit-calc(10% + 10px);
top: -moz-calc(10% + 10px);
top: calc(10% + 10px);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
@ -10,13 +9,10 @@
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%);
-webkit-transform: rotate(0);
transform: rotate(0);
@ -24,7 +20,6 @@
}
@-moz-keyframes anim {
from {
top: -webkit-calc(10% + 10px);
top: -moz-calc(10% + 10px);
top: calc(10% + 10px);
-moz-transform: rotate(10deg);
@ -32,14 +27,10 @@
}
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%);
-moz-transform: rotate(0);
@ -48,23 +39,15 @@
}
@-o-keyframes anim {
from {
top: -webkit-calc(10% + 10px);
top: -moz-calc(10% + 10px);
top: calc(10% + 10px);
-o-transform: rotate(10deg);
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%);
-o-transform: rotate(0);
transform: rotate(0);
@ -98,10 +81,10 @@
transform: rotate(0);
}
}
@-webkit-keyframes inside {}
@-moz-keyframes inside {}
@-o-keyframes inside {}
@media screen {
@-webkit-keyframes inside {}
@-moz-keyframes inside {}
@-o-keyframes inside {}
@keyframes inside {}
}
@-webkit-keyframes spaces {

108
crates/swc_css_prefixer/tests/fixture/nested/input.css Normal file
View File

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

259
crates/swc_css_prefixer/tests/fixture/nested/output.css Normal file
View File

@ -0,0 +1,259 @@
@-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 {
-moz-appearance: auto;
appearance: auto;
}
&.class::-moz-placeholder {
-moz-appearance: auto;
appearance: auto;
}
&.class:-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
.test {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
&.class {
color: red;
}
}
.test {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
.test {
@supports (foo: bar) {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
.test {
@media (orientation: landscape) {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
.test {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
&.class::-webkit-input-placeholder {
-webkit-appearance: auto;
appearance: auto;
}
&.class:-moz-placeholder {
-moz-appearance: auto;
appearance: auto;
}
&.class::-moz-placeholder {
-moz-appearance: auto;
appearance: auto;
}
&.class:-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
@media (orientation: landscape) {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
@media (orientation: landscape) {
.test {
&.class::-webkit-input-placeholder {
-webkit-appearance: auto;
appearance: auto;
}
&.class:-moz-placeholder {
-moz-appearance: auto;
appearance: auto;
}
&.class::-moz-placeholder {
-moz-appearance: auto;
appearance: auto;
}
&.class:-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::-ms-input-placeholder {
-ms-appearance: auto;
appearance: auto;
}
&.class::placeholder {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
}
@media (orientation: landscape) {
.test {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
}
}
}
.test {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
&.class {
-webkit-appearance: auto;
-moz-appearance: auto;
-ms-appearance: auto;
appearance: auto;
&.class {
-webkit-appearance: menulist-button;
-moz-appearance: menulist-button;
-ms-appearance: menulist-button;
appearance: menulist-button;
&.class {
-webkit-appearance: button;
-moz-appearance: button;
-ms-appearance: button;
appearance: button;
}
}
}
}

8
crates/swc_css_prefixer/tests/fixture/placeholder/input.css
View File

@ -5,3 +5,11 @@ input::placeholder {
input::placeholder, #fs-toggle:fullscreen {
color: red;
}
input::placeholder {
backdrop-filter: blur(2px);
}
input.appearance::placeholder {
appearance: none;
}

46
crates/swc_css_prefixer/tests/fixture/placeholder/output.css
View File

@ -40,3 +40,49 @@ 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 {
-moz-appearance: none;
appearance: none;
}
input.appearance::-moz-placeholder {
-moz-appearance: none;
appearance: none;
}
input.appearance:-ms-input-placeholder {
-ms-appearance: none;
appearance: none;
}
input.appearance::-ms-input-placeholder {
-ms-appearance: none;
appearance: none;
}
input.appearance::placeholder {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}

9
crates/swc_css_prefixer/tests/fixture/prefixed/input.css
View File

@ -95,3 +95,12 @@
-ms-flex-line-pack: end;
align-content: flex-start;
}
.class-19 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}

11
crates/swc_css_prefixer/tests/fixture/prefixed/output.css
View File

@ -120,3 +120,14 @@
-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;
}

33
crates/swc_css_prefixer/tests/fixture/style-block/input.css Normal file
View File

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

48
crates/swc_css_prefixer/tests/fixture/style-block/output.css Normal file
View File

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