This document describes the parts required to create a JavaScript function for evaluating container queries, and this document itself is also executable JavaScript code for such a plugin. By the time you are finished reading this document you should not only understand how container queries work, but have read the source code to a usable, testable container queries function.

/* To define a */ function /* for */ containerQueries /* we will need to supply a */ (selectorList, /* of CSS selectors to match elements in the document, a JavaScript function to serve as a */ test, /* to determine which elements our styles should apply to, and a */ stylesheet) /* with the CSS we wish to apply to all elements passing the test. */ {

/* Inside of our function we need to define a */ var /* for all */ matchingTags /* that is */ = /* to taking the */ document /* and running a */ .querySelectorAll /* for the */ (selectorList); /* supplied to the function. */

/* Next we can create a */ var /* to keep track of our */ generatedCSS /* that is */ = /* to a */ new String;

/* The last piece of setup we require is a */ var /* to keep track of our current element */ count /* that is */ = /* to */ 0;

/* Now we are ready to take all */ matchingTags /* and run the following logic */ .forEach( tag => {

/* The first thing we need to create for each tag is a new */ var /* called */ uniqueAttribute /* that is */ = /* to the text of our */ (selectorList + test) /* added together, with all non-Word characters removed. We can do this with a */ .replace /* using the regular expression */ (/\W+/g, /* and swapping every non-Word character you find with */ '' /* , the empty string */ );

/* Now we're ready to test each of our tags! */ if /* we */ (test /* the current */ (tag) /* and the result is */ == /* to */ true) /* then we can go ahead with the following three actions: */ {

/* First we will take the */ tag /* that passes our test and */ .setAttribute /* equal to */ ('data-' + /* our */ uniqueAttribute, /* and set this attribute to the current */ count);

/* Second we will take our */ generatedCSS /* and make sure it is */ = /* to the existing */ generatedCSS + /* the supplied */ stylesheet /* with all instances of "$this" replaced with a selector using our unique attribute. We can do this with a a */ .replace /* using the following regular expression */ (/\$this/g, /* and swapping each instance with */ '[data-' + /* our */ uniqueAttribute + '="' + /* our current matching tag */ count + '"]');

/* Third, we will increment the */ count++; /* of matching tags by 1. */

} /* This ends the three things we do to each tag passing the test. */

if /* we */ (test /* the current */ (tag) /* and the result is */ == /* to */ false) /* then we need to take the */ tag /* failing our test and */ .setAttribute /* equal to */ ('data-' + /* our */ uniqueAttribute, /* and remove any pre-existing value with */ '');

}) /* This ends the logic we run for each matching tag. */

/* The last thing we need to do is */ return /* all of our */ generatedCSS

} /* And this ends our container queries function */

The above code, run through uglifyjs and then prettier outputs the following JS code:

function containerQueries(selectorList, test, stylesheet) {
  var matchingTags = document.querySelectorAll(selectorList);
  var generatedCSS = new String();
  var count = 0;
  matchingTags.forEach(tag => {
    var uniqueAttribute = (selectorList + test).replace(/\W+/g, "");
    if (test(tag) == true) {
      tag.setAttribute("data-" + uniqueAttribute, count);
      generatedCSS =
        generatedCSS +
        stylesheet.replace(
          /\$this/g,
          "[data-" + uniqueAttribute + '="' + count + '"]'
        );
      count++;
    }
    if (test(tag) == false) tag.setAttribute("data-" + uniqueAttribute, "");
  });
  return generatedCSS;
}

And a short test of the plugin:

Click here for a slightly cleaner version of this plugin written in ES5 and ES6

And here's a flowchart of the logic: