How to deal with inline styles?

[bartveneman]

It should be fairly easy to find inline styles, and it could certainly be very interesting to see their results, but how should they be reported? Inline styles don't have selectors, but merely declarations.

Scraping inline styles from a page:

[...document.querySelectorAll('[style]')].map(el => el.getAttribute('style')).join('')

We could generate a unique selector for each inline style attribute, but it could interfere with the resulting CSS statistics:

const nanoid = require('nanoid')
[...document.querySelectorAll('[style]')].map(el => {
  return `[x-inline-style-${nanoid()}] { // create a custom [x-inline-style-*] selector
    ${el.getAttribute('style')} // contains all declarations
  }`
)

[bartveneman]

Another option is to not add any selectors, but only the rules' contents, like declarations and their values.

<span style="color: red; font-size: 12px;">MY TEXT</span>

{
  'rules.total': 1,
  'selectors.total': 0,
  'declarations.total': 2,
  'values.total': 2,
}

Perhaps a bit counter-intuitive, but pretty accurate.

[bartveneman]

My initial comment is probably the best, because it is easy to filter out any [x-inline-style-${nanoid()}] selectors, before doing analysis.

The second comment makes little sense.