swc/crates/swc_css_parser/tests/fixture/at-rule/container/input.css

@container (width <= 150px) {
    #inner {
        background-color: skyblue;
    }
}

@supports (container-type: size) {
    @container ( width <= 150px ) {
        #inner {
            background-color: skyblue;
        }
    }
}

@container not (width <= 500px ) {
    #inner {
        background-color: skyblue;
    }
}

@container name not (width <= 500px) {
    #inner {
        background-color: skyblue;
    }
}

main, aside {
    container: my-layout / inline-size;
}

.media-object {
    display: grid;
    grid-template: 'img' auto 'content' auto / 100%;
}

@container my-layout (inline-size > 45em) {
    .media-object {
        grid-template: 'img content' auto / auto 1fr;
    }
}

@container card (inline-size > 30em) and style(--responsive: true) {
    .card { margin-block: 2em; }
}

@container card (inline-size > 30em) or style(--responsive: true) {
    .card { margin-block: 2em; }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqw); }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqh); }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqi); }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqb); }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqmin); }
}

@container (inline-size >= 0px) {
    h2 { font-size: calc(1.2em + 1cqmax); }
}

@media screen {
    @container card (inline-size > 30em) and (inline-size < 45em) {
        h2 { font-size: calc(1.2em + 1cqmax); }
    }
}

@container (100px > width > 150px) {
    #inner {
        background-color: skyblue;
    }
}

@container (not (width <= 150px)) {
    #inner {
        background-color: skyblue;
    }
}

@container ((width <= 150px)) {
    #inner {
        background-color: skyblue;
    }
}

@container (min-width: 700px) {
    .card {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}


@container sidebar (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

@container test style(--responsive: true) {
    #inner {
        background-color: skyblue;
    }
}

@container style(--responsive: true) {
    #inner {
        background-color: skyblue;
    }
}

@container card (inline-size > 30em) {
    @container style(--responsive: true) {
        #inner {
            background-color: skyblue;
        }
    }
}

@container(inline-size>=calc(200px)){h2{font-size:calc(1.2em + 1cqi)}}

@container ( WIDTH <= 150px ) {
    #inner {
        background-color: skyblue;
    }
}