Installing @zeecoder/postcss-container-query with Sage 9

Hi,

I’m attempting to setup the package “@zeecoder/postcss-container-query” with Sage 9 and am running into some trouble.

There’s some basic instructions here, however the postcss.config.js file is organized differently so I’m a little lost.

https://github.com/ZeeCoder/container-query/blob/master/docs/postcss.md

I’ve tried following an example for Tailwind elsewhere on the forum, putting their PostCSS config in a separate file and trying to add it with the line to the plugins section like

container: ${options.paths.assets}/build/postcss-container-query.config.js,

… but I’m not sure what the module name should be, or if this is even an appropriate format to use.

Any ideas how to make this work?

Thanks much for any help you can provide. :pray:

Hey Christian.

Within your postcss.config.js this should work:

    plugins: {
+    '@zeecoder/postcss-container-query': true,
      autoprefixer: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
    },

There’s no need to import it. For future reference plugins can be loaded like this:

plugins: {
  [full module name]: [options or boolean],
}

In the case with the Tailwind example, the expected value for the options is the path to the configuration file, whereas, this plugin doesn’t require any config so we can just set it as true.

Let me know if it works as I wasn’t able to test it.

Related docs for postcss-loader: https://github.com/postcss/postcss-loader#context-ctx

1 Like

Awesome! Much thanks for the help.

1 Like