Non-matching selectors for a declaration block get pruned, but do not get inlined

[dominykas]

Suppose your stylesheet has body, html, div, p { margin: 0; padding: 0 }, but your document does not have a p. The produced inline stylesheet will only have body, html, div, but the original stylesheet will have the whole declaration block removed, leaving your ps that you add dynamically unstyled.

[dominykas]

I only started poking around to see if I can fix this myself to spot this commit: https://github.com/GoogleChromeLabs/critters/commit/1f9fd6628753a159579ac4718de25f89fa25acf3 - could it be the culprit?

[developit]

I can confirm, this is still an issue in [email protected]:

import Critters from 'critters';

setTimeout(async () => {
  const assets = {
    '/test.css': 'body, html, div, p { margin: 0; padding: 0 }'
  };
  let critters = new CrittersTest(assets, { pruneSource: true });
  let html = await critters.process(`<div class="foo">hi</div><link rel="stylesheet" href="/test.css">`);

  console.log(html);
  // "...  <style>body,html,div{margin:0;padding:0}</style>  ..."

  console.log(assets['/test.css']);
  // ""  (empty string)
});

class CrittersTest extends Critters {
  constructor(assets, options = {}) {
    super({ path: '/', publicPath: '/', ...options });
    this.assets = assets || {};
  }
  readFile(f) {
    return this.assets[f];
  }
  pruneSource(style, before, sheetInverse) {
    if (style.$$name) assets[style.$$name] = sheetInverse;
    return super.pruneSource(style, before, sheetInverse);
  }
}