bezoerb / inline-critical

Inline critical path CSS and async load existing stylesheets
Other
115 stars 15 forks source link

Add exactSelector option to match only provided selector #280

Open lynlevenick opened 3 years ago

lynlevenick commented 3 years ago

The selector option provides only one of four selectors, so if another matches before the user's selector then the option is ignored. Add a new option which controls whether the provided selector is the only one used.

For my use case, this would fix a potential rerender where the stylesheet is added before an inlined script in head. On occasion, the browser renders the page background, which can result in a full-screen white background flash when dark mode is desired by the user.

edit: I'm not sure why the Node 10 tests are failing; something to do with coverage?


At present, I'm hacking around this with something like so:

const options = {
  selector: 'head link[rel="stylesheet"]'
};
const oldJoin = Array.prototype.join;
Array.prototype.join = function (...args) {
  if (this[0] === options.selector) {
    return this[0];
  }
  return oldJoin.call(this, ...args);
};

so no worries if this is out of scope.