Refer components' class name in the component

[matype]

https://github.com/morishitter/picostyle/issues/51

Ex:

const Foo = style("div")({
  // some declarations
  "~ ${this-components-classname}": {
    margin-start: "1em",
  }
})

[B-Teague]

Do you want to use a keyword and replace the keyword with the generated class name? Maybe handlebars syntax?

Example:

const Foo = style("div")({
  // some declarations
  "~ {class}": {
    margin-start: "1em",
  }
})

//---- index.js ----
function createStyle(rules, cssType, p) {
  var id = p + _id++
  var name = cssType + id
  rules.forEach(function(rule) {
    if (/^@/.test(rule)) {
      var start = rule.indexOf("{") + 1
      rule = rule.slice(0, start) + name + rule.slice(start)
    } else {
      rule = name + rule
    }
   //=========================
   // Replace the {class} keyword with the generated class name
    rule.replace("{class}", name)
   //=========================
    sheet.insertRule(rule, sheet.cssRules.length)
  })
  return id
}