Sites with even partial aphrodite usage break loading the polyfill

[calinoracation]

We're in a case where we're migrating off of Aphrodite to more static CSS solutions, however we still have a significant amount of Aphrodite that hasn't been moved yet. Aphrodite gets really, really broken when you touch it's <style> tag. Khan/aphrodite#376. I don't think there's much chance of it being fixed upstream, so am curious if it would make sense to build in a bail-out on that particular tag in this polyfill.

In the scroll-timeline-css file for handleStyleTag, I added this bail out to make it ignore them:

if (el.innerHTML.trim().length === 0 || el.dataset.aphrodite === 'true') {
  return;
}

Not sure if this specific solution or something else should be considered, but it broke luckily just our staging environment before we found and fixed it. Even doing something ridiculous like el.innerHTML = el.innerHTML breaks Aphrodite.

[flackr]

I agree we should have a way to skip the css parsing. The JS parts are also more efficient because they don't have scan anything to detect usage. I was thinking it might be nice to build multiple bundles so that you'd have a smaller script to include if you skip the CSS parsing.

[flackr]

if (el.innerHTML.trim().length === 0 || el.dataset.aphrodite === 'true') {
  return;
}

Is this an attribute aphrodite sets? Would it make sense to land this as well?

[calinoracation]

@flackr Ahh, yeah that sounds good, just hit this again adopting the new version, so would love to land this.