Adding PostCSS container query package

O…kay, so bare with me here. Let me first state my goal: Container queries are getting more support, with only Firefox lagging behind. I’m trying to put a p(r)olyfill in place to shore up that support. I’m using webpack. I’m using this documentation page.

I have done the npm install, as well as adding the .postcssrc to the root directory. I’m guessing I’m failing at the config setup. We code in scss files and then in our main.scss file, we import the other sass partials.

We have a webpack.common.js and then a webpack.development.js file. We also have a production version as well but for reasons I won’t get into, it’s broken right now. But ultimately, development/production webpack file imports the common file

const ev = require('../export-vars.js');
const path = require('path');

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

So, I was trying to see where I could adjust the config to run postcss. I found this in my webpack.common.js file…

module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },

I added in postcss-loader here in the above code. It originally only had style-loader and css-loader there. However, I get this error

ERROR in ./src/sass/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\postcss\lib\processor.js:145:15)
    at new Processor (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\postcss\lib\processor.js:51:25)
    at postcss (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\postcss\lib\postcss.js:73:10)
    at Promise.resolve.then.then (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\postcss-loader\lib\index.js:143:12)
    at runLoaders (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (C:\Users\Ryan\Desktop\Projects\figma-updates\node_modules\postcss-loader\lib\index.js:194:71)
 @ ./src/build.js 7:0-27
 @ multi ./src/build.js webpack-hot-middleware/client?reload=true

Trying to look up this error isn’t really helping.

I then tried going into webpack.development.js and found a module/rules object in there so I added postcss-loader in there

module: {
    rules: [
.....
      {
          test: /\.scss$/,
          use: ['postcss-loader'],
      },
    ],
  },

I get the same error. Basically, I’m unsure where to go from here. Any tips?

EDIT- Let me also state that I went down this rabbit hole since, when compiling my sass, and trying to test normal @container queries, the compiler was choking. So I was originally looking for a way to get sass to not choke while compiling. Possibly exclude that from the compilers?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.