search

red-perfume / red-perfume-html

Atomizes the classes defined in HTML
https://red-perfume.github.io
MIT License
2 stars 0 forks source link

Return list of all used classes (for removing unused css) #4

Open TheJaredWilcurt opened 2 years ago

TheJaredWilcurt commented 2 years ago

In order to remove unused CSS, we need to know what CSS gets used!

{
  atomizedHtml: '<div class="frog rp_0 rp_3"></div>',
  markupErrors: [],
  usedClasses: [
    'frog',
    'rp_0',
    'rp_3'
  ]
}
TheJaredWilcurt commented 2 years ago

In order to remove attribute-only selectors ([href] { margin: 0 }) or other non-class-based selectors, we would need to look at every selector in the atomized CSS file, and then detect if it would apply to the markup, and only then retain it (or if it is in the whitelist). Not sure where that code should lie (css, html, or task repo). We may also want to look into pulling in an existing library for removing unused CSS, since it isn't really the main focus of Red Perfume. In which case, based on the API of that library, we could determine what data needs outputted from the Red Perfume libraries.