Enable hooks to drop / retain individual css declarations

[daKmoR]

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;

[leeoniya]

i don't want to bake this into the core, but would be okay with adding a callback that can hook into this externally via a declaration processor callback here:

dropcss/src/css.js

Lines 204 to 207 in fd9b383

	case PROPERTIES:
	if (lastSelsLen > 0)
	out += '{' + tokens[++i] + '}';
	break;

{
   declProc(selsArr, declBlob) {
     // parse and filter declarations, and return new decls blob.
     return myFilteredDeclsBlob;
   }
}

you'll need to pull let sels; out of the for loop, so it can be picked up on the next iteration in PROPERTIES and passed into this callback.

feel free to make a PR if you get this working.