gatsby-plugin-styled-components breaks styling based on props

[eriktiekstra]

Description

I 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.

Only 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?

Steps to reproduce

package.json

```"dependencies": {
"gatsby": "^2.0.19",
"gatsby-plugin-manifest": "^2.0.5",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-styled-components": "^3.0.1",
"gatsby-source-contentful": "^2.0.5",
"gatsby-source-filesystem": "^2.0.5",
"google-map-react": "^1.0.9",
"polished": "^2.3.0",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-helmet": "^5.2.0",
"styled-components": "^4.1.1",
...
},
"license": "MIT",
"scripts": {
"build": "gatsby build",
"dev": "gatsby develop",
"format": "prettier --write '*/.js'",
"serve": "serve ./public"
},
"devDependencies": {
"babel-plugin-styled-components": "^1.8.0",
"prettier": "^1.14.2",
"serve": "^10.1.1"
}

#### gatsby-config.js

```plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        minify: false, // Breaks styles if not set to false
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-source-contentful',
      options: contentfulConfig.production,
    },
  ],

styles.js

```import styled from 'styled-components';
import { colors } from '../../styles/variables';

export const Section = styled.section position: relative; display: flex; flex-direction: column; align-items: center; padding: 70px 0; box-sizing: border-box; background-color: ${props => props.bgColor ? colors[props.bgColor] : colors.white} color: ${props => props.textColor ? colors[props.textColor] : colors.blueDark} ;

#### index.js

import { Section } from './styles';

const bgColor = 'red';
const textColor = 'white';

return (

...

);

### Expected result

The styles applied to the `<Section>` component with `minify: false`:
```position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    background-color: rgb(198, 40, 40);
    color: rgb(255, 255, 255);
    padding: 70px 0px;

Actual result

The styles applied to the <Section> component without minify: false:
``` position: relative;
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
box-sizing: border-box;
padding: 70px 0px;

### Environment

```System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Yarn: 1.12.1 - ~\.yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 41.16299.726.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
    gatsby-source-contentful: ^2.0.5 => 2.0.5
    gatsby-source-filesystem: ^2.0.5 => 2.0.5

I also tried the same process on my Mac OS machine, but I get the same issue there.

[kakadiadarpan]

@eriktiekstra can you provide a reproduction repo for this issue? That would make it much simpler to diagnose this.

[krismorf]

@eriktiekstra does the issue also occur when you use hex values instead of rgb?

[daydream05]

Can you also post the variables file containing the colors object?

[eriktiekstra]

Sorry for my inactivity. This is still an issue, I just didn't have time to make a reproduction-repo yet.

@kmorf
Yes, it is also an issue with hex values. The issue is that it seems to totally ignore the props.

[gatsbot[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!

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

[finppp]

I also have a similar problem.
On initial load, the styled component 'receives' the prop, but does not apply the styling.
isCookieAccepted: "true" should apply top: -200px
If I manually set the prop to false and back to true, the styling is then applied

It seems the issue is not to do with the colors/hex value.

This problem can be fixed from disabling the 'gatsby-plugin-styled-components'
When I set minify: false, the issue is still there

[gatsbot[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.

Thanks again for being part of the Gatsby community!

[ddnomad]

Well, still not resolved somehow, and it's a kind of a deal breaker for me currently.

And yeah, issue persists.

[Avizura]

I had same issue with props based styles. My case was that ThemeProvider has been located in gatsby-ssr config. After moving it to layout component everything worked even with minification.

[mongkuen]

@eriktiekstra This is something that boggled me for half a day. Props work fine in dev, but will fail after building.

Not sure if it's precisely what's going on with you, but I found the way I write my ternaries/short circuits screwed with how props were getting rendered.

Use strict equality comparisons. I suspect it's the way things get ran/minified in production

Say a button has a prop of being clicked, being true and false
WILL NOT WORK: background-color: ${p => (p.clicked && 'red') }
WILL NOT WORK: background-color: ${p => (p.clicked ? 'red' : 'blue') }

WILL WORK: background-color: ${p => (p.clicked === true && 'red') }
WILL WORK: background-color: ${p => (p.clicked === true ? 'red' : 'blue') }

I notice you're doing this:
background-color: ${props => props.bgColor ? colors[props.bgColor] : colors.white}

try doing this maybe?
background-color: ${props => props.bgColor !== undefined ? colors[props.bgColor] : colors.white }

[mongkuen]

got bit by this again.

I had a context that used state like useState(false), which should initialize that piece of state to false.

But console logging during the build process getting the server rendered html said that piece of state initialized as {}, which then made all the styling comparisons wrong for the first page show.

Had to add a hacky lodash isEmpty comparison on my styling props to get the server rendered stuff to show up correctly

[biels]

This issue is still present on gatsby 2.13.15 and styled-components 4.3.2 when using gatsby-plugin-styled-components 3.1.1