Repository files navigation

rcs is short forrename css selectors

Having long CSS selectors, such asmain-menu__item--disabled, can increase the filesizes. With thisrcs-core it is easy to rename the selectors and therefore reduce the filesize. You can save around 20% of the filesize by just shorten the CSS selectors in the CSS files.

It basically just rename/minify all CSS selectors in all files. First the library has to betrained with selectors. Based on this data, the selectors can be renamed in all files.Here are some examples made withBootstrap files.

Some live projects:

• AMP Project (https://amp.dev/)
• Analyse (https://analyse.org/)
• My personal webpage (https://jpeer.at/)

Correctly usingrcs-core or any of itsplugins on large project means few rules should be followed.

This document explains most of them.

$ npm install --save rcs-core

or

$ yarn add rcs-core

Note couple of selectors areexcluded by default. You can activate them by using.setIncludebefore you fill the library

1. Fill your library with all selectors (we assume there is just one CSS file)

// excluding specific selectorsrcs.selectorsLibrary.setExclude('selector-to-ignore');// include specific selectors which has been ignored by defaultrcs.selectorsLibrary.setInclude('center');rcs.fillLibraries(fs.readFileSync('./src/styles.css','utf8'));

2. Optimize the selectors compression (optional)

rcs.optimize();

3. Rewrite all files

Note: Do not forget to replace your CSS file

constcss=rcs.replace.css(fs.readFileSync('./src/styles.css','utf8'));constjs=rcs.replace.js(fs.readFileSync('./src/App.js','utf8'));consthtml=rcs.replace.html(fs.readFileSync('./src/index.html','utf8'));// output some warnings which has been stacked through the processrcs.warnings.warn();fs.writeFileSync('./dist/styles.css',css);fs.writeFileSync('./dist/App.js',js);fs.writeFileSync('./dist/index.html',html);

• rcs.stats (deprecated)
• rcs.replace
• rcs.mapping
• rcs.optimize
• rcs.statistics
• rcs.baseLibrary
• rcs.fillLibraries
• rcs.nameGenerator
• rcs.selectorsLibrary
• rcs.keyframesLibrary
• rcs.cssVariablesLibrary
• rcs.useCustomGenerator

• Node Plugin:rename-css-selectors
• Parcel Plugin:parcel-plugin-rcs
• Webpack Plugin:rcs-webpack-plugin
• PostCSS Plugin:postcss-rcs
• Gulp Plugin:gulp-rcs
• Grunt Plugin:grunt-rcs