Moves responsive image CSS back into attribute

[fionawhim]

Description

This PR reverts a part of #14816 that moved the image styles into a <style>
tag in the head. Per this comment from @JoshuaWalsh, putting the styles
in the was just a cleanliness improvement, and did not affect the
functionality that #14816 was addressing:

#14816 (comment)

Reverting this PR allows the responsive images to display correctly when
the Remark HTML is displayed outside of the Gatsby layout, such as in
an RSS feed.

Related Issues

Fixes #17593

[pvdz]

Ah sounds like a good fix :)

One semantic change is that before it was creating a css class that could apply to multiple elements. Afterwards this code is duplicated if multiple elements want to use it.

I understand if this image is never intended to be re-used by multiple elements, it's just not clear in this PR. Can you confirm please?

[pvdz]

Isn't this just .replace(/\s*/g, '') ? Or are we defensive about future updates where certain rules may be whitespace sensitive.

[pvdz]

(Also, if you're stripping whitespace anyways, it's probably nice to have the closing backtick on the next line, aligned with the const.)

[fionawhim]

Thanks for the review!

Not sure about the regexp. I copied it in from the older version of the file. I think being defensive here is a good move, though.

Since the regexp only strips before the CSS property name and between the colon and the value, it doesn’t strip the newline after the last line, so leaving backtick as-is.

[vladar]

Looks good to me. But tests are failing. You will have to re-run them with --updateSnapshot.

[fionawhim]

@pvdz I can’t say if anyone has started to put gatsby-resp-image-image as a class on other elements not generated by this plugin between July when the <style> tag was first added and now. This would be a breaking change for those people, I suppose.

@vladar Thanks for the review! I updated the snapshots and pushed to this branch.

[pvdz]

oki :)