extract-css-names

Extract Css Names

Extract all CSS class and id names to generate (replace with) random names (a-z0-9). This module returns all matches. You can use it, to replace matches inside different files.

How it works

Read data from the provided key "data". Extract all names and generate minified class names. The result (for each file) are stored inside 2 files:

outputCss
outputJs

For each file the output are written to the provided file ouput path, in the next iteration the current files output/content readed to avoid dupplicate names.

Example how to use it with gulp

const ExtractCssNames = require('extract-css-names');
const through = require('through2');
const fs = require("fs");

gulp.task('extract:css', (done) => 
{
    /**
     * Storage
     */
    const outputCss = `${__dirname}/extracted-names-for-css`;
    const outputJs = `${__dirname}/extracted-names-for-js`;
    /**
     * Remove old matches
     */
    if (fs.existsSync(outputCss)) { fs.unlinkSync(outputCss); }
    if (fs.existsSync(outputJs)) { fs.unlinkSync(outputJs); }

    return gulp
        .src(
            [
                `public/css/packages.css`,
                `public/css/packages.less.css`,
                `public/css/app.css`,
            ]
        )
        .pipe(
            /**
            * Loop trought each file and extract names
            */
            through.obj(async (cssFileBuffer, enc, cb) => 
            {
                await new ExtractCssNames(
                    {
                        path: cssFileBuffer.path,
                        outputCss,
                        outputJs,
                        data: cssFileBuffer.contents.toString(),
                        restModulo: 10000, 
                        restTime: 200,
                        logger: {
                            logging: true,
                            prefix: 'Extract',
                            displayFilename: true,
                            displayPercentage: true,
                            type: 'bar', // spinner | bar | dots | dots2 | arc | line
                            barBg: 'bgCyan'
                        },
                        displayResult: true,
                        ignore: [
                            '.ContainerCompact',
                        ],
                    }
                );

                cb(null, cssFileBuffer);
            })
        );
});

gulp.task('obfuscate:css',
    gulp.series(
        [
            'extract:css'
        ]
    )
);

Example how to use it with node js

const ExtractCssNames = require('extract-css-names');
const fs = require("fs");

/**
* Matches storage
*/
const outputCss = `${__dirname}/extracted-names-for-css`;
const outputJs = `${__dirname}/extracted-names-for-js`;
/**
* Remove old matches
*/
if (fs.existsSync(outputCss)) { fs.unlinkSync(outputCss); }
if (fs.existsSync(outputJs)) { fs.unlinkSync(outputJs); }

const files = [
    `public/css/packages.css`,
    `public/css/packages.less.css`,
    `public/css/app.css`,
];

const extract = async (c = 0) =>
{
    const data = fs.readFileSync(files[c], 'UTF-8');

    await new ExtractCssNames(
        {
            path: files[c],
            outputCss,
            outputJs,
            data,
            restModulo: 10000,
            restTime: 200,
            logger: {
                logging: true,
                prefix: 'Extract',
                displayFilename: true,
                displayPercentage: true,
                type: 'bar', // spinner | bar | dots | dots2 | arc | line
                barBg: 'bgCyan'
            },
            displayResult: true,
            ignore: [
                '.ContainerCompact'
            ],
        }
    );

    c++;

    if(undefined !== files[c])
    {
        await extract(c);
    }
}

extract();

Example file content of outputCss

[
    {
        "find": ".rc-select-selection__choice-zoom-appear-active",
        "replace": ".a",
        "type": "class"
    },
    {
        "find": ".rc-select-selection__choice-zoom-leave-active",
        "replace": ".b",
        "type": "class"
    },
    {
        "find": ".rc-calendar-year-panel-decade-select-arrow",
        "replace": ".c",
        "type": "class"
    },
    {
        "find": ".rc-calendar-decade-panel-last-century-cell",
        "replace": ".d",
        "type": "class"
    },
    {
        "find": ".rc-calendar-decade-panel-next-century-cell",
        "replace": ".e",
        "type": "class"
    },
    {
        "find": ".rc-calendar-picker-slide-up-appear-active",
        "replace": ".f",
        "type": "class"
    }
]

Example file content of outputJs

[
    {
        "find":"rc-select-selection__choice-zoom-appear-active",
        "replace":"a",
        "type":"class"
    },
    {
        "find":"rc-select-selection__choice-zoom-leave-active",
        "replace":"b",
        "type":"class"
    },
    {
        "find":"rc-calendar-year-panel-decade-select-arrow",
        "replace":"c",
        "type":"class"
    },
    {
        "find":"rc-calendar-decade-panel-last-century-cell",
        "replace":"d",
        "type":"class"
    },
    {
        "find":"rc-calendar-decade-panel-next-century-cell",
        "replace":"e",
        "type":"class"
    },
    {
        "find":"rc-calendar-picker-slide-up-appear-active",
        "replace":"f",
        "type":"class"
    }
]

ExtractCssNames options

Option	type	Description
path	string	Path of the current file
outputCss	string	Path to store/write current matches for replacement in CSS files
outputJs	string	Path to store/write current matches for replacement in JS files
data	string	Path to file or (css) data as string
restModulo	number	Each number of lines should be made a break
restTime	number	Duration of the break in ms
displayResult	boolean	Display the match result in the terminal
ignore	array	Ignore names to extract (with provided type: '.' for class and '#' for id), [ '.classNameToIgnore', '#idToIgnore' ]
logger	object	Logger options

ExtractCssNames logger options

Option	type	Description
logging	boolean	Display current process
prefix	string	Prefix on the logging line
displayFilename	boolean	Display current processed filename (filename extracted from path)
displayPercentage	boolean	Display current percentage value
type	string	Process animation type. Available types: 'spinner', 'bar', 'dots', 'dots2', 'arc', 'line'
barBg	string	If the animation type is bar, then set the bar's background-color. Background colors are based on the chalk module

Maintainer

David Janitzek