11

I need the CSS that is provided to styled-components to be output to a physical CSS file inside of my public/css directory.

export const MyComp = styled.div`
  width: 100%;
  height: 500px;
`

Along with styles from all other styled-components, the above component would output into public/css/styled.css:

.Components_MyComp__a39t9ag0248f {
  width: 100%;
  height: 500px;
}

I am using:

"webpack": "^2.6.1",
"styled-components": "^2.0.1",
Colton Colcleasure
  • 428
  • 5
  • 10

1 Answers1

8

This is currently not possible/supported. Doing extraction of static styles is very hard, for example consider a function interpolation:

const Test = styled.div`
  color: ${props => props.color};
`

How are we going to extract this? We could only extract the static parts of the CSS, but there's a lot of edge cases and constraints that make this hard to build.

We're currently investigating and experimenting to figure out what the best approach might be. For now check out our Babel plugin to see some things were working on at the compile time step!

mxstbr
  • 11,087
  • 4
  • 39
  • 37
  • 1
    Appreciate your response, friend. I wound up post-processing (at runtime, *puke*) the ` – Colton Colcleasure Oct 09 '17 at 15:13
  • @ColtonColcleasure what did you exactly as a solution? I want to use this with a Preview Component in netlify cms > https://www.netlifycms.org/docs/customization/ and Styled components. but it requires a css file.. – pungggi Jun 05 '18 at 16:12