[gatsby-remark-images] null CSS style in "gatsby-resp-image-wrapper" span node

[cmdalbem]

Description

I'm getting an error span[style]:1:43: property missing ':' when trying to use gatsby-remark-images with the showCaptions option turned ON. It completely breaks my website :(

Looking at what Gatsby spits in the system console I think I found the problem: there's a null in the middle of the CSS styles of the gatsby-resp-image-wrapper node:

Steps to reproduce

I've created a branch where the bug is happening: https://github.com/cmdalbem/portfolio/tree/temp/remark_images_caption_bug The problem happens in the http://localhost:8000/guitar-songs-viz/ page.

Expected result

Page should be rendered normally and images should have a caption.

Actual result

Screen is blank and errors are shown in the console.

Environment

 System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.2 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.67
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.0 => 2.0.8
    gatsby-image: ^2.0.10 => 2.0.13
    gatsby-plugin-catch-links: ^2.0.3 => 2.0.4
    gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6
    gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
    gatsby-plugin-manifest: ^2.0.2 => 2.0.3
    gatsby-plugin-offline: ^2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^2.0.5 => 2.0.6
    gatsby-remark-component: ^1.1.3 => 1.1.3
    gatsby-remark-images: ^2.0.3 => 2.0.3
    gatsby-remark-images-grid: ^1.0.2 => 1.0.2
    gatsby-remark-reading-time: ^1.0.1 => 1.0.1
    gatsby-remark-smartypants: ^2.0.5 => 2.0.5
    gatsby-source-filesystem: ^2.0.1 => 2.0.2
    gatsby-transformer-remark: ^2.1.6 => 2.1.6
    gatsby-transformer-sharp: ^2.1.3 => 2.1.3
  npmGlobalPackages:
    gatsby-cli: 2.4.3

[kakadiadarpan]

@cmdalbem I updated the Gatsby and packages to their latest version in your repo and that resolved the issue for me. Please update the following dependencies, that will resolve your issue:

[cmdalbem]

wow awesome @kakadiadarpan , thanks ✨

[LiangNex]

This 🐛 persists after upgrading gatsby-remark-imges to the latest version if below 2 options present:

linkImagesToOriginal: true,
wrapperStyle: true,

Removing them works for me currently...