Infinite loop about dropcss

[leeoniya]

tried it again by grabbing the page via wget and manually extracting the #critical-styles content: padmapper-san-francisco-ca.zip. still cannot reproduce.

const fs = require('fs');
const dropcss = require('dropcss');

const html = fs.readFileSync('html.html', 'utf8');
const css = fs.readFileSync('styles.css', 'utf8');

const cleaned = dropcss({
    html,
    css
});

console.log(cleaned.css);

[leeoniya]

i'm not able to reproduce this. here's what i'm doing:

const puppeteer = require('puppeteer');
const dropcss = require('dropcss');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.padmapper.com/apartments/san-francisco-ca');
    const html = await page.content();
    const css = await page.$eval('#critical-styles', el => el.textContent);
    await browser.close();

    let start = +new Date();

    let clean = dropcss({
        css,
        html,
    });

    console.log(+new Date() - start);

    fs.writeFileSync('out2.css', clean.css, 'utf8');
})();

[heygrady]

I'll try that. thanks

[heygrady]

You are correct. Seems to work. Here's a variation on your same test. I will use it to verify issues in the future.

https://repl.it/@heygrady/dropcss-padmapper-test

const fetch = require('node-fetch');
const cheerio = require('cheerio')
const dropcss = require('dropcss');
const { performance, PerformanceObserver } = require('perf_hooks')

const url = 'https://www.padmapper.com/apartments/san-francisco-ca';

run = async () => {
  console.log('downloading...');
  const response = await fetch(url);
  const html = await response.text();
  const $ = cheerio.load(html);
  const css = $('#critical-styles').html();

  console.log(html.substring(0, 100), '...');
  console.log(css.substring(0, 100), '...');
  console.log('\n');
  console.log('starting...');

  performance.mark('start-dropcss')
  try {
    let clean = dropcss({
      css,
      html,
    });
    performance.mark('end-dropcss')
    console.log('worked!', css.length, '=>', clean.css.length);
  } catch (e) {
    performance.mark('end-dropcss')
    console.log(e)
  }
  performance.mark('end-dropcss')
  performance.measure('dropcss', 'start-dropcss', 'end-dropcss')
}

const obs = new PerformanceObserver((items) => {
  const measurements = items.getEntries('measure')
  measurements.forEach(({ name, duration }) => {
    console.info(`performance: ${name} in ${duration}ms`)
  })
})
obs.observe({ entryTypes: ['measure'] })

run();