Function collect

packages/server/src/collect.ts:53–163

(
  html: string,
  css: string,
  classnameModifiers?: ClassnameModifiers
)

 * @returns {CollectResult} object containing the critical and other CSS styles
 */
export default function collect(
  html: string,
  css: string,
  classnameModifiers?: ClassnameModifiers
): CollectResult {
  const animations = new Set();
  const other = postcss.root();
  const critical = postcss.root();
  const stylesheet = postcss.parse(css);
  const ignoredClasses = classnameModifiers?.ignoredClasses ?? [];
  const blockedClasses = classnameModifiers?.blockedClasses ?? [];

  const htmlClassesRegExp = extractClassesFromHtml(html, ignoredClasses);
  const blockedClassesSanitized = blockedClasses.map(escapeRegex);
  const blockedClassesRegExp = new RegExp(
    blockedClassesSanitized.join('|'),
    'gm'
  );

  const isCritical = (rule: ChildNode) => {
    // Only check class names selectors
    if ('selector' in rule && rule.selector.startsWith('.')) {
      const isExcluded =
        blockedClasses.length > 0 && blockedClassesRegExp.test(rule.selector);
      if (isExcluded) return false;

      return Boolean(rule.selector.match(htmlClassesRegExp));
    }

    return true;
  };

  const handleAtRule = (rule: AtRule) => {
    if (rule.name === 'keyframes') {
      return;
    }

    const criticalRule = rule.clone();
    const otherRule = rule.clone();

    let removedNodesFromOther = 0;
    criticalRule.each((childRule: ChildNode, index: number) => {
      if (isCritical(childRule)) {
        otherRule.nodes[index - removedNodesFromOther]?.remove();
        removedNodesFromOther += 1;
      } else {
        childRule.remove();
      }
    });

    rule.remove();

    if (criticalRule.nodes.length > 0) {
      critical.append(criticalRule);
    }
    if (otherRule.nodes.length > 0) {
      other.append(otherRule);
    }