Optimize allocations

[wokalski]

There's a few things we can do to optimise allocations.

1. Avoid concat here
2. Same here
3. Use arrays instead of lists. Afaik there's no need to use any of the interesting list properties here (lists use more space because they are represented as nested arrays)
4. Avoid nested variants use functions instead and return a string. You can make it of an opaque type so that the user won't know that it's a string indeed but you'll avoid multiple allocations

Even better, when the value of a property css property is just a finite set of values, you can do for instance Display.flex which will just be "display: flex" behind the scenes. One less function call :)

[threepointone]

thanks for the tips! I've only just started learning reason so this is helpful, wanted to push some code that worked before making it better. cheers!

[wokalski]

the build artefacts inside lib/es6/src/ are your friend.

[wokalski]

@threepointone I'm on this one . I did this and rewritten all but one bs.raw js functions to Reason. Since you seem to be on fire maybe we could get back to the thing we talked about on discord?

[threepointone]

yeah I'm starting to write out some basic tests before doing anything further. do you still want examples of how joinselectors works?

[wokalski]

yes, indeed. I'll push to show you what I have at the moment.

[threepointone]

using glamor notation, consider the style

{
" .child" : {
    ".ie6 &": {
      ":hover": {
         color: 'red'
      }
    }
  }
}

that should compile down to

.ie6 & .child:hover: {
  color: red;
}

(at which point & gets replaced with something like css-ahjd6q)

join_selectors is a function that given a path of selectors, generates the string above

the rules are -

• selectors without & are equivalent to &<selector>, eg - ':hover' is the same as '&:hover'
• else, & is the context where the following selector gets inserted

the following four are equivalent -

join_selectors (' .child', '.ie6 &', ':hover')
=== 
join_selectors ('.ie6 & .child', ':hover')
===
join_selectors (' .child', '.ie6 &:hover')
=== 
'.ie6 & .child:hover'