@zohodesk/react-cli 1.0.1-exp.1 → 1.0.2-exp.1

package/README.md

@@ -44,6 +44,19 @@ Now to run app
 
 # Change Logs
 
+# 1.0.2
+
+**Feature Update**
+- Selector replace plugin made as a custom postcss-plugin with update to code that was unpublished in package.
+
+# 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/configs/webpack.dev.config.js

@@ -25,6 +25,8 @@ const {
     outputFolder,
     plugins,
     exclude,
+    patterns,
+    patternsRootDir,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -102,6 +104,8 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
@@ -114,6 +118,8 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

package/lib/configs/webpack.docs.config.js

@@ -22,6 +22,8 @@ const {
     cssUniqueness,
     plugins,
     exclude,
+    patterns,
+    patternsRootDir,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -77,6 +79,8 @@ module.exports = isSSTest => ({
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

package/lib/configs/webpack.impact.config.js

@@ -21,6 +21,8 @@ const {
     cssUniqueness,
     plugins,
     exclude,
+    patterns,
+    patternsRootDir,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -77,6 +79,8 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

package/lib/configs/webpack.prod.config.js

@@ -29,6 +29,8 @@ const {
     server,
     plugins,
     exclude,
+    patterns,
+    patternsRootDir,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
@@ -153,6 +155,8 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         cssVariableReplacementConfig,
         selectorWeightConfig,
         mediaQueryHoverActiveString,
@@ -165,6 +169,8 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
+        patternsRootDir,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,

package/lib/loaderUtils/getCSSLoaders.js

@@ -11,7 +11,7 @@ var _cssClassNameGenerate = _interopRequireDefault(require("../utils/cssClassNam
 
 var _utils = require("../utils");
 
-var _windowsModification = require("./windowsModification");
+var _fileHandling = require("../plugins/utils/fileHandling");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,21 +19,11 @@ const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
 
-function excludeEmptyCheckPlugin({
-  enable,
-  ignore,
-  plugins
-}) {
-  return enable ? ignore.length === 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
-    ignore,
-    plugins
-  })] : [];
-}
-
 const getCSSLoaders = optionsObj => {
   const {
     plugins,
-    exclude,
+    patterns,
+    patternsRootDir,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     classNameBlob,
@@ -41,11 +31,7 @@ const getCSSLoaders = optionsObj => {
     selectorReplace,
     cssHashSelectors,
     classNamePrefix
-  } = optionsObj; // console.log('plugins:')
-  // console.log(plugins)
-  // console.log('exclude:')
-  // console.log(exclude)
-
+  } = optionsObj;
   const {
     devCssFileBountry
   } = options.app;
@@ -55,10 +41,6 @@ const getCSSLoaders = optionsObj => {
   const {
     cssSelectorZipPath
   } = options.impactService;
-  const rtlExcludeLocal = (0, _windowsModification.windowsModification)(exclude.rtl);
-  const hoverActiveExcludeLocal = (0, _windowsModification.windowsModification)(exclude.hoverActive);
-  const combinerMediaQueryExcludeLocal = (0, _windowsModification.windowsModification)(exclude.combinerMediaQuery);
-  const cssVariableReplacementExcludeLocal = (0, _windowsModification.windowsModification)(exclude.cssVariableReplacement);
   const cssLoaderOptions = {
     // importLoaders: hasRTL||hoverActive ? 1 : 0,
     importLoaders: 1,
@@ -69,35 +51,19 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
+    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns, patternsRootDir);
   } // console.log('selector weight config : ', selectorWeightConfig);
 
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
-    enable: plugins.hasRTL,
-    ignore: rtlExcludeLocal,
-    plugins: [require('@zohodesk/postcss-rtl')({
-      addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
-        if (prefix === '[dir]') {
-          return selector;
-        }
-
-        return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+  let postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
+    addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+      if (prefix === '[dir]') {
+        return selector;
       }
-    })]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.combinerMediaQuery,
-    ignore: combinerMediaQueryExcludeLocal,
-    plugins: [require('postcss-combine-media-query')]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.hoverActive,
-    ignore: hoverActiveExcludeLocal,
-    plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.cssVariableReplacement,
-    ignore: cssVariableReplacementExcludeLocal,
-    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)]
-  })].filter(Boolean);
+
+      return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+    }
+  }), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -117,11 +83,74 @@ const getCSSLoaders = optionsObj => {
     loader: 'postcss-loader',
     options: {
       ident: 'postcss',
-      plugins: function () {
-        return postcssPlugins;
+      plugins: function (params) {
+        // console.log('check here : ', params.resourcePath);
+        // getCSSLoaders for all postcss filtering
+
+        /*
+        input : 
+        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+        patterns : [
+            // include all files
+           "valueReplacer": [ 
+              "*"
+            ],
+            // include all files
+            "selectorReplace": [
+              "*"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hoverActive": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "combinerMediaQuery": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hasRTL": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "selectorWeight": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include all files
+            "cssUniqueness": [
+              "*"
+            ]
+        ],
+        
+        [ postcssPlugins that are implemented ]
+          rootDir : patternsRootDir : 'supportapp'
+          */
+        postcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
+          filename: params.resourcePath,
+          filterObject: patterns,
+          plugins: postcssPlugins,
+          rootDir: patternsRootDir
+        }); // postcssPlugins that are allowed
+
+        return postcssPlugins.length > 0 ? postcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
       }
     }
-  } : null].filter(Boolean);
+  } : null, {
+    loader: require.resolve('../loaders/composeLoader')
+  }].filter(Boolean);
 };
 
 var _default = getCSSLoaders;

package/lib/loaderUtils/tests/windowsModification.test.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const {
+  windowsModificationFile
+} = require('../windowsModification');
+
+const tests = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
+tests.forEach(test => {
+  console.log(windowsModificationFile(test));
+});

package/lib/loaderUtils/windowsModification.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.windowsModification = windowsModification;
+exports.windowsModificationFile = windowsModificationFile;
 const isWin = process.platform === 'win32';
 
 function windowsModification(array) {
   return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
-}
+}
+
+function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };

package/lib/loaders/composeLoader.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', //   'margin',
+'padding-top', 'padding-bottom', 'padding-left', 'padding-right', //   'padding',
+'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width'];
+const renameProps = {
+  'margin-top': {
+    pos: 'mt',
+    neg: 'mt_'
+  },
+  'margin-bottom': {
+    pos: 'mb',
+    neg: 'mb_'
+  },
+  'margin-left': {
+    pos: 'ml',
+    neg: 'ml_'
+  },
+  'margin-right': {
+    pos: 'mr',
+    neg: 'mr_'
+  },
+  margin: {
+    pos: 'm',
+    neg: 'm_'
+  },
+  'padding-top': {
+    pos: 'pt',
+    neg: 'pt_'
+  },
+  'padding-bottom': {
+    pos: 'pb',
+    neg: 'pb_'
+  },
+  'padding-left': {
+    pos: 'pl',
+    neg: 'pl_'
+  },
+  'padding-right': {
+    pos: 'pr',
+    neg: 'pr_'
+  },
+  padding: {
+    pos: 'p',
+    neg: 'p_'
+  },
+  top: {
+    pos: 'post',
+    neg: 'post_'
+  },
+  bottom: {
+    pos: 'posb',
+    neg: 'posb_'
+  },
+  left: {
+    pos: 'posl',
+    neg: 'posl_'
+  },
+  right: {
+    pos: 'posr',
+    neg: 'posr_'
+  },
+  height: {
+    pos: 'h',
+    neg: 'h_'
+  },
+  width: {
+    pos: 'w',
+    neg: 'w_'
+  },
+  'min-height': {
+    pos: 'minh',
+    neg: 'minh_'
+  },
+  'min-width': {
+    pos: 'minw',
+    neg: 'minw_'
+  },
+  'max-height': {
+    pos: 'maxh',
+    neg: 'maxh_'
+  },
+  'max-width': {
+    pos: 'maxw',
+    neg: 'maxw_'
+  }
+};
+
+function objToClassName(prop, data) {
+  return renameProps[prop] ? data < 0 ? renameProps[prop].neg ? `${renameProps[prop].neg}${data * -1}` : `undef${data * -1}` : renameProps[prop].pos ? `${renameProps[prop].pos}${data}` : `undef${data}` : `undef${data}`;
+}
+
+const commonFilePath = {
+  'margin-left': 'src/common/css/margin.css',
+  'margin-right': 'src/common/css/margin.css',
+  'margin-top': 'src/common/css/margin.css',
+  'margin-bottom': 'src/common/css/margin.css',
+  'padding-left': 'src/common/css/padding.css',
+  'padding-right': 'src/common/css/padding.css',
+  'padding-top': 'src/common/css/padding.css',
+  'padding-bottom': 'src/common/css/padding.css',
+  top: 'src/common/css/position.css',
+  bottom: 'src/common/css/position.css',
+  left: 'src/common/css/position.css',
+  right: 'src/common/css/position.css',
+  height: 'src/common/css/height.css',
+  width: 'src/common/css/width.css',
+  'min-height': 'src/common/css/height.css',
+  'min-width': 'src/common/css/width.css',
+  'max-height': 'src/common/css/height.css',
+  'max-width': 'src/common/css/width.css'
+};
+const preNames = {
+  height: 'zd-height-',
+  'max-height': 'zd-height-',
+  'min-height': 'zd-height-',
+  width: 'zd-width-',
+  'max-width': 'zd-width-',
+  'min-width': 'zd-width-',
+  top: 'zd-position-',
+  bottom: 'zd-position-',
+  left: 'zd-position-',
+  right: 'zd-position-',
+  'padding-top': 'zd-padding-',
+  'padding-bottom': 'zd-padding-',
+  'padding-left': 'zd-padding-',
+  'padding-right': 'zd-padding-',
+  'margin-top': 'zd-margin-',
+  'margin-bottom': 'zd-margin-',
+  'margin-left': 'zd-margin-',
+  'margin-right': 'zd-margin-'
+};
+
+function allowParent(rule) {
+  return rule.parent.type === 'root' || rule.parent.type === 'atrule' && rule.parent.name === 'media';
+}
+
+module.exports = function (source) {
+  const {
+    rootContext,
+    resourcePath,
+    query
+  } = this;
+
+  let root = _postcss.default.parse(source);
+
+  root.walkRules(rule => {
+    rule.walkDecls(decl => {
+      if (!allowParent(rule)) {
+        return;
+      }
+
+      if (supportedProps.includes(decl.prop) && /px$/gi.test(decl.value) && !/^--/gi.test(decl.prop) && commonFilePath[decl.prop] && !decl.value.includes('calc') && !/[,\s+]+|(\w+)\.|:|(\d+)%/gi.test(rule.selector)) {
+        let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
+        commonFilePath[decl.prop]).replace(/\\/gi, '/')}"`; // n++ < 10 && console.log(composeString);
+
+        if (!composeString.includes('src')) {
+          const cls = objToClassName(decl.prop, parseInt(decl.value));
+          composeString = `${cls} ${composeString}`;
+          decl.value = composeString;
+          decl.prop = 'composes'; // n < 10 && console.log(rule.selector, decl.prop, decl.value);
+        }
+      }
+    });
+  });
+  const output = root.toString(); // console.log(output);
+
+  return output;
+};

package/lib/pluginUtils/getDevPlugins.js

@@ -48,6 +48,8 @@ const getDevPlugins = (options, publicPath) => {
       hasShadowDOM,
       cssVariableReplacementConfig,
       plugins: pluginObject,
+      patterns,
+      patternsRootDir,
       exclude,
       selectorWeightConfig,
       server: {
@@ -194,17 +196,26 @@ const getDevPlugins = (options, publicPath) => {
 
   if (pluginObject.cssVariableReplacement) {
     pluginsArr.push(new _VariableConversionCollector.default({
-      cssVariableReplacementConfig
+      cssVariableReplacementConfig,
+      patterns,
+      patternsRootDir
     }));
   }
 
   if (pluginObject.selectorWeight) {
     pluginsArr.push(new _SelectorPlugin.default({
       selectorWeightConfig,
-      exclude: exclude.selectorWeight
+      exclude: exclude.selectorWeight,
+      patterns,
+      patternsRootDir
     }));
   }
 
+  if (pluginObject.minifier) {
+    // console.log('minifier active');
+    pluginsArr.push(new _plugins.MinifierPlugin());
+  }
+
   return pluginsArr.filter(Boolean);
 };
 

package/lib/pluginUtils/getProdPlugins.js

@@ -102,7 +102,7 @@ const getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({

package/lib/pluginUtils/getUMDCSSPlugins.js

@@ -27,7 +27,7 @@ let getUMDCSSPlugins = () => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[id].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/pluginUtils/getUMDComponentPlugins.js

@@ -27,7 +27,7 @@ let getUMDComponentPlugins = isDocs => {
   }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[name].css'
-  }), new _plugins.UglifyCSSPlugin()];
+  }), new _plugins.MinifyPlugin()];
   return plugins;
 };
 

package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js}

@@ -11,9 +11,9 @@ var _uglifycss = _interopRequireDefault(require("uglifycss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class UglifyCSSPlugin {
+class MinifierPlugin {
   apply(compiler) {
-    compiler.hooks.emit.tap('UglifyCSSPlugin', compilation => {
+    compiler.hooks.emit.tap('MinifierPlugin', compilation => {
       Object.keys(compilation.assets).forEach(filename => {
         if (/\.css$/.test(filename)) {
           try {
@@ -36,4 +36,4 @@ class UglifyCSSPlugin {
 
 }
 
-exports.default = UglifyCSSPlugin;
+exports.default = MinifierPlugin;