Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
universemaster opened this issue May 20, 2022 · 4 comments
Open

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

universemaster opened this issue May 20, 2022 · 4 comments

Comments

@universemaster
Copy link

universemaster commented May 20, 2022 •
edited
Loading

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
Copy link
Owner

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

@universemaster
Copy link
Author

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
Copy link
Author

To be clear for any other observers here:

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

@universemaster
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@universemaster @JPeer264