Как я могу программно изменить CSS, чтобы ограничить его область?

Question

У меня есть кусок CSS как строка, и я хочу вставить его в DOM, чтобы он применим только к элементам в конкретном контейнере. Некоторые инструменты, такие как Polymer, например, переписывают селектор CSS, поэтому они применяются только в ограниченной области. Как я могу сделать что-то подобное, чтобы при вставке этого CSS в DOM он не изменил все элементы на странице?

Чтобы сделать его более конкретным, представьте себе следующий HTML и CSS из внешнего источника:

<style>p { font-size: 20px; }</style> 
<p>Boo.</p> 

Я хочу, чтобы вставить эти элементы в #container элемент, но я не хочу, чтобы изменить Font- размер для всех <p> элементов. Я хотел бы переписать все селекторы внутри этого элемента <style>, поэтому они применимы только в пределах #container (p ->#container p и т. Д.). Как?

Answer 1

Использование https://github.com/reworkcss/css для разбора CSS, а затем изменить селекторы, и, наконец, stringify:

const CSS = require('css'); 

function scopeCSS(css, scope) { 
    const ast = CSS.parse(css); 
    for (let rule of ast.stylesheet.rules) { 
    if (rule.type == 'rule') { 
     rule.selectors = rule.selectors.map(selector => `${scope} ${selector}`); 
    } 
    } 
    return CSS.stringify(ast); 
} 

scopeCSS('div { color: black; }', '#foo'); 
// #foo div { 
// color: black; 
// } 

http://requirebin.com/?gist=trevordixon/839d0674531dafa98fb95ae51474245e