https://github.com/kristiyan-velkov/replace-styles
https://github.com/kristiyan-velkov/replace-styles
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/kristiyan-velkov/replace-styles
- Owner: kristiyan-velkov
- License: other
- Created: 2022-08-10T05:48:01.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T08:58:10.000Z (over 1 year ago)
- Last Synced: 2025-04-05T22:17:51.591Z (2 months ago)
- Language: JavaScript
- Size: 341 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/kristiyan-velkov) [](https://github.com/kristiyan-velkov) [](https://choosealicense.com/licenses/mit/) [](https://nodejs.org/en/)
Replace Styles
**The easiest way to replace style properties in many style files and @import or @include all needed sass dependencies!**
Perfect tool if you want to replace multiple css properties with just a second, what is needed is just to provide config with your selectors, imports, replaces and the **replace-styles** will do the work for you!
---
**Why to use the replace-styles:**
- Easy way to replace multiple css properties in any of founded files.
- Will replace each css properties which is match the replace array.
- Easy to specify path to your files via glob.
Example "src/\*_/_.{scss,sass}" which will select all files in src/ folder and nested ones with ends with .scss or .sass;
- You can provide multiple selectors for search in files.
- Will keep the older @imports and @includes and will combine with your new provided in config following the best practice.
- Provide nice message with how many files found and list output of them.
- Provide nice output with files which were change.
- Easy to make a configuration.
## Table of contents
- [Installation đĻž](#installation)
- [How to Use? đģ](#how-to-use)
- [Examples đ](#examples)
- [Developer Support đ ](#developer-support)
- [Support my work â¤ī¸ ](#support-my-work)
---
## Installation
- Via yarn:
```code
yarn add replace-styles -D
```
- Via npm:
```code
npm install replace-styles --save-dev
```
## How to use?
#### Full setup
```js
import replaceStyles from "replace-styles";
const config = {
paths: "src/**/*.{scss,sass}",
selectors: ["color: "],
imports: ["@use '@my/style' as style;", "@import '@test/style';"],
replaces: [
{
selectors: ["color: "],
replace: [
{
from: "red",
to: "style.$red",
},
],
},
],
};
replaceStyles(config);
```
#### API
| Method | Usage |
| ------------------- | ---------------------------------------------------------------------------- |
| **replaceStyles()** | Provide config and will replace everything based on specification in config. |
| **config** | Object. |
#### **Example config:**
```js
const config = {
paths: "src/**/*.{scss,sass}",
imports: ["@use '@my/style' as style;"],
replaces: [
{
selectors: ["color: ", "background-color: "],
replace: [
{
from: "#bde5bd",
to: "style.$green",
},
{
from: "#ffffff",
to: "style.$white",
},
{
from: "blue",
to: "#0000FF",
},
],
},
{
selectors: ["padding: ", "margin: "],
replace: [
{
from: "5px",
to: "style.$small-size",
},
],
},
],
};
```
| Config property | Type | Description |
| --------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **paths** | Array - [] | Path to files which will be replaces. Support glob selector. |
| **imports** | Array - [] | Add @imports or @use to the top of each selected file. Will conbine existing ones with new ones to follow the order via first @use and then all @imports. |
| **replaces** | Array of objects - object[] | Array of objects {selectors: ['string'], replace:[{from:, to:}]}. Will replace evetything which match the selector in files **from** -> **to** property. |
| **encoding?** | string | Encoding of the files. By default will be 'utf8' |
Replaces array structure:
```js
replaces: [
{
selectors: ["string of selectors"],
replace: [
{
from: "string to find to replace",
to: "string to replace",
},
],
},
];
```
## Examples:
**example 1:**
1. Find files in src folder wich end with .scss;
2. Replace all red colors with blue ones.
**Setup for example 1**:
```js
import replaceStyles from "replace-styles";
const config = {
paths: "src/**/*.scss}",
imports: [""],
replaces: [
{
selectors: [': '],
replace: [
from: "red",
to: "blue",
]
}
]
};
replaceStyles(config);
```
---
**Example 2:**
1. Find files in src folder which end with .scss;
2. Select all css properties.
3. Add '@use '@test/style' as style;' of the top of the file.
4. Replace all red colors with style.$red sass variable.
**Setup for example two**:
```js
import replaceStyles from "replace-styles";
const config = {
paths: "src/**/*.scss}",
imports: ["@use '@test/style' as style;"],
replaces: [
{
selectors: [': '],
replace: [
from: "red",
to: "style.$red",
]
}
]
};
replaceStyles(config);
```
---
## Developer Support:
- If you saw some issue/bug đ related to the specific release version.
- If you want some new feature or change to be added/implemented. đ
Please, contact the creator of the **replace-styles**, so he will be able to fix or improve it:
**Kristiyan Velkov**
**Email:** [email protected]
[](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)
[](https://github.com/christiyan14)
## Support my work
If you like my work and want to support me to work hard, please donate via:
| Revolut | Buy me a coffee |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
| 
|
Thanks a bunch for supporting me! It means a LOT đ
---
Copyright Šī¸2024. All rights reserved.