README
ShorterCSS - An Open Source Solution for shortening/obfuscating CSS selectors
gulp-selectors
This project continues the idea ofMinify 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
First and foremost:
npm i -D shortercss
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*/
};
- 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 :smiley:
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