Random classes picked up by json.

[christianmagill]

Sorry, accidentally posted before entering description

I've been trying to get container-query working with the Roots/Sage WordPress theme which uses Webpack.

For some reason the Json is picking up other classes from the css that do not use the @container rule.

I setup a very simple box example with the .box class... you can see what resulted below, where it's picking up on some additional foundation classes.

{"e":".reveal, .reveal.tiny, .reveal.small, .reveal.large","f":[{"b":[{"e":".box","d":{"background":"green"}},{"e":".box__image","d":{"display":"block"}}],"a":[[["width",">=",200]]]},{"b":[{"e":".box__title","c":{"font-size":"10rh"}}]}]}

[ZeeCoder]

I'm not sure what you mean?

[christianmagill]

I'm using this Javascript to load which is causing issues, possibly because of the json output.

import Container from "@zeecoder/postcss-container-query";
import meta from "../../styles/main.scss.json";

// Initialising all containers by finding all instances based on the selectors
for (let containerSelector in meta) {
  document.querySelectorAll(containerSelector).forEach(element => {
    // Initialising all HTML Elements with the right json metadata
    new Container(element, meta[containerSelector]);
  });
}

containerSelector ends up with "e" and "f" rather than the actual selector.

[ZeeCoder]

Seems like you don't use the right module for the right task.
postcss-container-query creates the JSON, while container-query is the runtime counterpart.

So in this case, you want to generate the json with postcss-container-query with either the webpack postcss-loader, or by using some other task runner, and then your javascript can take that JSON, and initialise the import Container from '@zeecoder/container-query' runtime.

The first line therefore definitely shouldn't have postcss-container-query, but the regular container-query instead.

What do you use for js bundling?

[christianmagill]

Good catch on the javascript side of things.

I use Webpack for bundling.

Sage uses "postcss-loader", so postcss-container-query is added to my postcss.config.json file as follows...

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      '@zeecoder/postcss-container-query': true,
      autoprefixer: true,
    },
  };
};

[ZeeCoder]

That seems ok, so I assume "../../styles/main.scss.json" is the json meta that's being generated, right?
Are you planning to use multiple containers in that main.scss?

It seems to me that you're following a style where you have a "main" file that imports other files (maybe bem blocks or somethings else?), which would mean that you'd have multiple different containers essentially in the same file.

By default, the postcss plugin expects a single container in a single file, but you can override this behaviour: https://github.com/ZeeCoder/container-query/blob/master/docs/multiple-containers.md

[christianmagill]

Thanks for all your help. Yes, that's exactly how my project is setup. How can I set the singleContainer option to false in my postcss configuration above?

[christianmagill]

Alright, looks like I got it working with the below:

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      'postcss-nested': {bubble: ["container"]},
      '@zeecoder/postcss-container-query': {singleContainer: false},
      autoprefixer: true,
    },
  };
};

[ZeeCoder]

Is everything working now then @christianmagill ?

[christianmagill]

Yes, all seems to be working well now. Thanks