Draft for a Container Query PostCSS Plugin

With @create-container <sizes>; you can define that a specific selector acts as a main container on your page (e.g. sidebar, content, header). As <sizes> you set the size of this container as it will be in the rendered page, the syntax is the same as for the sizes attribute for images.

With @container (<query>) {} you can query against the size of the containers instead of the viewport. These queries will be translated to media queries with the container classes added.

Pros

• Doesn’t require a JavaScript runtime

Cons

• Containers should not be nested. If you nest them you have to define a container size for every nesting combination that can appear on your site. But it can still result in conflicting styles.
• You should not define too much containers as the size of the resulting CSS code grows with every container.

Example Input

.wrap1 {
    @create-container calc(50vw - 20px);
    width: 50%;
    padding: 10px;
}
.wrap2 {
    @create-container 33vw;
    width: 33%;
}
.wrap1 .wrap2 {
    @create-container {
        sizes: calc(50vw - 20px);
    };
    width: 100%;
}
@container (min-width: 200px) {
    .component {
        float: left;
    }
}

Example Output

.wrap1 {
    width: 50%;
    padding: 10px;
}
.wrap2 {
    width: 33%;
}
.wrap1 .wrap2 {
    width: 100%;
}
@media (min-width: 440px) {
    .wrap1 .component,
    .wrap1 .wrap2 .component {
        float: left;
    }
}
@media (min-width: 606px) {
    .wrap2 .component {
        float: left;
    }
}