Cursor pointer is missing when using (only) a Gatsby Image inside a Link

[laurenskling]

Description

When using a Gatsby Link with inside only a Gatsby Image (both the current and the new plugin alpha), the image doesn't get a pointer, and you can not activate it in css. I found it's due to the all: initial css value on .gatsby-image-wrapper img. I don't fully understand what all is and why it's needed, so I'm afraid of removing it.

Steps to reproduce

simply using a gatsby (sharp) image inside a gatsby link

<Link to="/">
  <Image image={image} />
<Link>

Checkout the car images at: https://artz-autos.nl/voorraad

Expected result

I'd like my image to have a pointer cursor.

Actual result

the default pointer is shown.

Environment

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.19.1 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1606398821360-0.9836721660831838/node
Yarn: 1.22.4 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1606398821360-0.9836721660831838/yarn
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.198
Safari: 14.0
npmPackages:
gatsby: ^2.27.0 => 2.27.0

[LekoArts]

Hi!

You can write CSS to apply it, as a quick test I applied a img:hover selector to the generated class of the link component itself:

I'll contact a colleague who can answer on the all: initial reasoning.

(Also be sure to leave gatsby-plugin-image specific feedback here: #27950 👍 )

[wardpeet]

This is actually a bug 😅. The value should be "inherit" or "unset" so it doesn't overwrite the img with global selectors.

Imagine if you had:

img {
  border-radius: 50%;
}

We don't want it to touch the img but ".gatsby-image-wrapper img" is ok to overwrite

[ascorbic]

PR to fix this: #28317