styled-components? 💅

[robinmetral]

Are you open (for this theme or a next one) to using CSS-in-JS?

Some ideas behind it: https://mxstbr.com/thoughts/css-in-js/
I personally love styled-components, but there are many alternatives!

You could definitely say goodbye to your table of contents 😉

twentynineteen-gatsby-theme/packages/gatsby-theme-twentynineteen/src/style.scss

Lines 1 to 3 in 391d1e0

	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------

[jasonbahl]

I vote CSS in JS as well. I think for v1 just pulling in the existing theme .scss makes sense, but long term I think the benefits of CSS in JS will help with development.

With CSS in JS along with GraphQL, we'll be able to manage components completely in one place. We can declare the Styles, Markup and data dependencies all at the component level, making it much easier to scale, reduce risks of bugs, increase developer productivity as they don't have to hunt through the application to find where things are, etc.

Then we can also take advantage of using props to conditionally change styles, etc.

---

Styled Components and Emotion are the 2 that I've used and both have been great!

[zgordon]

We are definitely addressing CSS-in-JS for V2. A number of us are leaning towards Styled Components :)

The issue with this for V1, as @jasonbahl said, was the additional time it takes to port SASS over to Styled Components and we wanted to get something working as soon as we could.

@robinmetral if you wanted to tackle porting twentynineteen SASS over to Styled Components, that would be a helpful step even if our current templates get tweaked a bit 👍

[m-muhsin]

Yes, I agree with @jasonbahl and @zgordon. I've used Styled Components a bit and this will a great time to dig deeper. Also, performance will improve as we will be loading only the styles necessary since they are attached to the relevant React components and not globally.