@zohodesk/react-cli 1.1.13 → 1.1.14

package/README.md

@@ -44,6 +44,18 @@ Now to run app
 
 # Change Logs
 
+# 1.1.14 (11-9-2023)
+
+**Feature:-**
+
+- Value Replacer supports `^` before and `$` after the word to consider the whole word for replacement. Only if the exact word comes as value, there will be a replacement made.
+
+**Issue Fix**
+
+- 'space' character on variable conversion changes to undefined fixed.
+- calc(100%) variable conversion to undefined fixed.
+- height value if text converts to undefined, issue fixed.
+
 # 1.1.13 (4-9-2023)
 
 **Changes**

package/docs/ValueReplacer.md

@@ -58,3 +58,30 @@ new option `valueReplacer` added for replace css property value while build runn
     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.

package/lib/plugins/variableConvertorUtils.js

@@ -63,7 +63,7 @@ function convertToCalc(pxReplacement, value) {
 
 function convertCalcValue(pxReplacement, parsedValue) {
   Object.keys(parsedValue).forEach(key => {
-    if (parsedValue[key].includes('px')) {
+    if (pxReplacement && parsedValue[key].includes('px')) {
       parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
     }
   });
@@ -95,7 +95,9 @@ function variableConverter(rootOriginal, variables, settingsObject) {
           }
 
           const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+          let valArr = decl.value.split(' ');
+          valArr = valArr.filter(x => x.trim() !== '');
+          valArr = valArr.map(x => x.replace(/\r|\t|\n/gi, '')); // single values are considered in the above array and converted below
 
           valArr.forEach((value, index) => {
             if (value.includes('px')) {

package/lib/postcss-plugins/ValueReplacer.js

@@ -4,29 +4,19 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// module.exports = postcss.plugin('postcss-value-replacer', opts => {
-//   const { plugins } = opts;
-//   return (root, result) => {
-//     const inputFile = root.source.input.file;
-//     let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
-//     if (!isIgnoredFile) {
-//       const handler = response =>
-//         response.messages.forEach(msg => result.messages.push(msg));
-//       return postcss(plugins)
-//         .process(root, { from: undefined })
-//         .then(handler);
-//     }
-//   };
-// });
-// export default
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
       if (obj.props.indexOf(decl.prop) !== -1) {
-        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
-          decl.value = decl.value.replace(k, obj.values[k]);
+          // if (/^\^.*\$$/gi.test(k)) {
+          if (k.startsWith('^') && k.endsWith('$')) {
+            decl.value = decl.value.replace(new RegExp(k), obj.values[k]);
+          } else {
+            decl.value = decl.value.replace(k, obj.values[k]);
+          }
         }); //decl.value = obj.values[decl.value];
       }
     }); //console.log({root, roots:root+""}, root+"")

package/lib/postcss-plugins/__test__/valueReplacer.spec.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.abc{ cursor : text }`;
+    const cssOutputStr = `.abc{ cursor : --textCursor }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+
+function runValueReplacerForCssString(cssInputStr, cssOptions) {
+  return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
+}

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -92,7 +92,13 @@ function pxToCalc(value) {
   return arr.join(' ');
 }
 
-const singleConvertor = (value, changeVal, details, range) => {
+const singleConvertor = ({
+  value,
+  changeVal,
+  details,
+  range,
+  allowed
+}) => {
   const {
     path,
     filename,
@@ -106,6 +112,10 @@ const singleConvertor = (value, changeVal, details, range) => {
     }
   }
 
+  if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
+    return decl.value;
+  }
+
   if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
     if (value.trim() === '0px') {
       return '0';
@@ -204,6 +214,9 @@ module.exports = {
             .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
             // console.log('unit : ');
             // console.log(unit);
+            // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unit, 'case 1');
+            // }
 
             unit.forEach((val, index) => {
               allowed.forEach(alwdVal => {
@@ -223,21 +236,49 @@ module.exports = {
                   unitErrorVal = val;
                 }
               }
-            }); // console.log(allowed, replacements, range)
+            }); // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
+            // }
+            // console.log(allowed, replacements, range)
 
             if (!unitError) {
-              // use variable decl.value.split(' ')
-              if (range) {
+              let calcValue = false;
+
+              if (decl.value.includes('calc')) {
+                decl.value = pxToCalc(decl.value);
+                calcValue = true;
+              } // use variable decl.value.split(' ')
+
+
+              if (range && !calcValue) {
                 // console.log('multiple :', decl.value)
+                const tempVal = decl.value; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
+                // }
+                // if (decl.prop === 'height') {
+                //   console.log('allowed!', decl.prop, decl.value, allowed);
+                // }
+
                 let newVal = '';
-                decl.value.split(' ').forEach(singleVal => {
-                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range)} `;
+                let splitValues = decl.value.split(' ');
+                splitValues = splitValues.filter(val => val.trim() !== '');
+                splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
+                splitValues.forEach(singleVal => {
+                  newVal += `${singleConvertor({
+                    value: singleVal,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  })} `;
                 });
-                decl.value = newVal;
+                decl.value = newVal; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, newVal, 'case 4');
+                // }
               }
             } else {
               if (!decl.value.includes('calc')) {
@@ -276,15 +317,22 @@ module.exports = {
               const valArr = decl.value.split(' ');
               const settings = settingsObject[decl.prop];
               const {
-                range
+                range,
+                allowed
               } = settings;
               const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  const convertedVal = singleConvertor(val, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range);
+                  const convertedVal = singleConvertor({
+                    value: val,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  });
                   return convertedVal ? convertedVal : val;
                 }
 

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.10",
+  "version": "1.1.14",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.10",
+      "version": "1.1.14",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",