{"action":"closed","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/6989","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/6989/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/6989/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/6989/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/6989","id":347425262,"node_id":"MDU6SXNzdWUzNDc0MjUyNjI=","number":6989,"title":"Props passed to gatsby-link show on <a> and trigger error on W3 validator","user":{"login":"AniaMakes","id":31079643,"node_id":"MDQ6VXNlcjMxMDc5NjQz","avatar_url":"https://avatars2.githubusercontent.com/u/31079643?v=4","gravatar_id":"","url":"https://api.github.com/users/AniaMakes","html_url":"https://github.com/AniaMakes","followers_url":"https://api.github.com/users/AniaMakes/followers","following_url":"https://api.github.com/users/AniaMakes/following{/other_user}","gists_url":"https://api.github.com/users/AniaMakes/gists{/gist_id}","starred_url":"https://api.github.com/users/AniaMakes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AniaMakes/subscriptions","organizations_url":"https://api.github.com/users/AniaMakes/orgs","repos_url":"https://api.github.com/users/AniaMakes/repos","events_url":"https://api.github.com/users/AniaMakes/events{/privacy}","received_events_url":"https://api.github.com/users/AniaMakes/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-08-03T14:46:07Z","updated_at":"2018-09-08T05:53:34Z","closed_at":"2018-09-08T05:53:33Z","author_association":"NONE","body":"<!--\r\n  To make it easier for us to help you — please follow the suggested format below.\r\n\r\n  Useful Links:\r\n  - Documentation: https://www.gatsbyjs.org/docs/\r\n  - How to File an Issue: https://www.gatsbyjs.org/docs/how-to-file-an-issue/\r\n\r\n  Before opening a new issue, please search existing issues https://github.com/gatsbyjs/gatsby/issues\r\n-->\r\n\r\n## Description\r\nWe have an internal link that looks like a button. \r\n\r\nThe set up is as described here: https://www.npmjs.com/package/gatsby-link.\r\n\r\nThe component we're rendering is [Styled](https://www.styled-components.com/).\r\n\r\nOn render, the <a> tag has properties that were passed down get written into <a> (`<a class=\"sc-iAyFgw kTSalc\" background=\"slateblue\" color=\"white\" border=\"slateblue\" href=\"/our-clients\">`). This shows up as error on the W3 validator. If those properties are not passed down, eg `{...other}` is deleted from <GatsbyLink> props, then the button doesn't render the desired style. \r\n\r\n### Steps to reproduce\r\n\r\n* Set up internal gatsby-link\r\n* Make it a Styled Component\r\n\r\n[Our example]( https://github.com/yldio/website/blob/master/src/components/button.js)\r\n\r\n* When calling said Styled Component, add custom properties\r\n\r\n[Our example](https://github.com/yldio/website/blob/b2aced2900a0a0eea17af8e80257783eaffee43c/src/sections/what-we-do.js#L151)\r\n\r\n* Deploy\r\n* Run deployed url through [W3 validator](https://validator.w3.org/nu/) \r\n\r\n### Expected result\r\n\r\nThe button should only have class and href (and only other properties that <a> is allowed to have).\r\n\r\n`<a class=\"sc-iAyFgw kTSalc\" href=\"/our-clients\">`\r\n\r\n### Actual result\r\n\r\nThe button <a> has properties that were passed in. In this case, there's `background`, `color` and `border`.\r\n\r\n`<a class=\"sc-iAyFgw kTSalc\" background=\"slateblue\" color=\"white\" border=\"slateblue\" href=\"/our-clients\">`\r\n\r\n### Environment\r\n\r\n  System:\r\n    OS: Linux 4.4 Ubuntu 16.04.5 LTS (Xenial Xerus)\r\n    CPU: x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz\r\n    Shell: 4.3.48 - /bin/bash\r\n  Binaries:\r\n    Node: 8.11.3 - /usr/bin/node\r\n    Yarn: 1.7.0 - /usr/bin/yarn\r\n    npm: 5.6.0 - /usr/bin/npm\r\n  Browsers:\r\n    Chrome: 67.0.3396.99\r\n  npmPackages:\r\n    gatsby: ^1.9.273 => 1.9.273 \r\n    gatsby-image: ^1.0.54 => 1.0.54 \r\n    gatsby-link: ^1.6.45 => 1.6.45 \r\n    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 \r\n    gatsby-plugin-sass: ^1.0.26 => 1.0.26 \r\n    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11 \r\n    gatsby-source-contentful: ^1.3.54 => 1.3.54 \r\n    gatsby-transformer-sharp: ^1.6.27 => 1.6.27 \r\n  npmGlobalPackages:\r\n    gatsby-cli: 1.1.58\r\n\r\n\r\n### File contents (if changed)\r\n\r\n`gatsby-config.js`: \r\n```\r\nrequire('dotenv').config({ path: '.env' });\r\n\r\nmodule.exports = {\r\n  plugins: [\r\n    'gatsby-plugin-sass',\r\n    'gatsby-plugin-styled-components',\r\n    'gatsby-plugin-react-helmet',\r\n    'gatsby-transformer-sharp',\r\n    {\r\n      resolve: 'gatsby-source-contentful',\r\n      options: {\r\n        spaceId: process.env.CONTENTFUL_SPACE,\r\n        accessToken: process.env.CONTENTFUL_TOKEN\r\n      }\r\n    }\r\n  ]\r\n}\r\n```\r\n---\r\n`package.json`: \r\n```\r\n{\r\n  \"private\": true,\r\n  \"version\": \"1.0.0\",\r\n  \"scripts\": {\r\n    \"build\": \"gatsby build\",\r\n    \"ci:build\": \"yarn build\",\r\n    \"ci:lint\": \"yarn lint\",\r\n    \"ci:start-server\": \"yarn serve -p 8000\",\r\n    \"ci:unit-tests\": \"yarn test\",\r\n    \"ci:feature-tests\": \"yarn test:features\",\r\n    \"develop\": \"gatsby develop\",\r\n    \"format\": \"prettier --config .prettierrc --write '**/*'\",\r\n    \"serve\": \"gatsby serve\",\r\n    \"test\": \"jest\",\r\n    \"test:watch\": \"jest --watch\",\r\n    \"test:features\": \"cypress run\",\r\n    \"lint\": \"eslint '{src,spec,cypress}/**/*.{js,jsx}' --fix\",\r\n    \"cypress\": \"cypress open\"\r\n  },\r\n  \"husky\": {\r\n    \"hooks\": {\r\n      \"pre-commit\": \"pretty-quick --staged && yarn lint\"\r\n    }\r\n  },\r\n  \"dependencies\": {\r\n    \"@fortawesome/fontawesome\": \"^1.1.8\",\r\n    \"@fortawesome/fontawesome-svg-core\": \"^1.2.0\",\r\n    \"@fortawesome/free-solid-svg-icons\": \"^5.1.0\",\r\n    \"@fortawesome/react-fontawesome\": \"^0.1.0\",\r\n    \"build-array\": \"^1.0.0\",\r\n    \"dotenv\": \"^6.0.0\",\r\n    \"gatsby\": \"^1.9.273\",\r\n    \"gatsby-image\": \"^1.0.54\",\r\n    \"gatsby-link\": \"^1.6.45\",\r\n    \"gatsby-plugin-react-helmet\": \"^2.0.11\",\r\n    \"gatsby-plugin-sass\": \"^1.0.26\",\r\n    \"gatsby-plugin-styled-components\": \"^2.0.11\",\r\n    \"gatsby-source-contentful\": \"^1.3.54\",\r\n    \"gatsby-transformer-sharp\": \"^1.6.27\",\r\n    \"google-map-react\": \"^1.0.5\",\r\n    \"graphql-tag\": \"^2.9.2\",\r\n    \"lodash.find\": \"^4.6.0\",\r\n    \"months\": \"^2.0.0\",\r\n    \"param-case\": \"^2.1.1\",\r\n    \"prop-types\": \"^15.6.2\",\r\n    \"react\": \"^16.4.1\",\r\n    \"react-helmet\": \"^5.2.0\",\r\n    \"react-styled-flexboxgrid\": \"^2.4.0\",\r\n    \"react-youtube\": \"^7.6.0\",\r\n    \"recompose\": \"^0.27.1\",\r\n    \"remcalc\": \"^1.0.10\",\r\n    \"styled-components\": \"^3.3.3\",\r\n    \"styled-components-breakpoint\": \"^2.0.2\",\r\n    \"styled-components-spacing\": \"^3.0.1\",\r\n    \"styled-flex-component\": \"^2.2.2\",\r\n    \"styled-is\": \"^1.1.3\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"babel-core\": \"^6.26.3\",\r\n    \"babel-jest\": \"^23.2.0\",\r\n    \"babel-plugin-module-resolver\": \"^3.1.1\",\r\n    \"babel-plugin-remove-attribute\": \"^0.0.8\",\r\n    \"babel-plugin-styled-components\": \"^1.5.1\",\r\n    \"babel-runtime\": \"^6.26.0\",\r\n    \"cypress\": \"^3.0.1\",\r\n    \"enzyme\": \"^3.3.0\",\r\n    \"enzyme-adapter-react-16\": \"^1.1.1\",\r\n    \"enzyme-to-json\": \"^3.3.4\",\r\n    \"eslint\": \"^5.0.1\",\r\n    \"eslint-config-prettier\": \"^2.9.0\",\r\n    \"eslint-config-xo-react\": \"^0.16.0\",\r\n    \"eslint-config-xo-space\": \"^0.19.0\",\r\n    \"eslint-plugin-chai-friendly\": \"^0.4.1\",\r\n    \"eslint-plugin-cypress\": \"^2.0.1\",\r\n    \"eslint-plugin-jest\": \"^21.18.0\",\r\n    \"eslint-plugin-jsx-a11y\": \"^6.1.1\",\r\n    \"eslint-plugin-react\": \"^7.10.0\",\r\n    \"husky\": \"^1.0.0-rc.7\",\r\n    \"jest\": \"^23.2.0\",\r\n    \"jest-styled-components\": \"^5.0.1\",\r\n    \"prettier\": \"^1.13.6\",\r\n    \"pretty-quick\": \"^1.6.0\",\r\n    \"react-dom\": \"^16.4.1\",\r\n    \"react-router-dom\": \"^4.3.1\",\r\n    \"react-test-renderer\": \"^16.4.1\"\r\n  }\r\n}\r\n```\r\n---\r\n\r\n`gatsby-node.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->\r\n`gatsby-browser.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->\r\n`gatsby-ssr.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->\r\n"}}
{"actor":{"display_login":"KyleAMathews"}}