Helper snippets for working with Element attributes and CSSOM

collect-node-attributes.js

// Assumes selected node in Chrome Developer tools
[...$0.getAttributeNames()].map((name) => [name, $0.getAttribute(name)]);

cssom-bundle-all-rules-with-pseudo-elements-in-selector.js

// Make sure to look through all of these (especially the ones related to form field validation)
// https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

const PSEUDO_SELECTOR_REGEXP = /:(link|visited|hover|active|before|focus|focus-within|enabled|disabled)\b/gm;
[...document.styleSheets].map(({rules}) => {
  return [...rules];
})
.flatMap(rule => rule)
.filter(rule => rule instanceof CSSStyleRule)
.filter(rule => PSEUDO_SELECTOR_REGEXP.test(rule.selectorText))
.reduce((distribution, rule) => {
  const selector = rule.selectorText;
  const matches = selector.match(PSEUDO_SELECTOR_REGEXP);
  matches.forEach((pseudo) => {
    if (!distribution.has(pseudo)) {
      distribution.set(pseudo, []);
    }
    distribution.get(pseudo).push(rule);
  });
  return distribution;
}, new Map());

cssom-collect-all-font-face-rules.js

[...document.styleSheets].map(({rules}) => {
  return [...rules];
})
.flatMap(rule => rule)
.filter(rule => rule instanceof CSSFontFaceRule);

cssom-collect-all-keyframe-rules.js

// TODO (ryan)
[...document.styleSheets].map(({rules}) => {
  return [...rules];
})
.flatMap(rule => rule)
.filter(rule => rule instanceof CSSKeyframesRule);

cssom-collect-all-rules-with-specific-pseudo-selectors.js

// Make sure to look through all of these (especially the ones related to form field validation)
// https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

const PSEUDO_SELECTOR_REGEXP = /:(link|visited|hover|active|before|focus|focus-within|enabled|disabled)\b/;
[...document.styleSheets].map(({rules}) => {
  return [...rules];
})
.flatMap(rule => rule)
.filter(rule => rule instanceof CSSStyleRule)
.filter(rule => PSEUDO_SELECTOR_REGEXP.test(rule.selectorText));

cssom-collect-all-rules.js

// Iterate through all of the style sheets and collect all of the CSS Style Rules
[...document.styleSheets].map(({rules}) => {
  return [...rules];
}).flatMap(rule => rule);

get-computed-styles-simple.js

const getComputedStylesSimple = (element) => {
  const properties = Object.entries(window.getComputedStyle(element))
    .map(([prop, value]) => [prop, value, parseInt(prop, 10)])
    .filter(([prop, value, index]) => isNaN(index))
    .map((property) => property.slice(0, 2));
  return new Map(properties);
};

const diffStyles = (element, master = document.documentElement) => {
  const elementStyles = getComputedStylesSimple(element);
  const masterStyles = getComputedStylesSimple(element);
  
  return [...elementStyles.keys()].reduce((diff, name) => {
    const masterValue = masterStyles.get(name);
    const elementValue = elementStyles.get(name);
    if (elementValue != masterValue) {
      diff[name] = elementValue;
    }

    return diff;
  }, {});
};

// This is not quite right.
const dummy = document.createElement(`dummy-${Date.now()}`);
document.body.appendChild(dummy);
const diff = diffStyles(document.body, dummy);
console.log("diff", JSON.stringify(diff, null, 2));
dummy.remove();