@zohodesk/react-cli 1.0.3-beta.1 → 1.0.3-exp.2

package/lib/utils/variableConvertor.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _windowsModification = require("../loaderUtils/windowsModification");
+
+var _fileHandling = require("../plugins/utils/fileHandling");
+
+var _getOptions = _interopRequireDefault(require("../utils/getOptions"));
+
+var _folderIterator = _interopRequireDefault(require("./folderIterator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const postcss = require('postcss');
+
+const path = require('path');
+
+const fs = require('fs');
+
+const postcssVariableConvertor = require('../postcss-plugins/variableModificationPlugin/index').plugin;
+
+let cwd = process.cwd();
+let src = path.join(cwd, process.argv[2]);
+let dist = path.join(cwd, process.argv[3]);
+const options = (0, _getOptions.default)();
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+
+function extractVariableName(val) {
+  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
+}
+
+function isIgnoreValuePresent(ignoreVals, prop) {
+  let present = false;
+  ignoreVals.forEach(issue => {
+    if (prop && prop.includes(issue)) {
+      present = true;
+    }
+  });
+  return present;
+}
+
+function variableConvertor(rootOriginal, variables, settingsObject) {
+  rootOriginal.walkRules(rule => {
+    rule.nodes.forEach((decl, index) => {
+      const prevNode = rule.nodes[index - 1];
+      const currentNode = rule.nodes[index];
+
+      if (decl.prop && decl.prop.includes('--')) {
+        if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'variable:ignore') {
+          return;
+        }
+
+        if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
+          return;
+        }
+
+        if (settingsObject[variables[decl.prop]]) {
+          /* if there is no value for property, set it to default so that undefined doesn't get called as key */
+          if (!variables[decl.prop]) {
+            variables[decl.prop] = 'default';
+          }
+
+          const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
+          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+
+          valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              const num = value.replace('px', '');
+              valArr[index] = pxReplacement.replace('$$', num);
+            }
+          });
+          currentNode.value = valArr.join(' ');
+        }
+      }
+    });
+  });
+  return rootOriginal;
+}
+
+function watchHandler(fromPath, toPath) {
+  let css = fs.readFileSync(fromPath, 'utf-8'); // console.log(css);
+
+  const {
+    css: cssOptions,
+    app: appOptions
+  } = options; // console.log(cssOptions, appOptions);
+
+  const {
+    cssVariableReplacementConfig: cssVariableConfigFilePath,
+    patterns: cssPatterns
+  } = cssOptions;
+  const {
+    cssVariableReplacementConfig: appVariableConfigFilePath,
+    patterns: appPatterns
+  } = appOptions;
+  const cssVariableOptions = cssVariableConfigFilePath && cssVariableConfigFilePath !== '' ? cssVariableConfigFilePath : appVariableConfigFilePath;
+  const filterArr = cssOptions && cssPatterns && cssPatterns.cssVariableReplacement && cssPatterns.cssVariableReplacement !== {} ? cssPatterns.cssVariableReplacement : appPatterns.cssVariableReplacement;
+  const rootOriginal = postcss.parse(css);
+  const variables = {}; // const unassigned = {};
+
+  const rawdata = fs.readFileSync(cssVariableOptions);
+  const data = JSON.parse(rawdata);
+  const {
+    settings: settingsObject // errorLog: errorLogStatus,
+    // errorInConsole: errorConsoleStatus,
+    // errorsAllowed,
+    // strictMode
+
+  } = data;
+  rootOriginal.walkRules(rule => {
+    rule.walkDecls(decl => {
+      decl.value.split(' ').forEach(val => {
+        if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
+          const extractedValue = extractVariableName(val);
+
+          if (!variables[extractedValue]) {
+            variables[extractedValue] = decl.prop;
+          }
+        }
+      });
+    });
+  });
+  const strArray = (0, _windowsModification.windowsModificationFile)(process.cwd()).split('\\');
+  const lastElem = strArray[strArray.length - 1].toString();
+
+  if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+    filename: fromPath,
+    filterArr,
+    rootDir: lastElem
+  })) {
+    return;
+  }
+
+  const convertedCode = variableConvertor(rootOriginal, variables, settingsObject).toString();
+
+  if (convertedCode.trim() !== '') {
+    fs.writeFile(fromPath, convertedCode, () => true);
+  } // console.log(convertedCode);
+
+
+  postcss([postcssVariableConvertor(cssVariableOptions)]).process(css, {
+    from: fromPath,
+    to: toPath
+  }).then(result => {
+    fs.writeFile(toPath, result.css, () => true);
+
+    if (result.map) {
+      fs.writeFile(`${toPath}.map`, result.map, () => true);
+    }
+  }); // console.log(variableOptions);
+}
+
+(0, _folderIterator.default)(src, dist, ['.css'], false, (fromPath, toPath) => {
+  // console.log(fromPath, toPath);
+  watchHandler(fromPath, toPath);
+}); // if (canWacth) {
+//   useExitCleanup(() => {
+//     fs.unwatchFile(src, watchHandler);
+//   });
+// }

package/npm8.md

@@ -1,9 +1,9 @@
-# npm 8 change related things
-
-1. in npm run script config options `:` not working (properly|correctly), So we need to use `_` in the place of `:`
-   For Example:
-   - `--app:port` wouldn't work we have to do like this `--app_port`
-   - `--clone:proj:name` wouldn't work we have to do like this `----clone_proj_name`
-
-@zohodes/react-cli or fz-react-cli regardless of what cli you use.
-So, we need to change all package.json script which is using this (`:`) we need to change as (`_`)
+# npm 8 change related things
+
+1. in npm run script config options `:` not working (properly|correctly), So we need to use `_` in the place of `:`
+   For Example:
+   - `--app:port` wouldn't work we have to do like this `--app_port`
+   - `--clone:proj:name` wouldn't work we have to do like this `----clone_proj_name`
+
+@zohodes/react-cli or fz-react-cli regardless of what cli you use.
+So, we need to change all package.json script which is using this (`:`) we need to change as (`_`)