Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpeer264/node-rename-css-selectors
📝 Rename css classes and id's in files
https://github.com/jpeer264/node-rename-css-selectors
css css-selector matches-selector minified-selectors rcs rename
Last synced: 3 months ago
JSON representation
📝 Rename css classes and id's in files
- Host: GitHub
- URL: https://github.com/jpeer264/node-rename-css-selectors
- Owner: JPeer264
- License: mit
- Created: 2016-10-17T22:06:04.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T06:03:28.000Z (almost 2 years ago)
- Last Synced: 2024-11-13T11:02:47.700Z (3 months ago)
- Topics: css, css-selector, matches-selector, minified-selectors, rcs, rename
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 66
- Watchers: 4
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Rename CSS Selectors (RCS)
[](https://travis-ci.org/JPeer264/node-rename-css-selectors)
[](https://coveralls.io/github/JPeer264/node-rename-css-selectors?branch=master)
> **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](#generateMapping) and [loadMapping](#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](https://github.com/JPeer264/node-rcs-core)
## Contents
- [Installation](#installation)
- [Usage](#usage)
- [Methods](#methods)
- [Caveats](#caveats)
- [LICENSE](#license)
## Installation
Install with [npm](https://docs.npmjs.com/cli/install) or [yarn](https://yarnpkg.com/en/docs/install)
```sh
npm i rename-css-selectors rcs-core
```
or
```sh
yarn add rename-css-selectors rcs-core
```
## Usage
Async:
> There are 3 different ways of writing async `rcs` code: callbacks, promises and async/await
```js
// 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:
```js
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](docs/api/processAuto.md)
- [rcs.process.css](docs/api/processCss.md)
- [rcs.process.js](docs/api/processJs.md)
- [rcs.process.html](docs/api/processHtml.md)
- [rcs.process.pug](docs/api/processPug.md)
- [rcs.process.any](docs/api/processAny.md)
- [rcs.mapping](docs/api/mapping.md)
- [rcs.config](docs/api/config.md)
## Caveats
Correctly using `rename-css-selectors` on large project means few rules should be followed.
[This document](https://github.com/JPeer264/node-rcs-core/blob/main/docs/caveats.md) explains most of them.
# LICENSE
MIT © [Jan Peer Stöcklmair](https://www.jpeer.at)