Pretty Components: Prop-based Styled Components in React.js

One of the biggest struggle I go through when working with React is styling. Trends have changed, over and over, but I never had the feeling that libraries out there were really solving the styling problem.

Let’s give a look at the very popular css-in-js library, styled-components.

const Button = styled.a`
  border-radius: 3px;
  ${props => props.primary && css`
    background: ${theme.primary};
  `}
  ${props => props.size === 'small' && css`
    font-size: 12px;
  `}
`;

Alright, let’s clean this a little:

Button {
  border-radius: 3px;

  ::primary {
    background: $primary;
  }
  ::size {
    ::small {
      font-size: 12px;
    }
  }
}

If you like the syntax, good news: you can start using it now, it’s open-sourced and called pretty components.

Tell us moooore

Why?

Do we need any additional logic for mapping our component to its hover style only when it’ll be hovered?

a {
  &:hover {
    text-decoration: underline;
  }
}

Of course we don't, because we already acknowledge that writing :hover will make it conditionally styled, based on our element's state.

The idea here is similar: making props part of that state, right inside our style declaration. In other words, pretty components make that link implicit for you between your component and its style definition.

Features

• Use any component props as style selectors, using the double-colon sign
• Use Sass nested styles syntax and its sugared & sign
• Create variables, later available in every style definition
• Stop overthinking class names.
  Pretty components automatically generates readable ones:
  .Button, .Button__primary, .Button__size--small

How?

Now you may wonder, how can you write this in JavaScript. Well, you can’t.

In order to use Prop-based StyleSheets (.pss files), you can quickly set up the Pretty Webpack loader that will do the job for you. It’s really a matter of a few lines to paste into your webpack config file.

If you have any idea, suggestion, feedback…share your opinion below or on github. I really wish that Pretty components could evolve thanks to you.
I believe it can be useful for many developers.

Thanks for your time! ⚡️