[WIP] Preprocess CSS

[kitten]

Edit: Closed since the Stylis one will likely work out better

• Minimal CSS parser that outputs an AST
• Un-nesting transformer that flattens the AST
• Determine the format of the result we want to generate for styled-components to consume
• Add preprocessTemplateLiterals visitor (Very easy; can be seen in the postcss-preprocessing branch)
• Determine how preprocessed CSS in interpolations should work
• Write ludicrously high amount of unit tests

[kitten]

So for now I completed a minimal CSS parser and have a transformer that flattens it. To continue I'll need to figure out what shape the result should take on for styled-components to consume. Also I haven't quite figured out how the keyframes and css helpers should behave. Especially the css one might be tricky, since that will be another interpolation that might have to be combined with the higher level one.

It's still missing a lot of testing since this is pretty much just some experimental stuff right now.

Edit: An alternative approach, that is even more naïve and might or might not work, can be found in the postcss-preprocessing branch. It essentially just does the preprocessing by filling in some placeholders, like babel-plugin-css-to-js does.

[mxstbr]

I reckon the shape needs to be some sort of object that can be parsed with very little effort. Possibly we could even put in just the AST? Would that be too big possibly?

[kitten]

@mxstbr I do believe that is too big. I think we want to get as close to a normal string as possible, while being able to replace & in the selector values that contain it. Since we are already able to parse template strings, an object of the usual structure might be suitable?

Something like this:

{
  '&': [[ 'color: ', ';' ], props => props.color ],
  '&:hover': [[ 'color: green;' ]]
}

[kitten]

... Actually we can interleave this and diverge from what template strings need to do:

{
  '&': [ 'color: ', props => props.color, ';' ],
  '&:hover': [ 'color: green;' ]
}

Since we don't need to differentiate between interpolations and CSS strings anymore, this should be fine, no?

[mxstbr]

Yeah that sounds reasonable! @geelen what do you think?

[kitten]

@mxstbr Just noticed a small problem with the selector un-nesting.

& {
  &:hover {
  }
}

The nested rule here is gonna be kept as &:hover.

& {
  > div {
  }
}

While the nested rule here is going to be & > div... So if this selector is a function, like:

`& {
  ${x => x ? '&:hover' : '> div'} {
  }
}`

Then we don't know whether to prepend the ancestor's selector or not :(

[kitten]

It turns out that stylis.js is extremely forgiving with placeholders and really forgiving. So I might replace this with some stylis magic! ✨ We can still keep the AST parser around for when we decide to actually do static/dynamic css splitting, but for now it's totes not needed 😄

Edit: DEMO! http://www.webpackbin.com/41LPGnEDz

Edit 2: Actually, I just discovered that & PLACEHOLDER_2 is not really the most clever thing to come out of the placeholder transpilation, but I think we can solve that at runtime.

[kitten]

Another thing 😭 inline placeholders that are placed some lines before { w/o any other properties between the two, are recognised as blocks of their own 👎 Maybe I was a bit fast to try to solve this with stylis.

Edit: I can solve this by appending each placeholder with a semicolon ;, except the ones that are for selectors (which are identified as interpolations that have a curly brace { after them on the same line)

[kitten]

Closing this PR in favour of #26. That one will probably be closer to how v2 already processes its CSS, and it will add less surface area for bugs.