Condense CSS

[sawyerclick]

The generated CSS should take a utility approach so that it is as small as possible. I recommend generalizing classes to be property-specific for those that repeat more than once. This will save file sizes and network requests for larger files. For example, we could have:

#test-output p, #text-output a {
  font-family: inter;
}

instead of

#test-output p {
  font-family: inter;
}
#text-output a {
  font-family: inter;
}

Demo We could use an object to track this. Here's some pseudocode with my thoughts

const styles = {}
const repeats = {}

// iterate through node (too expensive?)
for (let node of nodes) {
  // iterate through node style key/value pairings
  for (let style of node.styles) {
    // see if styles obj above has the key/value pair used here
    if (styles.hasOwnProperty(style)) return repeats[style.key] = style.value

    // add this iterated style to the styles obj
    styles[style.key] = style.value
  }
}

[sawyerclick]

see #76

[sawyerclick]

see #69