@zohodesk/react-cli 1.0.0 → 1.0.1

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "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
+}

package/README.md

@@ -44,6 +44,14 @@ Now to run app
 
 # Change Logs
 
+# 1.0.1
+
+**Issue Fix**
+- variable conversion for px and var(--) values in same declaration was not supported, now it is supported.
+- package-lock.json removed from `.npmignore`
+
+**Feature Update**
+- exclude added to Selector Plugin
 # 1.0.0
 ## Major Release
 **Changes:**

package/docs/SelectorWeight.md

@@ -4,3 +4,6 @@
  * all classes in all files will be added with the `defaultSelector` provided in package.json to increase selector weight
  * in case a specific chunk file is supposed to have a different selector, it can be mentioned in the `customFileSelectorWeight.json`. This will add the new selector to that particular chunk file.
  * `excludeStrings` is an array used to exclude selectors that should not be converted. Default selectors such as body, html are excluded through this way.
+
+# v1.0.1 update: 
+ * exclude support added, file paths to be added in `react-cli > app > exclude > selectorWeight` to be excluded from conversion.

package/docs/VariableConversion.md

@@ -4,8 +4,13 @@
 
 Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
+
+**Issue Fix**
+# Issue fix done in `1.0.1`
+- variable conversion for px and var(--) values in same declaration was not supported, now it is supported.
+
 **Features:** 
-# Features below are added form `0.0.1-beta.173`
+# Features below are added from `0.0.1-beta.173`
 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
 2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`

package/lib/pluginUtils/getDevPlugins.js

@@ -48,7 +48,7 @@ const getDevPlugins = (options, publicPath) => {
       hasShadowDOM,
       cssVariableReplacementConfig,
       plugins: pluginObject,
-      // exclude,
+      exclude,
       selectorWeightConfig,
       server: {
         mode
@@ -200,7 +200,8 @@ const getDevPlugins = (options, publicPath) => {
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
-      selectorWeightConfig
+      selectorWeightConfig,
+      exclude: exclude.selectorWeight
     }));
   }
 

package/lib/plugins/SelectorPlugin.js

@@ -9,15 +9,21 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
-var _webpackSources = require("webpack-sources");
+var _windowsModification = require("../loaderUtils/windowsModification");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const path = require('path');
-
-const isCss = filename => path.extname(filename) === '.css';
+function checkFilename(filename, data) {
+  let keyMatch = undefined;
+  Object.keys(data).forEach(key => {
+    if (filename.includes(key)) {
+      keyMatch = key;
+    }
+  });
+  return keyMatch;
+}
 
-function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings) {
+function rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings) {
   rootOriginal.walkRules((rule, index) => {
     const prevNode = rootOriginal.nodes[index - 1];
 
@@ -31,14 +37,14 @@ function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, exclu
       }
     }
 
-    if (excludeStrings.includes(rule.selector)) {
-      return;
-    }
+    const selectorArr = rule.selector.split(',');
+    selectorArr.forEach((singleSelectorStr, index) => {
+      if (excludeStrings.includes(singleSelectorStr.trim())) {
+        return;
+      }
 
-    let ruleArr = rule.selector.split(',');
-    ruleArr.forEach((rule, index) => {
-      if (rule.includes(']')) {
-        if (rule.slice(rule.lastIndexOf(']') + 2).trim() === '') {
+      if (singleSelectorStr.includes(']')) {
+        if (singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim() === '') {
           return;
         } // console.log(
         //   rule.slice(rule.lastIndexOf(']') + 2).trim(),
@@ -46,22 +52,34 @@ function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, exclu
         // );
 
 
-        ruleArr[index] = `${rule.slice(0, rule.lastIndexOf(']') + 1).trim()} ${defaultSelector}${rule.slice(rule.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
+        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${defaultSelector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
 
         return;
       }
 
-      ruleArr[index] = data[chunkFilename] ? `${data[chunkFilename].defaultSelector}${rule}` : `${defaultSelector}${rule}`;
+      const keyMatch = checkFilename(filename, data);
+      selectorArr[index] = data[keyMatch] ? `${data[keyMatch].defaultSelector}${singleSelectorStr}` : `${defaultSelector}${singleSelectorStr}`;
     });
-    rule.selector = ruleArr.join(',\n'); // console.log(`${rule.selector} converted`);
+    rule.selector = selectorArr.join(',\n'); // console.log(`${rule.selector} converted`);
   });
   return rootOriginal;
 }
 
+function ignoreFile(excludeArr, filename) {
+  let ignore = false;
+  excludeArr.forEach(exclStr => {
+    if (filename.includes(exclStr)) {
+      ignore = true;
+    }
+  });
+  return ignore;
+}
+
 class SelectorPlugin {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.selectorWeightConfig = options.selectorWeightConfig;
+    this.exclude = options.exclude;
   }
 
   apply(compiler) {
@@ -74,19 +92,24 @@ class SelectorPlugin {
     const rawdata = _fs.default.readFileSync(customFileDetails);
 
     const data = JSON.parse(rawdata);
+    this.exclude = (0, _windowsModification.windowsModification)(this.exclude);
     compiler.hooks.compilation.tap('selector-weight-rewrite', compilation => {
-      compilation.hooks.optimizeChunkAssets.tapAsync('selector-weight-rewrite', (chunks, callback) => {
-        chunks.forEach(chunk => {
-          chunk.files.filter(isCss).forEach(chunkFilename => {
-            const asset = compilation.assets[chunkFilename];
-            const sourceStr = asset.source();
+      compilation.hooks.optimizeModules.tap('selector-weight-rewrite', modules => {
+        const mods = modules.filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const rootOriginal = _postcss.default.parse(module.content);
+
+          const filename = module.issuer.resource; // if (!filename.includes('node_modules')) {
+
+          if (ignoreFile(this.exclude, filename)) {
+            return;
+          } // console.log(filename);
 
-            const rootOriginal = _postcss.default.parse(sourceStr);
 
-            compilation.assets[chunkFilename] = new _webpackSources.RawSource(rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings).toString());
-          });
+          module.content = //new RawSource(
+          rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings).toString(); // );
+          // }
         });
-        callback();
       });
     });
   }

package/lib/postcss-plugins/IncludePlugin.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('postcss-include-files', opts => {
+  const {
+    plugins
+  } = opts;
+  return (root, result) => {
+    const inputFile = root.source.input.file;
+    const includeFile = opts.include.some(file => inputFile.indexOf(file) !== -1);
+
+    if (includeFile) {
+      // console.log(inputFile);
+      const handler = response => response.messages.forEach(msg => result.messages.push(msg));
+
+      return (0, _postcss.default)(plugins).process(root, {
+        from: undefined
+      }).then(handler);
+    }
+  };
+});

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

@@ -36,7 +36,6 @@ class ErrorHandler {
 
   errorFunction(errObj) {
     if (errObj.type && this.allowedErrs[errObj.type] && errObj.decl.prop && errObj.decl.value) {
-      console.log(this.allowedErrs[errObj.type]);
       this[errObj.type](errObj);
     }
   }

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

@@ -10,8 +10,6 @@ const {
   ErrorHandler
 } = require('./ErrorHandler');
 
-const errors = [];
-const errorTable = [];
 const errHandler = new ErrorHandler();
 const convertableProps = {
   'font-size': true,
@@ -121,7 +119,7 @@ const singleConvertor = (value, changeVal, details, range) => {
   // console.log(value, 'not within range')
 
 
-  let errObj = {
+  const errObj = {
     decl,
     type: 'RANGE_ERROR',
     filename,
@@ -147,6 +145,8 @@ const singleConvertor = (value, changeVal, details, range) => {
   // } else {
   //   console.log('++++++++++++++++++++++rect val!', value);
   // }
+
+  return;
 };
 
 module.exports = {
@@ -189,10 +189,11 @@ module.exports = {
           const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
           // split not need use slice and lastIndexOf less memory
 
-          const filename = fromPath.split(path.sep).pop();
+          const filename = fromPath.split(path.sep).pop(); // if(filename.includes('AddFormResponsive.module.css'){
+          // }
 
           if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
-            let errObj = {
+            const errObj = {
               decl,
               type: 'DECLARATION_IGNORED',
               filename,
@@ -255,7 +256,7 @@ module.exports = {
             } else {
               if (!decl.value.includes('calc')) {
                 // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
-                let errObj = {
+                const errObj = {
                   decl,
                   filename,
                   unitErrorVal: unitErrorVal,
@@ -285,8 +286,29 @@ module.exports = {
               }
             }
           } else {
+            if (settingsObject[decl.prop] && decl.value && decl.value.includes('px') && decl.value.includes('var(--')) {
+              const valArr = decl.value.split(' ');
+              const settings = settingsObject[decl.prop];
+              const {
+                range
+              } = settings;
+              const convertedVals = valArr.map(val => {
+                if (val.includes('px')) {
+                  const convertedVal = singleConvertor(val, settings.replacements.px, {
+                    decl,
+                    filename,
+                    path: fromPath
+                  }, range);
+                  return convertedVal ? convertedVal : val;
+                }
+
+                return val;
+              });
+              decl.value = convertedVals.join(' ');
+            }
+
             if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
-              let errObj = {
+              const errObj = {
                 decl,
                 type: 'VARIABLE_PRESENT',
                 filename,

package/package.json

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