docs: function processPseudoClass (component, idName, pseudoData) {
    let pseudoId = component.node.getAttribute('data-pseudo-id')
  
    function getCssText (selector, rulesObj) {
      // TODO: must process vendors if needed.
      // !important is needed since the style rules is inline for most components.
      const rulesText = Object.keys(rulesObj).map(key => `${camelToKebab(key)}:${rulesObj[key]}!important;`).join('')
      return `${selector}{${rulesText}}`
    }
  
    if (!pseudoId) {
      pseudoId = getPseudoId()
      component.node.setAttribute('data-pseudo-id', pseudoId)
      const style = document.createElement('style')
      style.type = 'text/css'
      style.setAttribute('data-pseudo-id', pseudoId)
      document.getElementsByTagName('head')[0].appendChild(style)
      const cssText = Object.keys(pseudoData).map(pseudo => {
        const rules = pseudoData[pseudo]
        return getCssText(`[data-pseudo-id="${pseudoId}"]${pseudo}`, rules)
      }).join('')
      return style.appendChild(document.createTextNode(cssText))
    }
  
    const styleSheets = Array.prototype.slice.call(document.styleSheets || [])
      .filter(style => style.ownerNode.getAttribute('data-pseudo-id') === pseudoId)
    if (!styleSheets || styleSheets.length <= 0) {
      return
    }
    const styleSheet = styleSheet[0]
    const rules = styleSheet.cssRules || styleSheet.rules
    Object.keys(pseudoData).forEach(pseudo => {
      const data = pseudoData[pseudo]
      const selector = `[data-pseudo-id="${pseudoId}"]${pseudo}`
      const res = Array.prototype.slice.call(rules).reduce((res, rule, idx) => {
        (rule.selectorText === selector) && (res.idx = idx)
        return res
      }, { idx: -1 })
      const { idx } = res
      if (idx !== -1) {
        const pseudoRule = rules[idx]
        const match = pseudoRule.cssText.match(/^[^{]+\{([^}]+)\}/)
        if (match && match[1]) {
          const rulesData = match[1].split(';').reduce((res, str) => {
            const match = str.match(/(\S+)\s*:\s*(\S+)/)
            if (match && match[1] && match[2]) {
              res[match[1]] = match[2]
            }
            return res
          }, {})
          extend(rulesData, data)
          Object.keys(rulesData).forEach(rule => {
            if (!rulesData[rule]) { delete rulesData[rule] }
          })
          styleSheet.deleteRule(idx)
          styleSheet.insertRule(getCssText(selector, rulesData), rules.length - 1)
        }
      }
      else {
        styleSheet.insertRule(getCssText(selector, data), rules.length)
      }
    })
  }