how-it-works.md

How it works

It basically runs in three steps:

Step 1

If the preprocess configuration is set, it looks for stylesheets that contain container queries and escapes them to be readable by the browser.

E.g. this:

.element:container(width >= 10px) {
	color: red;
}

gets converted to this:

.element.\:container\(width\>\=10px\) {
	color: red;
}

This step should be done by the PostCSS plugin on the server side to speed up the script. Client side processing is meant for demonstration purposes.

Step 2

Parses all (pre)processed container query rules and stores them indexed by the preceding selector to be used in step 3.

Step 3

Loops through all stored queries and adds or removes the CSS classes of the matching elements. The added CSS classes look the same as the container query itself to improve the readability in the developer tools of the browser. E.g.:

<div class="element :container(width>=10px)"></div>