Unused css selectors given a one letter selector - is sorting by frequency working correctly?

universemaster commented 2 years ago

When I run as below and view renaming-map-min I get a lot of one letter selectors assigned to unused css selectors.

Similarly, the ordering does not reflect the frequency - I have very common selectors given two letters, and rare (or unused) selectors given one letter.

async function autoRenameCssClasses() {

  const rcsCore = require('rcs-core');
  const rcs = require('rename-css-selectors');

const rcsOptions = {
    overwrite: false, // we do not want to overwrite the html file.
    cwd: outdir,
    newPath: new-path,
    // optimize: true  //It's supposed to be on by default.
  }

  try {
    await rcs.process.auto(['my-file.html', 'my-javascript.js'],
      rcsOptions);
    await rcs.mapping.generate('./', {
      overwrite: true, // We want to always overwrite the mapping file.
      origValues: false,
      fileName: 'renaming-map-min'
    });
  } catch (err) {
    console.log('error in rcs', err);
  }
}

JPeer264 commented 2 years ago

Sorry for the late response. Could you share a minimal example of your files?

universemaster commented 2 years ago

I'm not doing anything special. I'm pretty sure that the below doesn't really add any new information to what I've already reported, but here's a very clear example.

Create a folder with a subfolder called 'outdir'.

Create a javascript file called auto-rename-css-classes.mjs

import rcsCore from 'rcs-core';
import rcs from 'rename-css-selectors';

(async function autoRenameCssClasses() {

  const rcsOptions = {
    overwrite: false, // we do not want to overwrite the html file.
    // cwd: 'class-renaming-demo',
    newPath: 'outdir',
    // optimize: true  //It's supposed to be on by default.
  };

  try {
    await rcs.process.auto(
      ['incorrectly-minified-class-names-demo.html'],
      rcsOptions
    );
    await rcs.mapping.generate('./', {
      overwrite: true, // We want to always overwrite the mapping file.
      origValues: false,
      fileName: 'renaming-map-min',
    });
  } catch (err) {
    console.log('error in rcs', err);
  }
})();

Create a file called incorrectly-minified-class-names-demo.html

<!DOCTYPE html>
<html>
  <style>
    .unused-class-1,
    .unused-class-2,
    .unused-class-3,
    .unused-class-4,
    .unused-class-5,
    .unused-class-6,
    .unused-class-7,
    .unused-class-8,
    .unused-class-9,
    .unused-class-10,
    .unused-class-11,
    .unused-class-12,
    .unused-class-13,
    .unused-class-14,
    .unused-class-15,
    .unused-class-16,
    .unused-class-17,
    .unused-class-18,
    .unused-class-19,
    .unused-class-20,
    .unused-class-21,
    .unused-class-22,
    .unused-class-23,
    .unused-class-24,
    .unused-class-25,
    .unused-class-26,
    .unused-class-27,
    .unused-class-28,
    .unused-class-29,
    .unused-class-30 {
      color: red;
    }
    .in-use-class1,
    .most-frequent-class,
    .in-use-class3 {
      color: blue;
    }
  </style>
  <body>
    <span class="in-use-class1"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="most-frequent-class"></span>
    <span class="in-use-class3"></span>
  </body>
</html>

In the folder run node auto-rename-css-classes.mjs. This produces the following renaming-map-min.json:

{
    "selectors": {
        ".t": "unused-class-1",
        ".n": "unused-class-2",
        ".r": "unused-class-3",
        ".i": "unused-class-4",
        ".s": "unused-class-5",
        ".o": "unused-class-6",
        ".u": "unused-class-7",
        ".a": "unused-class-8",
        ".f": "unused-class-9",
        ".l": "unused-class-10",
        ".c": "unused-class-11",
        ".h": "unused-class-12",
        ".p": "unused-class-13",
        ".d": "unused-class-14",
        ".v": "unused-class-15",
        ".m": "unused-class-16",
        ".g": "unused-class-17",
        ".y": "unused-class-18",
        ".b": "unused-class-19",
        ".w": "unused-class-20",
        ".x": "unused-class-21",
        ".k": "unused-class-22",
        "._": "unused-class-23",
        ".j": "unused-class-24",
        ".q": "unused-class-25",
        ".z": "unused-class-26",
        ".te": "unused-class-27",
        ".tt": "unused-class-28",
        ".tn": "unused-class-29",
        ".tr": "unused-class-30",
        ".ti": "in-use-class1",
        ".ts": "most-frequent-class",
        ".to": "in-use-class3"
    }
}

Notice that:

all single letter class names are taken by unused classes
the most frequent class is listed between two other classes only used once and thus may not have been given a single letter even if it wasn't for the unused classes.

universemaster commented 2 years ago

To be clear for any other observers here:

the optimisation functionality I am expecting relates to the "completed" issue #80 .

I am indeed using the version rename-css-selectors": "^4.1.0

universemaster commented 2 years ago

Side note: the class "e" is never used. This is first letter of alphabet at https://github.com/JPeer264/node-rcs-core/blob/7d6fb24e3182484887626eb358e1ab87a99d5afd/lib/nameGenerator.ts#L17

I guess an off-by-one bug?

JPeer264 / node-rename-css-selectors

Unused css selectors given a one letter selector - is sorting by frequency working correctly? #86