Nested @-rules

[freecyber]

@-moz-document domain(foo.com){ 
@media (min-width:30em){x{foo:bar}
}
}

beautifies to

@-moz-document domain(foo.com) {
 @    media (min-width:30em) {
        x{foo: bar;
    }
}
}

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.

[danny-englander]

Confirmed, I just ran into the same exact issue.

[Kilian]

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
    }
}

[attie-argentum]

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
        }
    }
}