jpeer264/node-rename-css-selectors

📝 Rename css classes and id's in files

Rename CSS Selectors (RCS)

Note: Please make sure your files are not minified/uglified. Do that after processing it with rename-css-selectors

This module renames all CSS selectors in the given files. It will collect all selectors from the given CSS files. Do not worry about your selectors, rcs will do it for you.

You can also use a config file with the combination of generateMapping and loadMapping, if you already had other projects with the same classes. So all your projects have the same minified selector names - always.

This is a plugin of rcs-core

Contents

• Installation
• Usage
• Methods
• Caveats
• LICENSE

Installation

Install with npm or yarn

npm i rename-css-selectors rcs-core

or

yarn add rename-css-selectors rcs-core

Usage

Async:

There are 3 different ways of writing async rcs code: callbacks, promises and async/await

// you can use every method of `rcs-core` on top
const rcsCore = require('rcs-core');
const rcs = require('rename-css-selectors')

// if you want to include the .rcsrc config
rcs.config.load();

// if you have some generated mappings - load them!
// you can also specify the string although it does not exist yet.
rcs.mapping.load('./renaming_map.json');

// now with rcsCore you could e.g. ignore single variables (optional)
rcsCore.baseLibrary.setExclude(/<%=[\s\S]+%>/);

// callback
rcs.process.auto(['**/*.js', '**/*.html', '**/*.css'], options, (err) => {
    // all css files are now saved, renamed and stored in the selectorLibrary
    // also other files are not renamed
    // that's it

    // maybe you want to add the new selectors to your previous generated mappings
    // do not worry, your old settings are still here, in case you used `rcs.mapping.load`
    rcs.mapping.generate('./', { overwrite: true }, (err) => {
        // the mapping file is now saved
    });
});

// promise
rcs.process.auto(['**/*.js', '**/*.html', '**/*.css'], options)
    .then(() => rcs.mapping.generate('./', { overwrite: true }))
    .catch(console.error);

// async/await
(async () => {
    try {
        await rcs.process.auto(['**/*.js', '**/*.html', '**/*.css'], options);
        await rcs.mapping.generate('./', { overwrite: true });
    } catch (err) {
        console.error(err);
    }
})();

Sync:

const rcs = require('rename-css-selectors');

rcs.mapping.load('./renaming_map.json');

try {
    rcs.process.autoSync(['**/*.js', '**/*.html', '**/*.css'], options);
    rcs.mapping.generateSync('./', { overwrite: true });
} catch (err) {
    console.error(err);
}

Methods

• rcs.process.auto
• rcs.process.css
• rcs.process.js
• rcs.process.html
• rcs.process.pug
• rcs.process.any
• rcs.mapping
• rcs.config

Caveats

Correctly using rename-css-selectors on large project means few rules should be followed. This document explains most of them.

LICENSE

MIT © Jan Peer Stöcklmair