gatsby-remark-autolink-headers not reading the offsetY option set in gatsby-config.js

Description

Hello, I am trying to use gatsby-remark-autolink-headers to add header links to my markdown pages. I have set the offsetY to 100, however when I click the header it snaps it to the very top of the page. The other options seem to work, so I’m not sure why just the offsetY option is not working.

Steps to reproduce

Minimal Reproduction: https://github.com/Aarya-Patel/gatsby-reproduction Steps to reproduce:

1. run npm install --legacy-peer-deps
2. run gatsby develop
3. Head over to ‘/second-post’ path.
4. Click the links.

Expected result

There should be a 100px offset from the top when clicking the header links.

Actual result

There is no 100px offset from the top when clicking the header links.

Environment

System: OS: macOS 11.0.1 CPU: (8) x64 Intel® Core™ i7-8569U CPU @ 2.80GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 15.0.0 - ~/.nvm/versions/node/v15.0.0/bin/node npm: 7.0.2 - ~/.nvm/versions/node/v15.0.0/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 91.0.4472.77 Safari: 14.0.1 npmPackages: gatsby: ^3.6.2 => 3.6.2 gatsby-core-utils: ^2.6.0 => 2.6.0 gatsby-plugin-gatsby-cloud: ^2.6.1 => 2.6.1 gatsby-plugin-image: ^1.6.0 => 1.6.0 gatsby-plugin-manifest: ^3.6.0 => 3.6.0 gatsby-plugin-offline: ^4.6.0 => 4.6.0 gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0 gatsby-plugin-sharp: ^3.6.0 => 3.6.0 gatsby-plugin-sitemap: ^4.2.0 => 4.2.0 gatsby-remark-autolink-headers: ^4.3.0 => 4.3.0 gatsby-source-filesystem: ^3.6.0 => 3.6.0 gatsby-transformer-remark: ^4.3.0 => 4.3.0 gatsby-transformer-sharp: ^3.6.0 => 3.6.0 npmGlobalPackages: gatsby-cli: 3.6.0

[MangelMaxime]

Looking at the source code of the plugin I saw this lines:

https://github.com/gatsbyjs/gatsby/blob/2dbe6477d88bf6e0138f247dc9dda1bd67a2a613/packages/gatsby-remark-autolink-headers/src/gatsby-browser.js#L15-L18

It seems like the plugin is not only using offsetY to control the offset but also take into consideration both of these properties.

I added a CSS rule to set one of these properties and it seems to be working for me.

.content {
    h1[id],
    h2[id],
    h3[id],
    h4[id],
    h5[id],
    h6[id] {
        scroll-margin-top: 3.5rem;
    }
}

[MangelMaxime]

I just encountered the same issue