New `nanocolors` dependency in version 9.8.7 breaks GatsbyJS builds

[pedrosousa]

autoprefixer is a sub-dependency of our Gatsby-generated docs, due to the gatsby and gatsby-plugin-material-ui dependencies.

The new nanocolors dependency, introduced in autoprefixer 9.8.7, broke our GatsbyJS builds with the following error:

  13 |
  14 | var HIGHLIGHT_THEME = {
> 15 |   brackets: _nanocolors.default.cyan,
     | ^
  16 |   'at-word': _nanocolors.default.cyan,
  17 |   comment: _nanocolors.default.gray,
  18 |   string: _nanocolors.default.green,

  WebpackError:TypeError: Cannot read property 'cyan' of undefined

  - terminal-highlight.js:15 
    node_modules/postcss/lib/terminal-highlight.js:15:1

  - css-syntax-error.js:8 
    node_modules/postcss/lib/css-syntax-error.js:8:49

  - node.js:6 
    node_modules/postcss/lib/node.js:6:46

  - declaration.js:6 
    node_modules/postcss/lib/declaration.js:6:36

  - postcss.js:6 
    node_modules/postcss/lib/postcss.js:6:43

  - autoprefixer.js:8 
    node_modules/gatsby-plugin-material-ui/autoprefixer.js:8:39

  - gatsby-ssr.js:18 
    node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:18:44

Example workflow run: https://github.com/cloudflare/cloudflare-docs/runs/3723763654?check_suite_focus=true

Excluding the gatsby-plugin-material-ui plugin seems to fix the issue, but we'd like to keep using it.

This can probably be solved by some sort of webpack custom configuration (the error seems related to both webpack and nanocolors). Do you have any idea on what may be causing this issue?

[ai]

Hi. Thanks for the report. I will try to fix it in a few minutes.

Am I right that you are compiling PostCSS & Autoprefixer into JS bundle and error came from this bundle?

[ai]

I prepared a fix https://github.com/ai/nanocolors/commit/a19efb118fff26fe3ca2e741995a7930ad697bb0

I will release it when you confirm that bug happens in JS bundle

[gganch]

The error occurs when running gatsby develop

[ai]

Sorry, I am not familiar with Gatsby.

What gatsby develop does?

[ai]

Can you try update dependency to use nanocolors 0.2.11?

[gganch]

gatsby develop does create a JS bundle and I believe that error came from that bundle

[ai]

Thanks. nanocolors 0.2.11 should fix it.

[gganch]

how long do you think this will take to be updated?

[ai]

@gganch Autoprefixer 9 has "nanocolors": "^0.2.1" in dependencies, so new 0.2.11 match this requirements. There is nothing to do from Autoprefixer side.

You need to update nanocolors in your yarn.lock or package-lock.json. There are few options:

1. Call npm update or yarn update if your updating your dependencies often.
2. Install nanocolors manually to trigger the update: npm install nanocolors && npm uninstall nanocolors should trigger the update.
3. There is also a plenty CLI tools to update nested dependencies.