@zohodesk/react-cli 0.0.1-beta.170 → 0.0.1-beta.171

package/README.md

@@ -2,6 +2,10 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-beta.171
+
+1. added support for entering hover: hover and hover: none media queries via package json on supportapp
+
 # 0.0.1-beta.170
 
 this version has same as `0.0.1-exp.169.1`, `0.0.1-exp.169.2`

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

@@ -26,6 +26,7 @@ let {
     outputFolder,
     plugins,
     exclude,
+    mediaQueryHoverActiveString,
     cssUniqueness,
     seperateCssModules,
     changeRuntimeChunkChar,
@@ -98,10 +99,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
       use: [{

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

@@ -24,6 +24,7 @@ let {
     cssUniqueness,
     plugins,
     exclude,
+    mediaQueryHoverActiveString,
     cssHashSelectors,
     classNamePrefix
   },
@@ -73,7 +74,7 @@ module.exports = isSSTest => ({
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

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

@@ -19,6 +19,7 @@ let {
     cssUniqueness,
     plugins,
     exclude,
+    mediaQueryHoverActiveString,
     cssHashSelectors,
     enableChunkHash,
     classNamePrefix
@@ -68,7 +69,7 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

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

@@ -31,6 +31,7 @@ let {
     server,
     plugins,
     exclude,
+    mediaQueryHoverActiveString,
     cssUniqueness,
     server: {
       mode
@@ -146,10 +147,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
       use: [{

package/lib/loaderUtils/getCSSLoaders.js

@@ -25,13 +25,13 @@ function excludeEmptyCheckPlugin({
   ignore,
   plugins
 }) {
-  return enable ? ignore.length == 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
+  return enable ? ignore.length === 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
     ignore,
     plugins
   })] : [];
 }
 
-let getCSSLoaders = (plugins, exclude, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
+let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
   // console.log('plugins:')
   // console.log(plugins)
   // console.log('exclude:')
@@ -80,7 +80,7 @@ let getCSSLoaders = (plugins, exclude, classNameBlob, cssUniqueness, selectorRep
   }), ...excludeEmptyCheckPlugin({
     enable: plugins.hoverActive,
     ignore: hoverActiveExcludeLocal,
-    plugins: [require('../postcss-plugins/hoverActivePlugin')]
+    plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
   }) // require('../postcss-plugins/variableModifier')()
   ].filter(Boolean);
   return [cssSelectorZipPath && {

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -14,7 +14,8 @@ const hoverIgnoreQuery = 'Hover:ignore',
 const medHoverIgnoreQuery = 'MedHover:ignore',
       medActiveIgnoreQuery = 'MedActive:ignore',
       medHoverActiveIgnoreQuery = 'MedHoverActive:ignore';
-const hoverMedQuerySuffix = '(min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)';
+let hoverMedQuerySuffix = '';
+let hoverNoneMedQuerySuffix = '';
 const ruleIgnoreCommentRegex = /(Hover:ignore|Active:ignore|HoverActive:ignore)/g;
 const mediaQueryIgnoreCommentRegex = /(MedHover:ignore|MedActive:ignore|MedHoverActive:ignore)/g;
 
@@ -32,9 +33,11 @@ function isHoverPresent(atrule) {
   return hoverPresent;
 }
 
-module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOriginal => {
+module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHoverActiveString => rootOriginal => {
   const hoverRules = [];
   let positionsObj = {};
+  hoverMedQuerySuffix = mediaQueryHoverActiveString.hover;
+  hoverNoneMedQuerySuffix = mediaQueryHoverActiveString.none;
 
   function isRuleHasIgnoreComment(index, type) {
     const prevNode = rootOriginal.nodes[index - 1];
@@ -72,8 +75,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
 
   function getPositionsOfHoverAndActiveMedQueries(parent) {
     const allNodes = rootOriginal.nodes;
-    const hoverMediaQuery = `${parent.params} and all and ${hoverMedQuerySuffix}`;
-    const hoverNoneMediaQuery = `${parent.params} and (hover: none)`;
+    const hoverMediaQuery = `${parent.params} and ${hoverMedQuerySuffix}`;
+    const hoverNoneMediaQuery = `${parent.params} and ${hoverNoneMedQuerySuffix}`;
     const positions = {
       hovMed: allNodes[positionsObj[hoverMediaQuery]],
       actMed: allNodes[positionsObj[hoverNoneMediaQuery]]
@@ -248,8 +251,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
 
 
   rootOriginal.walkAtRules(atrule => {
-    const hoverQuery = `${atrule.params} and all and ${hoverMedQuerySuffix}`;
-    const activeQuery = `${atrule.params} and (hover: none)`;
+    const hoverQuery = `${atrule.params} and ${hoverMedQuerySuffix}`;
+    const activeQuery = `${atrule.params} and ${hoverNoneMedQuerySuffix}`;
 
     if (isHoverPresent(atrule)) {
       if (!positionsObj[hoverQuery] && !positionsObj[activeQuery]) {
@@ -308,13 +311,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
     // hover
     const hoverQuery = rootOriginal.append({
       name: 'media',
-      params: `all and ${hoverMedQuerySuffix}`
+      params: `${hoverMedQuerySuffix}`
     }).last; // Create a media query targetting devices that don't support hover
     // (ie. devices where we should fall back to :active instead)
 
     const activeQuery = rootOriginal.append({
       name: 'media',
-      params: '(hover: none)'
+      params: `${hoverNoneMedQuerySuffix}`
     }).last; // Loop through the hover rules and apply them to each of the media
     // queries
     // eslint-disable-next-line no-labels

package/lib/schemas/index.js

@@ -159,6 +159,10 @@ var _default = {
         cli: 'mock_port'
       }
     },
+    mediaQueryHoverActiveString: {
+      hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
+      none: '(hover: none)'
+    },
     disableES5Transpile: false,
     isReactMig: false,
     hasWidget: false,
@@ -276,6 +280,10 @@ var _default = {
       },
       branch: false
     },
+    mediaQueryHoverActiveString: {
+      hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
+      none: '(hover: none)'
+    },
     componentFolder: 'src',
     cssUniqueness: {
       value: true,

package/package.json

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