Newfoundland Pitbull Mix

    shortercss
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    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*/
    };
    1. 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

    Contributing

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

    Install

    npm i shortercss

    DownloadsWeekly Downloads

    7

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    35.6 kB

    Total Files

    24

    Last publish

    Collaborators

    • matb85