Multi selectors, id and class shortcuts, underscores as hyphens

[jussiry]

Started using CCSS in a CoffeeScript framework i'm building (https://github.com/jussiry/houCe), and added some new features to it:

# multiselectors:
'div, li':  ...  ->  div:  ...
                     li:   ...
div_and_li: ...  ->  div:  ...
                     li:   ...

# i_ (id) and c_ (class) prefixes to avoid typing strings:
i_name:  ...   ->   '#name':    ...
c_name:  ...   ->   '.name':    ...

# underscores as hyphens, as suggested in the other issue:
font_size: ...   ->   'font-size':  ...

And here's the iterator that adds these features:

ccss_extras = (obj)->
  for orig_key, val of obj
    ccss_extras val if typeof val is 'object'
    # split multi definitions:
    keys = orig_key.split(/,|_and_/).map('trim')
    keys.each (k)->
      # change i_plaa to '#plaa' and c_plaa to '.plaa'
      if      k[0..1] is 'i_' then k = '#'+k[2..-1]
      else if k[0..1] is 'c_' then k = '.'+k[2..-1]
      # font_size to font-size
      if typeof val isnt 'object'
        k = k.replace(/_/g,'-')
      # set new key and delete old:
      if k isnt orig_key
        if typeof val is 'object'
          obj[k] ?= {}
          obj[k].merge val
        else
          obj[k] = val
        delete obj[orig_key]
  obj

Notice that the code uses merge function from Sugar.js. You can replace that with extend from JQuery or Underscore, if those are the libraries of your choice.

[aeosynth]

i already have comma multiselectors in master, _and_ seems clunky, the other features are cool. edit the existing code and send a pull request. there's an extend function in the source already.

[aeosynth]

maybe we could overload _ and make that the multiselector:

div_li: ...  ->  div:  ...
                 li:   ...

[jussiry]

Hmm, i tried comma separation before adding the feature, but it didn't do anything for me; have to test it again. I'll try to find time to make a fork and add the features with pull request, but might take a while. Maybe two underscores as separator div__li? I often use underscores in longer id/class names, so using single underscore as separator would brake them.

[aeosynth]

like i said it's in master and not in the npm version. there are other characters to choose from, like $. _and_ is just really clunky, and i don't think i would ever personally choose that over just quoting everything.

[jussiry]

Ah, i'v never done npm package myself, so didn't realize that of course that's different from master. True, though div$li probably isn't that pretty either. I'd vote for div__li or div_li.

[aeosynth]

I'd vote for div__li or div_li.

sure two underscores seems fine. it shouldn't take very long to add these features, the entire ccss source is under 50 lines.