Norvell's Public Machinations

    rename-css-selectors

    4.1.0 • Public • Published

    Rename CSS Selectors (RCS)

    Build Status Coverage Status

    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

    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

    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

    Install

    npm i rename-css-selectors

    DownloadsWeekly Downloads

    110

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    46.4 kB

    Total Files

    39

    Last publish

    Collaborators

    • jpeer