Disable font-face exclusion

[Thorn Walli]

Hello,

is there any way I can stop font faces from being extracted?

Already did it with

/* critters:include start */ or /* critters:include */. I'm afraid that font-faces are basically touched, but unfortunately it makes problems for us.

Because in the code the include doesn`t seem to affect the font-faces.

critters/packages/critters/src/index.js

Lines 506 to 594 in 1947611

  
 if (rule.type === 'rule') { 
   // Handle comment based markers 
   if (includeNext) { 
     includeNext = false; 
     return true; 
   } 
  
   if (excludeNext) { 
     excludeNext = false; 
     return false; 
   } 
  
   if (includeAll) { 
     return true; 
   } 
  
   if (excludeAll) { 
     return false; 
   } 
  
   // Filter the selector list down to only those match 
   rule.filterSelectors((sel) => { 
     // Validate rule with 'allowRules' option 
     const isAllowedRule = options.allowRules.some((exp) => { 
       if (exp instanceof RegExp) { 
         return exp.test(sel); 
       } 
       return exp === sel; 
     }); 
     if (isAllowedRule) return true; 
  
     // Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist. 
     // This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches. 
     if ( 
       sel === ':root' || 
       sel.match(/^::?(before|after)$/) || 
       sel === 'html' || 
       sel === 'body' 
     ) { 
       return true; 
     } 
     sel = sel 
       .replace(/(?<!\\)::?[a-z-]+(?![a-z-(])/gi, '') 
       .replace(/::?not\(\s*\)/g, '') 
        // Remove tailing or leading commas from cleaned sub selector `is(.active, :hover)` -> `is(.active)`. 
       .replace(/\(\s*,/g, '(') 
       .replace(/,\s*\)/g, ')') 
       .trim(); 
     if (!sel) return false; 
  
     try { 
       return crittersContainer.exists(sel); 
     } catch (e) { 
       failedSelectors.push(sel + ' -> ' + e.message); 
       return false; 
     } 
   }); 
  
   // If there are no matched selectors, remove the rule: 
   if (!rule.selector) { 
     return false; 
   } 
  
   if (rule.nodes) { 
     for (let i = 0; i < rule.nodes.length; i++) { 
       const decl = rule.nodes[i]; 
  
       // detect used fonts 
       if (decl.prop && decl.prop.match(/\bfont(-family)?\b/i)) { 
         criticalFonts += ' ' + decl.value; 
       } 
  
       // detect used keyframes 
       if (decl.prop === 'animation' || decl.prop === 'animation-name') { 
         // @todo: parse animation declarations and extract only the name. for now we'll do a lazy match. 
         const names = decl.value.split(/\s+/); 
         for (let j = 0; j < names.length; j++) { 
           const name = names[j].trim(); 
           if (name) criticalKeyframeNames.push(name); 
         } 
       } 
     } 
   } 
 } 
  
 // keep font rules, they're handled in the second pass: 
 if (rule.type === 'atrule' && rule.name === 'font-face') return; 
  

Would like to disable everything that has to do with fonts.

Example: We have x font faces in our HTML. These are then loaded in the client via document.fonts.
But because Critter takes them out they are missing.