Electron-react-boilerplate: Convert existing CSS styles into styled-components

[garetmckinley]

I have been absolutely in love with styled-components so far, and am working on my own fork of this boilerplate with all styles written in pure styled-components.

I'm really excited to use styled-components in my own apps, I was just curious if this is something that you would be interested in pulling back upstream once I have completed it?

Let me know your thoughts on this!

[amilajack]

Unfortunately GitHub doesn't have any kind of polling so let's do this:

Add them: 👍
Don't Add them: 👎
Not sure/Undecided: 😕

[amilajack]

@garetmckinley I haven't messed around with them myself. Can you show us an example and describe how users can benefit from this?

[garetmckinley]

The biggest obvious benefit is being able to keep your rules defined alongside your components. Not only reducing the amount of files needed (no css files) but also allowing you to visually grep what styles belong to what components, no need to open a css file and find a specific selector to edit.

I'm going to be implementing it to my own fork regardless, so once I convert some of it to styled-components, I'll show off some of the code here so that you can see how it would look using it.

[amilajack]

Sounds good!

[garetmckinley]

Here is how the Home.js screen would look utilizing styled-components

To do things like set the body selector for the background-color of the screen, we use an injectGlobal call inside the App.js

Doing this results in an unused expression, so I had to add /* eslint-disable no-unused-expressions */ to the top of the App.js file.

[amilajack]

Woah. Is that even valid syntax? Is a custom syntax parser need for that?

[garetmckinley]

Completely valid! 😄 No custom parsers either! It's utilizing the awesome styled-components, check it out! The babel syntax plugin for Atom has even added support for it already (that's why it's syntax highlighted for me).

edit: I misinterpreted your reply, it's valid syntax but it is not syntax highlighted by default in the babel language. But it's becoming adopted pretty quickly. As I said, the official babel syntax language for atom has support for it.

[amilajack]

@garetmckinley After all those javascript fatigue rants, I'm somewhat reluctant to add more libraries and frameworks to this project and others. I think we should wait until this kind of styling becomes more popular. For beginners who just want to mess around with this boilerplate, react/redux/electron/flow/eslint/babel/webpack might be already too much. Just my two cents.

[garetmckinley]

I definitely understand your hesitation towards it. Is it worth maybe just leaving this open to see if the request gains more backing?

[mxstbr]

Subscribing to this issue, as I'm one of the creators of styled-components. If you have any questions about implementation details, let me know! The one thing we're currently missing is syntax highlighting in _all_ editors, but @garetmckinley has recently added support for Sublime Text, and Webstorm is also coming soon, with more on the roadmap.

In case you're wondering if this library is here to stay, the react core team are huge fans, and Dan has even publicly stated they're considering making it the "official" way of styling react apps. Thinkmill (the company I work for) has doubled down on their support, meaning not only is styled-components great right now, it'll only get better over the next weeks/months as I work on it full-time!

Again, any questions just let me know!

_If you want to see what a real-world app built with styled-components looks like that a look at the postcss.parts source! FWIW we're also going to ship this in react-boilerplate by default very soon._

[amilajack]

Dan has even publicly stated they're considering making it the "official" way of styling react apps. Thinkmill (the company I work for) has doubled down on their support, meaning not only is styled-components great right now, it'll only get better over the next weeks/months as I work on it full-time!

Sounds good! I think we should add support out of the box but maybe provide styling examples later when ide/text editor integration is widespread

[garetmckinley]

So I've done a bit of work on my fork of this boilerplate. Feel free to check out how I went about implementing styled-components.

I obviously have done a bit of additional work than just integrating styled-components, so I've went ahead and made another branch called styled-components-only. That way you can see how the repo would look with the css files directly translated to styled-components. I'm not finished with it yet, but it's a start.

The master branch has the common components split up into separate files for more sane management, but I didn't want to feel like I was imposing my personal configurations on the boilerplate; but still feel free to check it out if you wish 😄

[amilajack]

@garetmckinley Initially lets provide a commented example of a styled-component in a comment. When editor configuration is widespread, lets migrate 100%.

[garetmckinley]

Okay, great. I have heard back on the PR I have open with the official babel-sublime package, so we're close to widespread support :)

I'll work on it a bit later today if I have time, otherwise I'll get to it tomorrow 👍

[amilajack]

Great! Here's what I have in mind:

/**
 * Here's an example using styled-components:
 *
 * const Title = styled.h2`
 *   color: green
 * `;
 */

Thoughts?

[srinivasdamam]

@garetmckinley styled-components looks great for me, but what if we have plenty of CSS code in the component file and lines per pages goes beyond thousand, then it may be little difficulty to scroll down to the JavaScript code (component logic) and comparing the styles, any thoughts about this?

[mxstbr]

then it may be little difficulty to scroll down to the JavaScript code (component logic) and comparing the styles, any thoughts about this?

You don't normally put all your components in the same file. Instead, colocate every styled component in its own file in the same folder. See the postcss.parts repo for an example: https://github.com/mxstbr/postcss.parts/tree/master/js/components/Header

This is what the file structure looks like:

Header/
├── index.js    # <-- The actual component
├── Link.js     # <-- Styled component
├── Subtitle.js # <-|
├── Title.js    # <-|
├── Wrapper.js  # <-|
└── Anchor.js   # <-|

This is what the index.js ( the actual component) looks like:

import React from 'react';
import styled from 'styled-components';

import { colors } from '../../constants';

import Wrapper from './Wrapper';
import Link from './Link';
import Title from './Title';
import Subtitle from './Subtitle';
import Anchor from './AbsoluteAnchor';

const Logo = styled(Anchor)`
  right: initial;
  left: 0;
  font-size: 1.5em;
  font-family: Georgia, Times, 'Times New Roman', serif;
`;

const Header = () => {
  return(
    <Wrapper>
      <Logo href="https://twitter.com/mxstbr">&lt;mxstbr/&gt;</Logo>
      <Anchor href="https://github.com/himynameisdave/postcss-plugins#submitting-a-new-plugin">Add a plugin</Anchor>
      <Title><Link to="/">PostCSS.parts</Link></Title>
      <Subtitle>A searchable catalog of PostCSS plugins</Subtitle>
    </Wrapper>
  );
}

export default Header;

Not all that much code here! That's because all the styled components are colocated into the folder in separate file, like the Title:

import styled from 'styled-components';
import { colors } from '../../constants';

export default styled.h1`
  font-size: 3em;
  color: ${colors.brandColor};
  margin-bottom: 0.25em;
`;

[amilajack]

Revisiting this issue after a couple of months. Its now pretty clear that styled-components is a proven concept. A PR for this will be welcome!

[skrivitsky]

In my opinion styled-components not a good way. What is about third-party dependencies ?
Example : https://github.com/reactjs/react-tabs/issues/148

When we style some component with styled() it returns new type.
I think ccs-modules with post-css would be better solution

[mxstbr]

Example : reactjs/react-tabs#148

All styled-components does is pass in the className and wrap it in another component. That means this:

const MyButton = styled(ThirdPartyButton)`
  color: blue;
`

is the same as this (where the .abc class name applies the blue color):

<ThirdPartyButton className="abc" />

What react-tabs is doing there is a hacky workaround and not something that's advised or will happen often. (if ever) Not even the maintainer knows why that check is there ¯\_(ツ)_/¯

[skrivitsky]

@mxstbr It will happen not often, but we will give people more flexibility in styling components.

[mxstbr]

but we will give people more flexibility in styling components.

People don't have to use styled-components. 😉 Also it might become the standard in the React community in the future and has a bunch of other benefits compared to a vanilla CSS setup.

[garetmckinley]

Maybe the decision shouldn't be based off of one library that deviates from the standards ¯\_(ツ)_/¯

I'm sure they would welcome a PR to fix that incompatibility.

[amilajack]

I'm shifting towards more vanilla technologies in order to lower the barrier to using this project. I think docs should be provided on how to add styled-components integration tho.

[garetmckinley]

I agree, there should be instructions for using both styled-components and glamorous

[bionicvapourboy]

This is how I did (hack-o style):

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Styled from "styled-components";

const fetchStyles = () =>
  fetch(
    "https://gist.githubusercontent.com/bionicvapourboy/61d3d7a8546cb42e0e3194eb9505f48a/raw/5432218dd83320d53d1cbc2f230b81c765183585/style.css"
  ).then(response => response.text());

class App extends Component {
  state = {
    style: ""
  };

  componentDidMount() {
    fetchStyles().then(data => this.setState({ style: data }));
  }

  Wrapper = () => Styled.div`
    ${this.state.style}
  `;
  render() {
    const Wrapper = this.Wrapper();
    return (
      <div className="App">
        <Wrapper>
          <h1>Styled</h1>
        </Wrapper>
        <h1>Not Styled</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demo: https://codesandbox.io/s/yw7xmx6x3x