ShorterCSS - An Open Source Solution for shortening/obfuscating CSS selectors

This project continues the idea of gulp-selectors

Minify those pesky selector names down to nothing with this fancy projects. Minified selectors will be applied consistently across all files piped into it.

Input	Output
.class-name { ... }	.a { ... }
.another-class { ... }	.b { ... }
#an-id { ... }	#a { ... }
<div class="class-name"> ... </div>	<div class="a"> ... </div>
document.getElementById("an-id")	document.getElementById("a")
document.querySelectorAll("#an-id > .class-name")	document.querySelectorAll("#a > .a")

You're like: .some-super-descriptive-selector-name {...}, and it's like: .a {...}

Setup

1. First and foremost: npm i -D shortercss

2. Create a shortercss.config.js file and put some options: see the available options

shortercss.config.js is a file from which ShorterCSS gets its config

// shortercss.config.js

module.exports = {
  /*config*/
};

3. create a ShorterCSS instace and run it on a string:

const ShorterCSS = require("shortercss");

const Instance = new ShorterCSS();

const code = `<h1 class="some__class"></h1>`;

const reducedCode = Instance.processors[yourProcessor](code, Instance.classLibrary, Instance.idLibrary);

console.log(reducedCode);

by default ShorterCSS will look at the root of your project for the config file. If you don't like this you can either:

• specify path to the shortercss.config.js if it's in a different directory

const Instance = new ShorterCSS("path/to/shortercss.config.js");

• put your config as a function's argument:

const Instance = new ShorterCSS({
  /*config*/
});

Config

ShorterCSS is fully configurable. Here's the scheme:

// shortercss.config.js

// first import the processors - html, css and js-strings are built-in
const html = require("shortercss/dist/processors/html.js").default;
const css = require("shortercss/dist/processors/css.js").default;
const jsStrings = require("shortercss/dist/processors/js-strings.js").default;
// Of course you can use your own ones
const yourProcessor = require("path/to/your/processor");

module.exports = {
  // put the processors here
  processors: {
    html,
    css,
    jsStrings,
    yourProcessor,
  },
  // set bindings - assign file extensions to the processors specified above
  bindings: {
    html: ["html", "pug"],
    css: ["css"],
    jsStrings: ["js"],
    yourProcessor: ["vue", "jsx"],
  },
  // put heree classes and ids that you don't want to be minified
  ignores: {
    classes: ["class", "another_class"],
    ids: ["id", "another-id"],
  },
};

Processors

ShorterCSS relies on processors. Processors are just functions that follow the scheme below:

function(file: string, classLibrary: LibraryInstance, idLibrary: LibraryInstance): string {
  // your beutiful code
  return TersedFile
};

LibraryInstance is an istance of the Library class:

interface LibraryInstance {
  _library: LibraryType;
  _ignores: Array<string>;
  size: number;
  has(name: string): boolean;
  get(name: string, dontCount?: boolean): string; // use this to get a shortname of a class or id
  getAll(): Array<string>;
  getUnused(): Array<string>;
  getSize(): number;
  getFullNames(): Array<string>;
  stats(): { size: number; unused: number };
}

Still not sure? Jump into the project's src folder, or raise an issue!

Creating processors

Of course, you don't have to rely on the built-in processors. Just create a function like the one above and put it in the config.

Available processors

Regex-based:

• html (built-in)
• css (built-in)
• jsStrings (built-in)

Have you created a processor? Share it with us 😃

Use ShorterCSS with a task runner/bundler

• A Gulp plugin: gulp-shortercss

Contributing

Sure, if you think you can improve this project, go ahead! But, just three little things:

• use Typescript where possible
• follow Conventional Commit's specification