Enable hooks to drop / retain individual css declarations

I want to optimize css file across multiple html files... those css files could be different so it would be nice if you could drop or retain individual declarations. Potentially via didRetainDeclaration and dropDeclaration.

it would allow doing something like this...

if you would be interested in supporting this I could prepare a PR for it 🤗

let me know what you think 🤗

Some more details

I currently have it working in a fork and it usage looks like this

dropcss({
  html: page.html,
  css: page.css,
  didRetain: selector => {
    let sharedCount = sharedUsage.has(selector) ? sharedUsage.get(selector) : 0;
    sharedUsage.set(selector, sharedCount + 1);
  },
  didRetainDeclaration: ({ selector, property, value }) => {
    const key = `${selector} { ${property}: ${value} }`;
    let sharedCount = sharedDeclarations.has(key) ? sharedDeclarations.get(key) : 0;
    sharedDeclarations.set(key, sharedCount + 1);
  },
});

the code change itself is actually rather small and mostly in css.js

function generate(tokens, didRetain, didRetainDeclaration, shouldDropDeclaration) {
  let out = '',
    lastSelsLen = 0;

  for (let i = 0; i < tokens.length; i++) {
    let tok = tokens[i];

    switch (tok) {
      case SELECTORS:
        let sels = tokens[++i];
        lastSelsLen = sels.length;

        if (lastSelsLen > 0) {
          sels.forEach(didRetain);
          sels.forEach(selector => {
            const declarations = tokens[i + 2]
              .split(';')
              .map(line => line.trim())
              .filter(_ => !!_);

            let declarationIndex = 0;
            for (const declaration of declarations) {
              const [property, value] = declaration.split(':').map(value => value.trim());

              if (shouldDropDeclaration({ selector, declaration, property, value })) {
                declarations[declarationIndex] = null;
              } else {
                didRetainDeclaration({ selector, declaration, property, value });
              }
              tokens[i + 2] = declarations.filter(_ => !!_).join(';');
              if (tokens[i + 2] !== '') {
                tokens[i + 2] += ';';
              }
              declarationIndex += 1;
            }
          });
          out += sels.join();
        }
        break;

Start with css.js and its generate function, which the issue identifies as the main implementation point. Add hooks for retaining and dropping individual declarations, then verify that retained declarations trigger the callback and dropped declarations are omitted from the generated CSS.