attach-css/index.js

Localizes CSS based on a virtual DOM tree.

var css = require('css')

module.exports = function (src, vtree, opts) {
  var ast = css.parse(src, opts)
  prefixSelector(ast.stylesheet.rules, vtree)
  return css.stringify(ast, opts)
}

function prefixSelector (rules, vtree) {
  var props = vtree.properties || {}

  var rootClass = props.className
  var rootId = props.id
  if (!rootClass && !rootId) throw new Error('The top level VirtualNode must have a className or an id')
  rootClass = rootClass.split(' ')[0]

  var rootTag = vtree.tagName.toLowerCase()

  rules = rules.map(function (rule) {
    rule.selectors = rule.selectors.map(function (selector) {
      var parts = selector.split(' ')
      if (parts[0].toLowerCase() === rootTag) {
        selector = parts[0] + '.' + rootClass
        if (parts.length > 1) selector += ' ' + parts.slice(1).join(' ')
        return selector
      } else if (
        (parts[0] === '#' + rootId || parts[0] === '.' + rootClass) ||
        (rootClass && parts[0].slice(1, rootClass.length + 1) === rootClass) ||
        (rootId && parts[0].slice(1, rootId.length + 1) === rootId)
      ) {
        return selector
      }
      return '.' + rootClass + ' ' + selector
    })
    // TODO: Detect nested rules and recurse
    return rule
  })
}