theKashey / used-styles

📝All the critical styles you've used to render a page.
MIT License
138 stars 10 forks source link

Unlock selectors on discovery #30

Closed theKashey closed 2 years ago

theKashey commented 3 years ago

Currently, any selector will be inlined when the last part of it is found, however we can accept only those ones, which first part was found before as well

.dark-theme .header
⬇️
<div class='header'>does nothing</div>

<div class="dark-theme"> "unlocks .dark-theme"
 <div class='header'>uses style</div> 
theKashey commented 2 years ago

The idea is around the sequential nature of nested selectors:

// `dark-theme` is introduced first
<div class="dark-theme"> "unlocks .dark-theme"
// dependent selectors are always follow
  <div class='header'>uses style</div> 

This allows embedding a check into usedFilter - a function before preventing duplication of selectors.

It does not handle proper gating, and absolutely ignores DOM structure. But it does the job