var postcss = require('postcss') var selectorParser = require('postcss-selector-parser') module.exports = postcss.plugin('add-id', function (opts) { return function (root) { var keyframes = Object.create(null) root.each(function rewriteSelector (node) { if (!node.selector) { // handle media queries if (node.type === 'atrule') { if (node.name === 'media' || node.name === 'supports') { node.each(rewriteSelector) } else if (node.name === 'keyframes') { // register keyframes keyframes[node.params] = node.params = node.params + '-' + opts.id } } return } node.selector = selectorParser(function (selectors) { selectors.each(function (selector) { var node = null selector.each(function (n) { // ">>>" combinator if (n.type === 'combinator' && n.value === '>>>') { n.value = ' ' n.spaces.before = n.spaces.after = '' return false } // /deep/ alias for >>>, since >>> doesn't work in SASS if (n.type === 'tag' && n.value === '/deep/') { var next = n.next() if (next.type === 'combinator' && next.value === ' ') { next.remove() } n.remove() return false } if (n.type !== 'pseudo' && n.type !== 'combinator') { node = n } }) selector.insertAfter(node, selectorParser.className({ value: opts.id })) // TODO, options for mp // selector.insertAfter(node, selectorParser.attribute({ // attribute: opts.id // })) // selector.prepend(selectorParser.className({ // value: `${opts.id} ` // })) }) }).process(node.selector).result }) // If keyframes are found in this