postcss.config.js does not support MJS (ES modules)?

Question

I have webpack.config.js in MJS (ES modules) and Im loading custom postcss file using:

{ loader : 'postcss-loader', options : { postcssOptions : { config : './webpack/custom-postcss-config.js', colorMode : colorMode } } },

CJS custom-postcss-config.js:

... many other lines not important for now

console.log("postcss file used");

module.exports = (api) => {
  console.log("postcss function used");

  var colorMode = api.options.colorMode;
  
  return {
      plugins : [
          ...
          ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
          ...
      ]
  }
};

MJS custom-postcss-config.js:

... many other lines not important for now

console.log("postcss file used");

export default (api) => {
  console.log("postcss function used");

  var colorMode = api.options.colorMode;
  
  return {
      plugins : [
          ...
          ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
          ...
      ]
  }
};

When used project as CJS it works well both console.log("postcss file used") and console.log("postcss function used") runs. But when switching project to MJS (type:module in package.json + appropriate changes in files, now console.log("postcss file used") runs but console.log("postcss function used") does not run. I do not know why, there is no error on console, webpack compiles successfully but final CSS bundle is not postcss processed at all. I using all packages with latest versions nowadays. Postcss loader and cosmiconfig had problems in the past but I have seen commits late 1-2 years that they added support for MJS (ES modules).

Note that Im exporting webpack config and also postcss config as function due to passing params (light/dark mode).

Answer 1

Thanks to mention https://github.com/webpack-contrib/postcss-loader/issues/192#issuecomment-300287617 here from 2017

So you need also to require postcss.config.js manually and assign it to loader options property.

I added in webpack config import CustomPostcssConfig from './custom-postcss-config.js'; and changed loader code to:

{ loader : 'postcss-loader', options : { postcssOptions : CustomPostcssConfig(colorMode) } }

Now Im able to use only MJS code in webpack config and in postcss config and postcss processing works well like in CJS project version.

MJS custom-postcss-config.js now:

... many other lines not important for now

console.log("postcss file used");

export default (colorMode) => { // note that "api" param changes directly to colorMode
  console.log("postcss function used");

  return {
      plugins : [
          ...
          ['postcss-custom-properties', { importFrom : '.....my ' + colorMode + ' file.....', preserve : false }],
          ...
      ]
  }
};

Btw 'postcss-custom-properties' does not support importFrom now, so Im using '@csstools/postcss-global-data' in the fact.