Gatsby: [gatsby-image] imgStyle is not propagated down for non-js images

[SophieAu]

Description

When I'm running my site with JavaScript disabled (e.g. via the NoScript browswer plugin), the styles I set with theimgStyle prop don't get propagated down to the image.

Just fyi, I think I already located the issue and wrote a fix for it here: https://github.com/SophieAu/gatsby/commit/28881d67dcf0a47d49a0c48e353f326b2687edaf. If people think this is a valid bug and agree with my proposed fix I'm happy to (try to) add tests and open a PR for it.

Steps to reproduce

Simply use the gatsby-image component with styles in the imgStyle props and run it in a no-js environment.

Expected result

The imgStyle props should propagate to the no-js fallback image

Actual result

The styles aren't propagated.

Environment

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    npm: 6.13.7 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.12 => 2.19.12
    gatsby-image: ^2.2.39 => 2.2.39
    gatsby-plugin-csp: ^1.1.3 => 1.1.3
    gatsby-plugin-feed: ^2.3.26 => 2.3.26
    gatsby-plugin-manifest: ^2.2.40 => 2.2.40
    gatsby-plugin-netlify-cms: ^4.1.37 => 4.1.37
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
    gatsby-plugin-sass: ^2.1.27 => 2.1.27
    gatsby-plugin-sharp: ^2.4.4 => 2.4.4
    gatsby-plugin-sitemap: ^2.2.26 => 2.2.26
    gatsby-plugin-typescript: ^2.1.26 => 2.1.26
    gatsby-remark-images: ^3.1.44 => 3.1.44
    gatsby-remark-prismjs: ^3.3.30 => 3.3.30
    gatsby-source-filesystem: ^2.1.48 => 2.1.48
    gatsby-transformer-remark: ^2.6.50 => 2.6.50
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13
    gatsby-transformer-yaml: ^2.2.23 => 2.2.23
  npmGlobalPackages:
    gatsby-cli: 2.9.0

[pieh]

Nice work on working on fix already!

I do have one suggestion on the changes you shared already - we might need to pass imgStyle and not imageStyle, because imageStyle seems to add opacity and transition:
https://github.com/gatsbyjs/gatsby/blob/a3cf501e9b75558909c06f7259830251dea1a5d3/packages/gatsby-image/src/index.js#L434-L438

Those are pretty badly named arguments/variables, but I think we should pass argument that is used as prop to gatsby-image as is.

If people think this is a valid bug and agree with my proposed fix I'm happy to (try to) add tests and open a PR for it.
It's absolutely a bug and we would welcome pull request fixing it!

For manual tests, I think easiest setup would be straight copy entire index.js file from gatsby-image to some test site, and import it instead of gatsby-image

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[SophieAu]

it's still an issue and I'm working on a PR as we speak. It's just harder than I thought it was gonna be...

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜