Compatible with stylus-like syntax

[leecade]

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.

[nuragic]

@geelen Hi, I was just wondering the same as @leecade... Even if there will be no chance to support stylus-like syntax out of the box, is there any other way that you would suggest (apart from forking the lib and implementing it) to achieve the same? Could be the parser configured in some way, at some point, in the future?

Thanks!

[nuragic]

If you're finding things like : and ; painful potentially you're writing too much CSS.

Or you just realize that not having them is quite better for readability! 😄 Also keep in mind that in Stylus they're basically optional and writing plain CSS is actually valid Stylus.

[thysultan]

The parser supports no-semicolons when enabled, the next patch version might enable this which would make... possible

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

Strictly from a technical POV, parsing the stylus pattern without colons color red is harder when your aiming for a small parser, taking into account false positives between selectors and properties – i.e how do you diff between

<h1 h2>
{

}

vs

<color red>

When all you know about the two is the parts in xml brackets.

[nuragic]

@thysultan I can go to sleep right now knowing that soon we can at least get rid of the ; ! 👏 😄

Regarding your question, I guess with Indentation? Maybe I was wrong when I stated:

writing plain CSS is actually valid Stylus.

Maybe I need to amend that to say:

writing plain indented CSS is actually valid Stylus. 😬

Anyway, I agree about trying to keep the parser as small as possible; I'd just buy that argument against the possibility of just being able to remove : TBH.

[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.