v3.0.0 does not work

[u3u]

• behavior: output empty styles
• node: v10.16.0
• framework: next.js (v9.5.3)
• plugins: styled-jsx-plugin-sass (v1.0.0)

I tested the version using v2.x and it worked
Maybe related to #35 commit

[giuseppeg]

@tldrd0117 would it be possible for you to test this?

[tldrd0117]

i tested
I think this problem is Both use same postcss config file(postcss.config.js)

postcss-load-plugins

module.exports = {
  plugins: [require('postcss-plugin'), require('postcss-plugin-a')],
}
//or
module.exports (ctx)=> {
  plugins: [require('postcss-plugin'), require('postcss-plugin-a')],
}
//or
module.exports (ctx)=> {
  plugins: ['postcss-plugin', 'postcss-plugin-a'],
}

next.js postcss config only use {string}

module.exports = {
  plugins: ['postcss-plugin', 'postcss-plugin-a'],
}

[tldrd0117]

and you can use same config file “.postcssrc.json" in root folder
example

{
  "plugins": {
    "postcss-preset-env":{
      "autoprefixer": {}
    },
    ...postcss plugins
  }
}

[giuseppeg]

@u3u can you generate a new Next.js app, add only the amount of changes to reproduce the issue and push it to a github repository? I'd like to take a look and see what's going on.

[ramasilveyra]

I have the same issue.

Just found that on my side it happens because the child process exits with one error:

index:result.stderr (node:4602) UnhandledPromiseRejectionWarning: TypeError: Invalid PostCSS Plugin found: [0]
    at /Users/some-folder/node_modules/postcss-load-plugins/lib/plugins.js:32:17
    at Array.forEach (<anonymous>)
    at plugins (/Users/some-folder/node_modules/postcss-load-plugins/lib/plugins.js:21:15)
    at /Users/some-folder/node_modules/postcss-load-plugins/index.js:61:25
(node:4602) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:4602) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This happens because next 9 default postcss support uses a non standard postcss config schema: https://err.sh/next.js/postcss-shape.

So if you want to skip the default next 9 postcss support and use this plugin you have to use this shape:

Note: If your postcss.config.js needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

From: https://nextjs.org/docs/advanced-features/customizing-postcss-config.

Possible the only fix for styled-jsx-plugin-postcss@3 from this is to throw an exception when result.stderr has content to avoid silent errors.

[giuseppeg]

I just published 3.0.1 which includes @ramasilveyra's fix. Feel free to reopen if this is still an issue.