Replace-styles NPM

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.

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:

Find files in src folder wich end with .scss;
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:

Find files in src folder which end with .scss;
Select all css properties.
Add '@use '@test/style' as style;' of the top of the file.
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);