projectwallace/extract-css-core

Add element breadcrumbs for style tags and inline styles

bartveneman opened this issue · 1 comments

Report where in the DOM the <style> and <x style="..."> were found. This breadcrumb could be generated by looking at the target DOM node, and traverse up the (while (node.parentNode)) and generating the selector for that node by taking the nodeName, className and ID.

[
  {
    href: undefined,
    breadcrumb: ['html', 'body', 'thing', 'p'],
    type: 'inline'
    css: '[x-inline-style] { color: red; }'
  },
  {
    href: undefined,
    breadcrumb: ['html', 'head', 'style'],
    type: 'style',
    css: 'p { }'
  }
]

Example breadcrumb implementation: https://codepen.io/bartveneman/pen/GRoooxa