Overload $nest to allow single hash input, split selector on commas

[barneycarroll]

1. Overload $nest to allow single hash input

// make
b.$nest({
  'td' : 'color red',
  'th' : 'color blue',
})
// equivalent to 
b
.$nest('td', 'color red')
.$nest('th', 'color blue')

2. Split selectors on commas

// make
b.$nest('td, th', 'padding 1em')
// equivalent to
b.$nest('td', 'padding 1em').$nest('th', 'padding 1em')

What do you think?

[futurist]

For .$nest('td', 'color red').$nest('th', 'color blue'), is that a bit ambiguous for css selector td th {}?

Maybe the form .$nest('td, th', 'color red') can be transformed to .$nest(['td', 'th'], 'color red'), but split comma is not easy, since the selector can be this one: 'td[title="a,b"], th'

I'm also faced the same problem when using bss, that $nest a comma does not work right, so it's really a thing to be considered.

[barneycarroll]

Good point @futurist, I hadn't considered that. But I think the syntax for property selectors is simple enough that we can reliably distinguish these cases with RegExp, no?

[porsager]

1. Yeah, I think that would be in line with how .helper() works as well, so 👍 for that.
2. $nest('th, td) is buggy currently, as I haven't considered that case.. The td will be applied globally, instead of nested to the generated glass :-S - definitely needs fixing..

I think it's best to solve eg td[title="a,b"], th with a regex instead of arrays which probably won't seem like the obvious solution to users..

*Edit - agreed @barneycarroll

[futurist]

If RegExp is not easy, this function maybe helpful? It's not fast but worked, just FYI 😄

[barneycarroll]

BTW @porsager I am using BSS at scale and it's awesome. Styled components is rigid and monolithic in comparison.

[porsager]

@futurist thanks a lot! :) I think that should be fine for now!

@barneycarroll uhh, that's really awesome!! Would love to hear more about that!

[futurist]

For the $nest syntax, maybe accept an object just like b.css like below:

$next({
  '>*': b`borderRight: 1px solid`,
  '>*:last-child': b`border: none`,
})

I'm facing the problem right now, and for the scenario, above syntax seems good to me.