v8.0.0 doesn’t work with CJS

[valtlai]

The version 8.0.0 doesn’t work when using CJS. That’s because there’s no a default export (module.exports) but an export called default (i.e. module.exports.default). This means the plugin can’t be used with postcss-load-config configured with package.json, for example.

Here’s a test code:

const postcss = require('postcss');
const nesting = require('postcss-nesting');

const css = `
a, b {
  color: red;

  & c, & d {
    color: white;
  }
}
`;

postcss([nesting]).process(css, { from: undefined })
  .then((result) => console.log(result.css));

And here’s the result when running it from a CLI:

$ node .
/Users/x/postcss-nesting-test/node_modules/postcss/lib/processor.js:60
        throw new Error(i + ' is not a PostCSS plugin')
        ^

Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/x/postcss-nesting-test/node_modules/postcss/lib/processor.js:60:15)
    at new Processor (/Users/x/postcss-nesting-test/node_modules/postcss/lib/processor.js:9:25)
    at postcss (/Users/x/postcss-nesting-test/node_modules/postcss/lib/postcss.js:25:10)
    at Object.<anonymous> (/Users/x/postcss-nesting-test/index.js:14:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:828:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47

If I import the default property:

- const nesting = require('postcss-nesting');
+ const nesting = require('postcss-nesting').default;

it works as expected:

$ node .

a, b {
  color: red
}
a c, a d, b c, b d {
    color: white;
  }

[jonathantneal]

Thanks for reporting this. I’m sorry about this. I will try to get out a fix tonight.

For those interested in more technical details — this issue was able to sneak thru because of a flaw in my testing.

• First, testing is done in an ESM environment using the source. I would be interested in a testing apparatus that can check both ESM and CJS imports.

• When testing in a plain environment, the environment was ESM. When testing in NextJS — which I presumed to be a CJS environment — I discovered that NextJS was not compatible with PostCSS 8 style plugins. I quickly rolled out a separate postcss-nesting/postcss-7 version for NextJS. Therefore, a plain CJS environment was never properly tested.

[bcomnes]

Running into this issue with the post-css cli.

I've run into a similar problem before, and solution I found was to cross compile ESM tests to CJS tests, and then running both with a testing glob. It's an additional issue with offering both ESM and CJS support, but a surprising number of issues can easily be missed if you don't run the tests on both artifacts. Example here:

https://github.com/bcomnes/esm-template/blob/972c91c73be598bbda3adf2456cd3116bed7b754/package.json#L42

Tap runs all *.test.js files it finds, and my esm to cjs build process also builds tests over to cjs.

[nghiepdev]

I'm having the same issue.

[ehoogeveen-medweb]

FWIW, postcss-at-rules-variables had a very similar issue when they upgraded to PostCSS 8. I don't know if there are enough similarities to take inspiration from, but I thought it was worth mentioning.

[josineto]

I have this issue too, but running with postcss-cli. Using @valtlai workaround (require('postcss-nesting').default) makes it work for now.

[bcomnes]

I have this issue too, but running with postcss-cli. Using @valtlai workaround (require('postcss-nesting').default) makes it work for now.

Can you post an example config file you are doing this in?

[josineto]

Here is my postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-custom-properties'),
    require('tailwindcss'),
    require('postcss-nesting').default,
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ]
}

In fact, as soon as I tried to deploy my site, I faced an error in Netlify build log, but I think it's not related with this, as I tried to change to postcss-nested just to face same error (as I explain in a Tailwind discussion).

[jonathantneal]

This was an issue in the build for CommonJS that should now be resolved in v8.0.1.

https://github.com/csstools/postcss-nesting/releases/tag/8.0.1

[ehoogeveen-medweb]

I can confirm that things work again with my setup, thank you!