Open freecyber opened 10 years ago
Confirmed, I just ran into the same exact issue.
The same happens for @viewport
rules. Here is a simple test case:
Given the CSS input:
@media screen and (max-aspect-ratio: 10/9) {
@viewport {width: 500px;}
@-webkit-viewport {width: 500px}
@-ms-viewport {width: 500px}
}
When running cssbeautify, the expected outcome would be:
@media screen and (max-aspect-ratio: 10/9) {
@viewport {
width: 500px;
}
@-webkit-viewport {
width: 500px
}
@-ms-viewport {
width: 500px
}
}
However, the outcome is:
@media screen and (max-aspect-ratio: 10/9) {
@ viewport {
width: 500px;
}
@ -webkit-viewport {
width: 500px
}
@ -ms-viewport {
width: 500px
}
}
I've just run into this too... and swapped to using beautify-css
instead.
Consider the following snippet extracted from GitLab v16.6.1:
@media print{@keyframes gl-spinner-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes gl-keyframes-skeleton-loader{0%{background-position-x:-32rem}100%{background-position-x:32rem}}}
Running cssbeautify on this results in the following:
@media print {
@ keyframes gl-spinner-rotate {
0%{transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@keyframes gl-keyframes-skeleton-loader {
0% {
background-position-x: -32rem
}
100% {
background-position-x: 32rem
}
}}
Where the following was expected:
@media print {
@keyframes gl-spinner-rotate {
0% {
transform:rotate(0)
}
100% {
transform:rotate(360deg)
}
}
@keyframes gl-keyframes-skeleton-loader {
0% {
background-position-x:-32rem
}
100% {
background-position-x:32rem
}
}
}
beautifies to
and other nested @-rules have the same issue (separation of the "@" and loss of one level of indentation).
I'm reporting this because @-rules such as @media, @keyframes, and @font-face are fairly common inside @-moz-document in user styles at userstyles.org
Bugzilla thread/post with links to documentation of nested @-rules
This is my first post on github - I hope I didn't do anything wrong. Please let me know if I did.