@zohodesk/react-cli 1.0.1 → 1.0.2

package/README.md

@@ -44,6 +44,11 @@ Now to run app
 
 # Change Logs
 
+# 1.0.2
+
+**Feature Update**
+- Selector replace plugin made custom postcss-plugin with update to code that was unpublished in package.
+
 # 1.0.1
 
 **Issue Fix**

package/lib/loaderUtils/getCSSLoaders.js

@@ -73,7 +73,7 @@ const getCSSLoaders = optionsObj => {
   } // console.log('selector weight config : ', selectorWeightConfig);
 
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
+  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), ...excludeEmptyCheckPlugin({
     enable: plugins.hasRTL,
     ignore: rtlExcludeLocal,
     plugins: [require('@zohodesk/postcss-rtl')({

package/lib/postcss-plugins/SelectorReplace.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function validator(opts) {
+  if (!opts || typeof opts !== 'object') {
+    throw new Error('Always requires argment');
+  }
+
+  const {
+    before,
+    after
+  } = opts;
+
+  if (!before || !after) {
+    throw new Error('Be sure to have "before" and "after" object names');
+  }
+
+  if (!Array.isArray(before) || !Array.isArray(after)) {
+    throw new Error('Objects "before" and "after" must be of type Array');
+  }
+
+  if (before.length !== after.length) {
+    throw new Error('Length of before and after options must be the same');
+  }
+
+  if (before.length === 0) {
+    throw new Error('Array length is 1 or more');
+  }
+
+  before.forEach((beforeOpt, idx) => {
+    const afterOpt = after[idx];
+
+    switch (true) {
+      case typeof beforeOpt === 'string':
+        {
+          if (!typeof afterOpt === 'string') {
+            throw new Error(`The after option ${afterOpt} must be a string. If you want to apply the replace callback function, then use a RegExp for the before option`);
+          }
+
+          break;
+        }
+
+      case beforeOpt instanceof RegExp:
+        {
+          if (!typeof afterOpt === 'string' && !typeof afterOpt === 'function') {
+            throw new Error(`The after option ${afterOpt} must be either a string, or a function`);
+          }
+
+          break;
+        }
+
+      default:
+        throw new Error(`The before option ${beforeOpt} must be either a string, or a RegExp`);
+    }
+  });
+}
+
+module.exports = _postcss.default.plugin('postcss-selector-replace-new', opts => {
+  validator(opts);
+  const {
+    before,
+    after
+  } = opts;
+  return root => {
+    root.walkRules(rule => {
+      before.forEach((beforeOpt, idx) => {
+        const afterOpt = after[idx];
+
+        if (typeof beforeOpt === 'string') {
+          rule.selector = rule.selector.split(beforeOpt).join(afterOpt);
+        } else {
+          rule.selector = rule.selector.replace(beforeOpt, afterOpt);
+        }
+      });
+    });
+  };
+});

package/lib/postcss-plugins/__test__/selectorReplace.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+let settings1 = {
+  selectorReplace: {
+    before: [':root', 'data-mode', 'data-theme'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'data-desk-mode', 'data-desk-theme']
+  }
+};
+let settings2 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; //error case
+
+let settings3 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__']
+  }
+}; //error case
+
+let settings4 = {
+  selectorReplace: {
+    before: [':root'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; // here conversion happens for data from one index to another

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -88,7 +88,6 @@
     "postcss-hash-classname": "0.4.0",
     "postcss-loader": "3.0.0",
     "postcss-mobile-hover": "1.0.2",
-    "postcss-selector-replace": "1.0.2",
     "react-test-renderer": "16.13.1",
     "redis": "3.0.2",
     "redux-mock-store": "1.5.4",

package/.vscode/settings.json

@@ -1,11 +0,0 @@
-{
-    "workbench.iconTheme": "vscode-icons",
-    "window.zoomLevel": 1,
-    "window.autoDetectColorScheme": true,
-    "gitlens.views.stashes.files.layout": "list",
-    "git.openRepositoryInParentFolders": "never",
-    "diffEditor.ignoreTrimWhitespace": false,
-    "workbench.colorTheme": "Default Light+",
-    "editor.indentSize": "tabSize",
-    "eslint.enable": true
-}