Compatible with stylus-like syntax

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

Compare with below:

const Title = styled.h1`
  font-size 1.5em
  text-align center
  color palevioletred
`

const Wrapper = styled.section`
  padding 4em
  background papayawhip
`

Painful to write a ; at the end of the line, hope stylus-like syntax is supported here.

I guess it is possible to be serialized through some simple rules: adding a ; by line; adding : by first space.

ref: http://stylus-lang.com/

[geelen]

Sorry, but I want to keep the CSS in Styled Components as close to vanilla CSS as possible, with the exception of nesting and autoprefixing. Anything else could potentially lead to very confusing behaviour, particularly when it comes to interpolations.

If you’re finding things like : and ; painful potentially you’re writing too much CSS. Try breaking out snippets and bringing them in with interpolations, that should make things a little nicer to work with.

[thysultan]

Explored this a bit when working on the no-semicolon options though for different reasons – since i wanted to try and monkey-patch some common syntax errors i.e color red;.

So it is possible, you just have to do a lot more book keeping to avoid false positives since there are many valid ways you can write css selectors(involving whitespace) and properties that look syntactical similar without the colon.

Though it might not make it into s-c – but if you do have some ideas on the subject i’m open to input on implementations, the one i came up with at the time involved a 100% in/out approach to one format over the other.