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 🦾
• How to Use? 💻
• Examples 🚀
• Developer Support 🔗
• Support my work ❤️

---

Installation

• Via yarn:

yarn add replace-styles -D

• Via npm:

npm install replace-styles --save-dev

How to use?

Full setup

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:

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:

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:

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:

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: christiyanweb@gmail.com

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.