fix: silent error (giuseppeg#38)

This can happen with invalid postcss config

Fixes giuseppeg#37

* fix error handling for css syntax error
* add message about Next.js 9 non standard postcss config

Author: ramasilveyra

fixture-invalid-config/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['mock-plugin']
+}

index.js

@@ -1,4 +1,3 @@
-
 const { spawnSync } = require('child_process');
 const path = require('path');
 
@@ -7,21 +6,24 @@ module.exports = (css, settings) => {
     .replace(/%%styled-jsx-placeholder-(\d+)%%/g, (_, id) =>
       `/*%%styled-jsx-placeholder-${id}%%*/`
     )
-  const result = spawnSync("node",[path.resolve(__dirname, "processor.js")],{
+
+  const result = spawnSync('node', [path.resolve(__dirname, 'processor.js')], {
     input: JSON.stringify({
       css: cssWithPlaceholders,
       settings
     }),
-    encoding: "utf8"
-  });
+    encoding: 'utf8'
+  })
 
-  processedCss = result.stdout
+  if (result.stderr) {
+    if (result.stderr.includes('Invalid PostCSS Plugin')) {
+      console.error('Next.js 9 default postcss support uses a non standard postcss config schema https://err.sh/next.js/postcss-shape, you must use the interoperable object-based format instead https://nextjs.org/docs/advanced-features/customizing-postcss-config')
+    }
 
-  if (processedCss instanceof Error || processedCss.name === 'CssSyntaxError') {
-    throw processedCss
+    throw new Error(`postcss failed with ${result.stderr}`)
   }
 
-  return processedCss
+  return result.stdout
     .replace(/\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g, (_, id) =>
       `%%styled-jsx-placeholder-${id}%%`
     )

processor.js

@@ -26,16 +26,21 @@ function processor(src, options) {
     .then(result => result.css)
 }
 
-let input = "";
-process.stdin.on("data", (data) => {
-  input += data.toString();
-});
+let input = ''
+process.stdin.on('data', data => {
+  input += data.toString()
+})
 
-process.stdin.on("end", () => {
+process.stdin.on('end', () => {
   const inputData = JSON.parse(input)
-  processor(inputData.css, inputData.settings).then(function(result){
-    process.stdout.write(result)
-  })
+  processor(inputData.css, inputData.settings)
+    .then(result => {
+      process.stdout.write(result)
+    })
+    .catch(err => {
+      // NOTE: we console.erorr(err) and then process.exit(1) instead of throwing the error
+      // to avoid the UnhandledPromiseRejectionWarning message.
+      console.error(err)
+      process.exit(1)
+    })
 })
-
-// module.exports = processor

test.js

@@ -1,4 +1,5 @@
 const assert = require('assert')
+const path = require('path')
 const plugin = require('./')
 
 describe('styled-jsx-plugin-postcss', () => {
@@ -27,7 +28,7 @@ describe('styled-jsx-plugin-postcss', () => {
     )
   })
 
-  it("works with quotes and other characters", () => {
+  it('works with quotes and other characters', () => {
     assert.equal(
       plugin(`@import "./fixture.css"; * { color: red; font-family: 'Times New Roman'; }
       li:after{ content: "!@#$%^&*()_+"}
@@ -36,4 +37,29 @@ describe('styled-jsx-plugin-postcss', () => {
     )
   })
 
+  it('throws with invalid css', () => {
+    assert.throws(
+      () => {
+        plugin('a {\n  content: "\n}')
+      },
+      {
+        name: 'Error',
+        message: /postcss failed with CssSyntaxError: <css input>:2:12: Unclosed string/
+      }
+    )
+  })
+
+  it('throws with invalid config', () => {
+    assert.throws(
+      () => {
+        plugin('p { color: color-mod(red alpha(90%)); & img { display: block } }', {
+          path: path.resolve('fixture-invalid-config')
+        })
+      },
+      {
+        name: 'Error',
+        message: /postcss failed with TypeError: Invalid PostCSS Plugin found: \[0\]/
+      }
+    )
+  })
 })