@zohodesk/react-cli 0.0.1-beta.170 → 0.0.1-beta.172
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/lib/configs/webpack.dev.config.js +3 -2
- package/lib/configs/webpack.docs.config.js +2 -1
- package/lib/configs/webpack.impact.config.js +2 -1
- package/lib/configs/webpack.prod.config.js +3 -2
- package/lib/loaderUtils/getCSSLoaders.js +3 -3
- package/lib/postcss-plugins/hoverActivePlugin.js +11 -8
- package/lib/schemas/index.js +15 -0
- package/lib/utils/getOptions.js +29 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -2,6 +2,21 @@
|
|
2
2
|
|
3
3
|
A CLI tool for build modern web application and libraries
|
4
4
|
|
5
|
+
# 0.0.1-beta.172
|
6
|
+
We have renamed some options, For Our future features convenience.
|
7
|
+
We have given fallback support. we mo
|
8
|
+
Deprecation Warnings:-
|
9
|
+
* `react-cli.app.hasRTL` ==> `react-cli.app.plugins.hasRTL`
|
10
|
+
* `react-cli.app.rtlExclude` ==> `react-cli.app.exclude.rtl`
|
11
|
+
|
12
|
+
* `react-cli.docs.hasRTL` ==> `react-cli.docs.plugins.hasRTL`
|
13
|
+
* `react-cli.docs.rtlExclude` ==> `react-cli.docs.exclude.rtl`
|
14
|
+
these options have fallback support.
|
15
|
+
|
16
|
+
# 0.0.1-beta.171
|
17
|
+
|
18
|
+
1. added support for entering hover: hover and hover: none media queries via package json on supportapp
|
19
|
+
|
5
20
|
# 0.0.1-beta.170
|
6
21
|
|
7
22
|
this version has same as `0.0.1-exp.169.1`, `0.0.1-exp.169.2`
|
@@ -26,6 +26,7 @@ let {
|
|
26
26
|
outputFolder,
|
27
27
|
plugins,
|
28
28
|
exclude,
|
29
|
+
mediaQueryHoverActiveString,
|
29
30
|
cssUniqueness,
|
30
31
|
seperateCssModules,
|
31
32
|
changeRuntimeChunkChar,
|
@@ -98,10 +99,10 @@ module.exports = {
|
|
98
99
|
}, seperateCssModules ? {
|
99
100
|
test: /\.css$/,
|
100
101
|
exclude: /\.module\.css$/,
|
101
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
|
102
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
|
102
103
|
} : null, {
|
103
104
|
test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
|
104
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
105
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
105
106
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
|
106
107
|
test: /\.tmpl$/,
|
107
108
|
use: [{
|
@@ -24,6 +24,7 @@ let {
|
|
24
24
|
cssUniqueness,
|
25
25
|
plugins,
|
26
26
|
exclude,
|
27
|
+
mediaQueryHoverActiveString,
|
27
28
|
cssHashSelectors,
|
28
29
|
classNamePrefix
|
29
30
|
},
|
@@ -73,7 +74,7 @@ module.exports = isSSTest => ({
|
|
73
74
|
exclude: /node_modules/
|
74
75
|
}, {
|
75
76
|
test: /(\.module)?\.css$/,
|
76
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
77
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
77
78
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
|
78
79
|
test: /\.html$/,
|
79
80
|
use: {
|
@@ -19,6 +19,7 @@ let {
|
|
19
19
|
cssUniqueness,
|
20
20
|
plugins,
|
21
21
|
exclude,
|
22
|
+
mediaQueryHoverActiveString,
|
22
23
|
cssHashSelectors,
|
23
24
|
enableChunkHash,
|
24
25
|
classNamePrefix
|
@@ -68,7 +69,7 @@ module.exports = {
|
|
68
69
|
exclude: /node_modules/
|
69
70
|
}, {
|
70
71
|
test: /(\.module)?\.css$/,
|
71
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
72
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
72
73
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
|
73
74
|
test: /\.html$/,
|
74
75
|
use: {
|
@@ -31,6 +31,7 @@ let {
|
|
31
31
|
server,
|
32
32
|
plugins,
|
33
33
|
exclude,
|
34
|
+
mediaQueryHoverActiveString,
|
34
35
|
cssUniqueness,
|
35
36
|
server: {
|
36
37
|
mode
|
@@ -146,10 +147,10 @@ module.exports = {
|
|
146
147
|
}, seperateCssModules ? {
|
147
148
|
test: /\.css$/,
|
148
149
|
exclude: /\.module\.css$/,
|
149
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
|
150
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
|
150
151
|
} : null, {
|
151
152
|
test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
|
152
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
153
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
153
154
|
}, {
|
154
155
|
test: /\.jpe?g$|\.gif$|\.png$/,
|
155
156
|
use: [{
|
@@ -25,13 +25,13 @@ function excludeEmptyCheckPlugin({
|
|
25
25
|
ignore,
|
26
26
|
plugins
|
27
27
|
}) {
|
28
|
-
return enable ? ignore.length
|
28
|
+
return enable ? ignore.length === 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
|
29
29
|
ignore,
|
30
30
|
plugins
|
31
31
|
})] : [];
|
32
32
|
}
|
33
33
|
|
34
|
-
let getCSSLoaders = (plugins, exclude, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
|
34
|
+
let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
|
35
35
|
// console.log('plugins:')
|
36
36
|
// console.log(plugins)
|
37
37
|
// console.log('exclude:')
|
@@ -80,7 +80,7 @@ let getCSSLoaders = (plugins, exclude, classNameBlob, cssUniqueness, selectorRep
|
|
80
80
|
}), ...excludeEmptyCheckPlugin({
|
81
81
|
enable: plugins.hoverActive,
|
82
82
|
ignore: hoverActiveExcludeLocal,
|
83
|
-
plugins: [require('../postcss-plugins/hoverActivePlugin')]
|
83
|
+
plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
|
84
84
|
}) // require('../postcss-plugins/variableModifier')()
|
85
85
|
].filter(Boolean);
|
86
86
|
return [cssSelectorZipPath && {
|
@@ -14,7 +14,8 @@ const hoverIgnoreQuery = 'Hover:ignore',
|
|
14
14
|
const medHoverIgnoreQuery = 'MedHover:ignore',
|
15
15
|
medActiveIgnoreQuery = 'MedActive:ignore',
|
16
16
|
medHoverActiveIgnoreQuery = 'MedHoverActive:ignore';
|
17
|
-
|
17
|
+
let hoverMedQuerySuffix = '';
|
18
|
+
let hoverNoneMedQuerySuffix = '';
|
18
19
|
const ruleIgnoreCommentRegex = /(Hover:ignore|Active:ignore|HoverActive:ignore)/g;
|
19
20
|
const mediaQueryIgnoreCommentRegex = /(MedHover:ignore|MedActive:ignore|MedHoverActive:ignore)/g;
|
20
21
|
|
@@ -32,9 +33,11 @@ function isHoverPresent(atrule) {
|
|
32
33
|
return hoverPresent;
|
33
34
|
}
|
34
35
|
|
35
|
-
module.exports = _postcss.default.plugin('postcss-mobile-hover',
|
36
|
+
module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHoverActiveString => rootOriginal => {
|
36
37
|
const hoverRules = [];
|
37
38
|
let positionsObj = {};
|
39
|
+
hoverMedQuerySuffix = mediaQueryHoverActiveString.hover;
|
40
|
+
hoverNoneMedQuerySuffix = mediaQueryHoverActiveString.none;
|
38
41
|
|
39
42
|
function isRuleHasIgnoreComment(index, type) {
|
40
43
|
const prevNode = rootOriginal.nodes[index - 1];
|
@@ -72,8 +75,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
|
|
72
75
|
|
73
76
|
function getPositionsOfHoverAndActiveMedQueries(parent) {
|
74
77
|
const allNodes = rootOriginal.nodes;
|
75
|
-
const hoverMediaQuery = `${parent.params} and
|
76
|
-
const hoverNoneMediaQuery = `${parent.params} and
|
78
|
+
const hoverMediaQuery = `${parent.params} and ${hoverMedQuerySuffix}`;
|
79
|
+
const hoverNoneMediaQuery = `${parent.params} and ${hoverNoneMedQuerySuffix}`;
|
77
80
|
const positions = {
|
78
81
|
hovMed: allNodes[positionsObj[hoverMediaQuery]],
|
79
82
|
actMed: allNodes[positionsObj[hoverNoneMediaQuery]]
|
@@ -248,8 +251,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
|
|
248
251
|
|
249
252
|
|
250
253
|
rootOriginal.walkAtRules(atrule => {
|
251
|
-
const hoverQuery = `${atrule.params} and
|
252
|
-
const activeQuery = `${atrule.params} and
|
254
|
+
const hoverQuery = `${atrule.params} and ${hoverMedQuerySuffix}`;
|
255
|
+
const activeQuery = `${atrule.params} and ${hoverNoneMedQuerySuffix}`;
|
253
256
|
|
254
257
|
if (isHoverPresent(atrule)) {
|
255
258
|
if (!positionsObj[hoverQuery] && !positionsObj[activeQuery]) {
|
@@ -308,13 +311,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOrigi
|
|
308
311
|
// hover
|
309
312
|
const hoverQuery = rootOriginal.append({
|
310
313
|
name: 'media',
|
311
|
-
params:
|
314
|
+
params: `${hoverMedQuerySuffix}`
|
312
315
|
}).last; // Create a media query targetting devices that don't support hover
|
313
316
|
// (ie. devices where we should fall back to :active instead)
|
314
317
|
|
315
318
|
const activeQuery = rootOriginal.append({
|
316
319
|
name: 'media',
|
317
|
-
params:
|
320
|
+
params: `${hoverNoneMedQuerySuffix}`
|
318
321
|
}).last; // Loop through the hover rules and apply them to each of the media
|
319
322
|
// queries
|
320
323
|
// eslint-disable-next-line no-labels
|
package/lib/schemas/index.js
CHANGED
@@ -13,6 +13,7 @@ var _getCurrentBranch = _interopRequireDefault(require("../utils/getCurrentBranc
|
|
13
13
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
15
|
|
16
|
+
// TODO move deprecated options to separate file and manage seperately
|
16
17
|
var _default = {
|
17
18
|
cliRootPath: null,
|
18
19
|
unstableDepsInverse: {
|
@@ -159,6 +160,10 @@ var _default = {
|
|
159
160
|
cli: 'mock_port'
|
160
161
|
}
|
161
162
|
},
|
163
|
+
mediaQueryHoverActiveString: {
|
164
|
+
hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
|
165
|
+
none: '(hover: none)'
|
166
|
+
},
|
162
167
|
disableES5Transpile: false,
|
163
168
|
isReactMig: false,
|
164
169
|
hasWidget: false,
|
@@ -193,6 +198,9 @@ var _default = {
|
|
193
198
|
cli: 'attr_name'
|
194
199
|
},
|
195
200
|
publicPaths: false,
|
201
|
+
// TODO: Deprecated
|
202
|
+
hasRTL: false,
|
203
|
+
rtlExclude: [],
|
196
204
|
instrumentScript: {
|
197
205
|
value: false,
|
198
206
|
cli: 'instru_script'
|
@@ -276,6 +284,10 @@ var _default = {
|
|
276
284
|
},
|
277
285
|
branch: false
|
278
286
|
},
|
287
|
+
mediaQueryHoverActiveString: {
|
288
|
+
hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
|
289
|
+
none: '(hover: none)'
|
290
|
+
},
|
279
291
|
componentFolder: 'src',
|
280
292
|
cssUniqueness: {
|
281
293
|
value: true,
|
@@ -284,6 +296,9 @@ var _default = {
|
|
284
296
|
enableChunkHash: false,
|
285
297
|
folder: 'src',
|
286
298
|
disableES5Transpile: false,
|
299
|
+
// TODO: Deprecated
|
300
|
+
hasRTL: false,
|
301
|
+
rtlExclude: [],
|
287
302
|
plugins: {
|
288
303
|
hasRTL: false,
|
289
304
|
hoverActive: false,
|
package/lib/utils/getOptions.js
CHANGED
@@ -122,7 +122,34 @@ let defaulter = (target, source) => {
|
|
122
122
|
return defaultObject;
|
123
123
|
};
|
124
124
|
|
125
|
-
global.reactCLIOptions = null;
|
125
|
+
global.reactCLIOptions = null; // function selectn(obj, key) {
|
126
|
+
// let temp = obj;
|
127
|
+
// let keys = key.split('.');
|
128
|
+
// for (let i = 0; i < keys.length; i++) {
|
129
|
+
// const element = keys[i];
|
130
|
+
// temp = temp && temp[element];
|
131
|
+
// }
|
132
|
+
// return temp;
|
133
|
+
// }
|
134
|
+
|
135
|
+
function deprecationSupport(options) {
|
136
|
+
// if (selectn(options, ".app.hasRTL") === true) {
|
137
|
+
if (options.app.hasRTL === true) {
|
138
|
+
options.app.plugins.hasRTL = true;
|
139
|
+
}
|
140
|
+
|
141
|
+
if (options.docs.hasRTL === true) {
|
142
|
+
options.docs.plugins.hasRTL = true;
|
143
|
+
}
|
144
|
+
|
145
|
+
if (options.app.rtlExclude.length > 0) {
|
146
|
+
options.app.exclude.rtl = options.app.rtlExclude;
|
147
|
+
}
|
148
|
+
|
149
|
+
if (options.docs.rtlExclude.length > 0) {
|
150
|
+
options.docs.exclude.rtl = options.docs.rtlExclude;
|
151
|
+
}
|
152
|
+
}
|
126
153
|
|
127
154
|
let getOptions = () => {
|
128
155
|
if (global.reactCLIOptions) {
|
@@ -142,6 +169,7 @@ let getOptions = () => {
|
|
142
169
|
|
143
170
|
options.npmVersion = getNpmVersion();
|
144
171
|
options.cwd = getCWD();
|
172
|
+
deprecationSupport(options);
|
145
173
|
options.packageVersion = process.env.npm_package_version;
|
146
174
|
global.reactCLIOptions = options;
|
147
175
|
return options;
|