# value replacer

<!-- file paths
  1. src/postcss-plugins/ValueReplacer.js
  2. src/common/valueReplacer.js
 -->

this option is array of objects which will have a two keys
new option `valueReplacer` added for replace css property value while build running

- this option is array of object, that object two keys
  1. `props` key for array of property names
  2. `values` key is object ,this object key contents will be replaced as value content
- this option wiil be work for below

  - `start`
  - `docs`
  - `nowatchstart`
  - `devbuild`
  - `build:library:es`
  - `build:component:es`
  - `build:library:cmjs`
  - `build:component:cmjs`
    Example data:-

  ```json
  {
    "react-cli": {
      "css": {
        "valueReplacer": [
          {
            "props": ["font", "font-family"],
            "values": {
              "zdfonts-rCallBar": "zdf-rCallBar_1",
              "zdfonts-rPuvi": "zdf-rPuvi_1"
            }
            // ,suffix: '0'
          }
        ]
      }
    }
  }
  ```

  Example Replace:-
  before replace

  ```css
  .some-selector {
    font: zdfonts-rCallBar !important;
  }
  ```

  after replace

  ```css
  .some-selector {
    font: zdf-rCallBar_1 !important;
  }
  ```


If we need the exact word to be considered for replacement ( that is, if value is `text` and only if the value is `text` and not `text_cursor` or `cursortext` for example, the conversion happens ) we have to use `^` before the word and `$` after the word in the key. 

# For Example : 
{
  valueReplacer: [
      {
        "props": [
          "cursor",
          "--label_cursor",
          "--checkbox_cursor",
          "--tag_cursor",
          "--button_cursor",
          "--textboxicon_icon_cursor",
        ],
        "values": {
          "^default$": "var(--zdr-cursor-default)",
          "^pointer$": "var(--zdr-cursor-pointer)",
          "^text$": "var(--zdr-cursor-text)",
          "^move$": "var(--zdr-cursor-move)",
        }
      }
    ]
}

- Here we have added `^` before and `$` after default, pointer, text and move. Only if the exact words default, pointer, text and move are used, the values will be converted.