Short-class-names NPM

short-class-names

Short class names of react apps.

Usage

1) Install it and dependences:

npm i -D short-class-names path

2) Create config file:

Create short-class-names.config.js in the npm root directory. Inside it add the follow items, you can edit it how you want:

exports.config = () => {
    return {
        input_path: './dist',
        output_path: './dist/short',
        html_files: [
            'contact.html',
            'index.html'
        ],
        app_files: [
            'main.js',
            'contact.js'
        ]
    }
}

3) Create script to run it:

In package.json add the follow text to the "script" list: "short": "node node_packages/short-class-names/short.js"

4) Ready for use.

Just execute it with: npm run short

The new html, js and css files will put in ./dist/short

IMPORTANT:

This script load css files following local stylesheet declarations from the html files. (You dont need to declare the css files)
This script only edit the class names that exist in local html or app files and in the css files at same time.
The class names on react need to be like class:"*", doesnt work with other style declaration.
Allow multi page, not only SPA.

Recomendation

Use in production after running webpack. I recommend the follow modules to use with webpack:

For javascript:
    DEV: terser-webpack-plugin
    
For html:
    DEV: html-loader html-webpack-plugin
    
For css:
    DEV: css-loader mini-css-extract-plugin node-sass optimize-css-assets-webpack-plugin postcss-loader postcss-preset-env purgecss-webpack-plugin sass-loader style-loader

Using all of this, the result is a react app with the html, javascript and css files super minimized. Perfect for add a last optimization action with short-class-names.

EXAMPLE OF USE

Start structure

...
short-class-names.config.js
/dist
    index.html
    react.js
    local-css-1.css
    local-css-2.css
    local-css-3.css

Config file:

short-class-names.config.js

exports.config = () => {
    return {
        input_path: './dist',
        output_path: './dist/short',
        html_files: [
            'index.html'
        ],
        app_files: [
            'react.js'
        ]
    }
}

Input files:

react.js

....
    return (
      <form class="react-class" onClick={this.toggleButton}>
        {toggle ? "ON" : "OFF"}
      </form>
    );
....

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://www.external-class-for-containers.com/container.css">
        <link rel="stylesheet" href="local-css-1.css">
        <link rel="stylesheet" href="local-css-1.css">
    </head>
    <body class="main">
        <div class="pad">
           <a class="main"></a>
           <a class="other"></a>
        </div>
        <container class="container"></container>
    </body>
</html>

local-css-1.css

.main {
    color: red
}
.main > .pad {
    color: blue
}
.unused {
    color: black
}

local-css-1.css

body {
    background-color: red
}
.other {
    color: yellow
}
.react-class {
    color: blue
}

Output

react.js

....
    return (
      <form class="MTE" onClick={this.toggleButton}>
        {toggle ? "ON" : "OFF"}
      </form>
    );
....

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://www.external-class-for-containers.com/container.css">
        <link rel="stylesheet" href="local-css-1.css">
        <link rel="stylesheet" href="local-css-1.css">
    </head>
    <body class="MDA">
        <div class="MDE">
           <a class="MDA"></a>
           <a class="MTA"></a>
        </div>
        <container class="container"></container>
    </body>
</html>

local-css-1.css

.MDA {
    color: red
}
.MDA > .MDE {
    color: blue
}
.unused {
    color: black
}

local-css-1.css

body {
    background-color: red
}
.MTA {
    color: yellow
}
.MTE {
    color: blue
}

End structure

...
short-class-names.config.js
/dist
    index.html
    react.js
    local-css-1.css
    local-css-2.css
    local-css-3.css
    /short
        index.html
        react.js
        local-css-1.css
        local-css-2.css

Observations of example

Class names that exist in css files but not in html or app files dont change his names.
Class names that exist in html or app files dont change his names.
The class used for dom elements, like body (!= .body) dont change his names.
The files that doesnt appear in stylesheet declarations of the html files dont be imported to the output folder.

short class name react app html hash obfuscate minify css node

path

@infinitebrahmanuniverse/nolb-shor @everything-registry/sub-chunk-2754

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago