{"action":"opened","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/9918","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/9918/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/9918/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/9918/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/9918","id":380587781,"node_id":"MDU6SXNzdWUzODA1ODc3ODE=","number":9918,"title":"gatsby-plugin-styled-components breaks styling based on props","user":{"login":"eriktiekstra","id":6928564,"node_id":"MDQ6VXNlcjY5Mjg1NjQ=","avatar_url":"https://avatars3.githubusercontent.com/u/6928564?v=4","gravatar_id":"","url":"https://api.github.com/users/eriktiekstra","html_url":"https://github.com/eriktiekstra","followers_url":"https://api.github.com/users/eriktiekstra/followers","following_url":"https://api.github.com/users/eriktiekstra/following{/other_user}","gists_url":"https://api.github.com/users/eriktiekstra/gists{/gist_id}","starred_url":"https://api.github.com/users/eriktiekstra/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eriktiekstra/subscriptions","organizations_url":"https://api.github.com/users/eriktiekstra/orgs","repos_url":"https://api.github.com/users/eriktiekstra/repos","events_url":"https://api.github.com/users/eriktiekstra/events{/privacy}","received_events_url":"https://api.github.com/users/eriktiekstra/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-14T08:33:22Z","updated_at":"2018-11-14T08:33:22Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  Please fill out each section below, otherwise your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.\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\n\r\nI am trying to pass props to `styled-components`, but when I am trying to serve the application after doing `gatsby build` or `gatsby develop`, the styles are not even added according to the props passed. When I `console.log` the props inside the styles, it is outputting the correct values in the terminal during the `build` process.\r\n\r\nOnly after setting the config to `minify: false` the styles are applied correctly. Of course I prefer/need to minify the code, how do I proceed?\r\n\r\n### Steps to reproduce\r\n\r\n#### package.json\r\n\r\n```\"dependencies\": {\r\n    \"gatsby\": \"^2.0.19\",\r\n    \"gatsby-plugin-manifest\": \"^2.0.5\",\r\n    \"gatsby-plugin-offline\": \"^2.0.5\",\r\n    \"gatsby-plugin-react-helmet\": \"^3.0.0\",\r\n    \"gatsby-plugin-styled-components\": \"^3.0.1\",\r\n    \"gatsby-source-contentful\": \"^2.0.5\",\r\n    \"gatsby-source-filesystem\": \"^2.0.5\",\r\n    \"google-map-react\": \"^1.0.9\",\r\n    \"polished\": \"^2.3.0\",\r\n    \"react\": \"^16.5.1\",\r\n    \"react-dom\": \"^16.5.1\",\r\n    \"react-helmet\": \"^5.2.0\",\r\n    \"styled-components\": \"^4.1.1\",\r\n    ...\r\n  },\r\n  \"license\": \"MIT\",\r\n  \"scripts\": {\r\n    \"build\": \"gatsby build\",\r\n    \"dev\": \"gatsby develop\",\r\n    \"format\": \"prettier --write '**/*.js'\",\r\n    \"serve\": \"serve ./public\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"babel-plugin-styled-components\": \"^1.8.0\",\r\n    \"prettier\": \"^1.14.2\",\r\n    \"serve\": \"^10.1.1\"\r\n  },```\r\n\r\n#### gatsby-config.js\r\n\r\n```plugins: [\r\n    'gatsby-plugin-react-helmet',\r\n    {\r\n      resolve: `gatsby-plugin-manifest`,\r\n      options: {\r\n        name: 'gatsby-starter-default',\r\n        short_name: 'starter',\r\n        start_url: '/',\r\n        background_color: '#663399',\r\n        theme_color: '#663399',\r\n        display: 'minimal-ui',\r\n        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.\r\n      },\r\n    },\r\n    {\r\n      resolve: `gatsby-plugin-styled-components`,\r\n      options: {\r\n        minify: false, // Breaks styles if not set to false\r\n      },\r\n    },\r\n    'gatsby-plugin-offline',\r\n    {\r\n      resolve: 'gatsby-source-contentful',\r\n      options: contentfulConfig.production,\r\n    },\r\n  ],```\r\n\r\n#### styles.js\r\n\r\n```\r\nimport styled from 'styled-components';\r\nimport { colors } from '../../styles/variables';\r\n\r\nexport const Section = styled.section`\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    padding: 70px 0;\r\n    box-sizing: border-box;\r\n    background-color: ${props =>\r\n      props.bgColor ? colors[props.bgColor] : colors.white}\r\n    color: ${props =>\r\n      props.textColor ? colors[props.textColor] : colors.blueDark}\r\n`;```\r\n\r\n#### index.js\r\n```\r\nimport { Section } from './styles';\r\n\r\nconst bgColor = 'red';\r\nconst textColor = 'white';\r\n\r\nreturn (\r\n    <Section id={slug} bgColor={bgColor} textColor={textColor}>\r\n      ...\r\n    </Section>\r\n  );```\r\n\r\n\r\n### Expected result\r\n\r\nThe styles applied to the `<Section>` component with `minify: false`:\r\n```position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    -webkit-box-align: center;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    background-color: rgb(198, 40, 40);\r\n    color: rgb(255, 255, 255);\r\n    padding: 70px 0px;```\r\n\r\n### Actual result\r\n\r\nThe styles applied to the `<Section>` component without `minify: false`:\r\n```    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    -webkit-box-align: center;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    padding: 70px 0px;```\r\n\r\n### Environment\r\n\r\n```System:\r\n    OS: Windows 10\r\n    CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz\r\n  Binaries:\r\n    Yarn: 1.12.1 - ~\\.yarn\\bin\\yarn.CMD\r\n    npm: 5.6.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n  Browsers:\r\n    Edge: 41.16299.726.0\r\n  npmPackages:\r\n    gatsby: ^2.0.19 => 2.0.19\r\n    gatsby-plugin-manifest: ^2.0.5 => 2.0.5\r\n    gatsby-plugin-offline: ^2.0.5 => 2.0.5\r\n    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0\r\n    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1\r\n    gatsby-source-contentful: ^2.0.5 => 2.0.5\r\n    gatsby-source-filesystem: ^2.0.5 => 2.0.5```"}}
{"actor":{"display_login":"eriktiekstra"}}