@zohodesk/react-cli 0.0.1-exp.168.1 → 0.0.1-exp.168.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +5 -7
- package/bin/cli.js +20 -10
- package/lib/configs/webpack.dev.config.js +4 -2
- package/lib/configs/webpack.docs.config.js +3 -1
- package/lib/configs/webpack.impact.config.js +1 -1
- package/lib/configs/webpack.prod.config.js +4 -2
- package/lib/loaderUtils/getCSSLoaders.js +5 -3
- package/lib/postcss-plugins/hoverActivePlugin.js +264 -0
- package/lib/postcss-plugins/keyframesPlugin.js +126 -0
- package/lib/schemas/index.js +6 -4
- package/lib/servers/getCliPath.js +2 -8
- package/package.json +4 -1
- package/.prettierrc +0 -5
package/README.md
CHANGED
@@ -2,14 +2,12 @@
|
|
2
2
|
|
3
3
|
A CLI tool for build modern web application and libraries
|
4
4
|
|
5
|
-
# 0.0.1-exp.168.
|
5
|
+
# 0.0.1-exp.168.2
|
6
6
|
|
7
|
-
Changes
|
7
|
+
Changes :
|
8
8
|
|
9
|
-
1.
|
10
|
-
|
11
|
-
2. `--efc_output_file=efc-sdk-[version].js` option added to modify efc output file by terminal
|
12
|
-
3. added logic to print error message during command run, Previously when executable not found error messages not printed
|
9
|
+
1. hoverActive case handled with postcss hover:hover media query and hover:none media query is added
|
10
|
+
2. flag for hoverActive used to add/remove postcss changes
|
13
11
|
|
14
12
|
# 0.0.1-beta.168
|
15
13
|
|
@@ -166,7 +164,7 @@ this version has same as `# 0.0.1-exp.164.1`, `# 0.0.1-exp.164.2` and below and
|
|
166
164
|
|
167
165
|
# 0.0.1-exp.159
|
168
166
|
|
169
|
-
-
|
167
|
+
- isse fix:-
|
170
168
|
- when rtl ltr css split enable manifest json css filename keys comes with hash .
|
171
169
|
|
172
170
|
# 0.0.1-beta.158
|
package/bin/cli.js
CHANGED
@@ -1,26 +1,19 @@
|
|
1
1
|
#!/usr/bin/env node
|
2
2
|
|
3
3
|
const path = require('path');
|
4
|
+
const os = require('os');
|
4
5
|
const { existsSync } = require('fs');
|
5
|
-
const { spawnSync
|
6
|
+
const { spawnSync, spawn } = require('child_process');
|
6
7
|
const { getOptions } = require('../lib/utils/index.js');
|
7
8
|
|
8
9
|
const { log } = require('../lib/utils');
|
9
|
-
const { getCliPath } = require('../lib/servers/getCliPath.js');
|
10
10
|
//initPreCommitHook();
|
11
11
|
|
12
12
|
const options = getOptions();
|
13
13
|
|
14
|
-
function spawnSync(...args) {
|
15
|
-
const result = _spawnSync(...args);
|
16
|
-
if (result.error) {
|
17
|
-
console.error(result.error);
|
18
|
-
}
|
19
|
-
return result;
|
20
|
-
}
|
21
|
-
|
22
14
|
const { esLint: esLintOptions } = options || {};
|
23
15
|
const { preprocess } = options;
|
16
|
+
let { cliRootPath } = options;
|
24
17
|
const {
|
25
18
|
ignoreFilePaths: esLintIgnorePaths,
|
26
19
|
fix: esLintFix,
|
@@ -28,10 +21,27 @@ const {
|
|
28
21
|
reportPath: reportPath
|
29
22
|
} = esLintOptions || {};
|
30
23
|
|
24
|
+
const isWindows = os.platform().toLowerCase() === 'win32';
|
25
|
+
|
31
26
|
const [, , option] = process.argv;
|
32
27
|
const args = process.argv.slice(3);
|
33
28
|
const appPath = process.cwd();
|
34
29
|
|
30
|
+
const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
|
31
|
+
|
32
|
+
if (!cliRootPath) {
|
33
|
+
cliRootPath = path.join(__dirname, '..');
|
34
|
+
}
|
35
|
+
|
36
|
+
const _getCliPath = !isNodeModuleUnderAppFolder
|
37
|
+
? libName => path.join(cliRootPath, 'node_modules', '.bin', libName)
|
38
|
+
: libName => libName;
|
39
|
+
const suffixExt = isWindows ? '.cmd' : '';
|
40
|
+
|
41
|
+
function getCliPath(libName) {
|
42
|
+
return _getCliPath(libName) + suffixExt;
|
43
|
+
}
|
44
|
+
|
35
45
|
const webpack = getCliPath('webpack');
|
36
46
|
|
37
47
|
const nodemon = getCliPath('nodemon');
|
@@ -25,7 +25,9 @@ let {
|
|
25
25
|
server,
|
26
26
|
outputFolder,
|
27
27
|
rtlExclude,
|
28
|
+
combinerMq,
|
28
29
|
hasRTL,
|
30
|
+
hoverActive,
|
29
31
|
cssUniqueness,
|
30
32
|
seperateCssModules,
|
31
33
|
changeRuntimeChunkChar,
|
@@ -98,10 +100,10 @@ module.exports = {
|
|
98
100
|
}, seperateCssModules ? {
|
99
101
|
test: /\.css$/,
|
100
102
|
exclude: /\.module\.css$/,
|
101
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, '[local]', false, null)
|
103
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, combinerMq, hoverActive, '[local]', false, null)
|
102
104
|
} : null, {
|
103
105
|
test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
|
104
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
106
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, combinerMq, rtlExclude, hoverActive, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
105
107
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
|
106
108
|
test: /\.tmpl$/,
|
107
109
|
use: [{
|
@@ -22,7 +22,9 @@ let {
|
|
22
22
|
disableES5Transpile,
|
23
23
|
enableChunkHash,
|
24
24
|
cssUniqueness,
|
25
|
+
combinerMq,
|
25
26
|
hasRTL,
|
27
|
+
hoverActive,
|
26
28
|
rtlExclude,
|
27
29
|
cssHashSelectors,
|
28
30
|
classNamePrefix
|
@@ -73,7 +75,7 @@ module.exports = isSSTest => ({
|
|
73
75
|
exclude: /node_modules/
|
74
76
|
}, {
|
75
77
|
test: /(\.module)?\.css$/,
|
76
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
78
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, combinerMq, rtlExclude, hoverActive, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
77
79
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
|
78
80
|
test: /\.html$/,
|
79
81
|
use: {
|
@@ -68,7 +68,7 @@ module.exports = {
|
|
68
68
|
exclude: /node_modules/
|
69
69
|
}, {
|
70
70
|
test: /(\.module)?\.css$/,
|
71
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
71
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, combinerMq, hoverActive, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
72
72
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
|
73
73
|
test: /\.html$/,
|
74
74
|
use: {
|
@@ -27,8 +27,10 @@ let {
|
|
27
27
|
removeAttribute,
|
28
28
|
enableSMap,
|
29
29
|
server,
|
30
|
+
combinerMq,
|
30
31
|
hasRTL,
|
31
32
|
rtlExclude,
|
33
|
+
hoverActive,
|
32
34
|
cssUniqueness,
|
33
35
|
server: {
|
34
36
|
mode
|
@@ -144,10 +146,10 @@ module.exports = {
|
|
144
146
|
}, seperateCssModules ? {
|
145
147
|
test: /\.css$/,
|
146
148
|
exclude: /\.module\.css$/,
|
147
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, '[local]', false, null)
|
149
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, hoverActive, keyframesRedMtn, '[local]', false, null)
|
148
150
|
} : null, {
|
149
151
|
test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
|
150
|
-
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
152
|
+
use: (0, _loaderUtils.getCSSLoaders)(hasRTL, combinerMq, rtlExclude, hoverActive, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
151
153
|
}, {
|
152
154
|
test: /\.jpe?g$|\.gif$|\.png$/,
|
153
155
|
use: [{
|
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
16
16
|
let options = (0, _utils.getOptions)();
|
17
17
|
let isWin = process.platform === 'win32';
|
18
18
|
|
19
|
-
let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
|
19
|
+
let getCSSLoaders = (hasRTL, combinerMq, rtlExclude, hoverActive, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
|
20
20
|
const {
|
21
21
|
devCssFileBountry
|
22
22
|
} = options.app;
|
@@ -28,7 +28,8 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
|
|
28
28
|
} = options.impactService;
|
29
29
|
let rtlExcludeLocal = isWin ? rtlExclude.map(r => r.replace(/\//g, '\\')) : rtlExclude;
|
30
30
|
let cssLoaderOptions = {
|
31
|
-
importLoaders: hasRTL ? 1 : 0,
|
31
|
+
// importLoaders: hasRTL||hoverActive ? 1 : 0,
|
32
|
+
importLoaders: 1,
|
32
33
|
modules: {},
|
33
34
|
sourceMap: true
|
34
35
|
};
|
@@ -50,7 +51,8 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
|
|
50
51
|
return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
|
51
52
|
}
|
52
53
|
})]
|
53
|
-
})
|
54
|
+
}), // require('postcss-import')(),
|
55
|
+
combinerMq && require('postcss-combine-media-query')(), hoverActive && require('../postcss-plugins/hoverActivePlugin')()].filter(Boolean);
|
54
56
|
return [cssSelectorZipPath && {
|
55
57
|
loader: require.resolve('../loaders/selectorMappingLoader')
|
56
58
|
}, {
|
@@ -0,0 +1,264 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _postcss = _interopRequireDefault(require("postcss"));
|
4
|
+
|
5
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
6
|
+
|
7
|
+
module.exports = _postcss.default.plugin("postcss-mobile-hover", () => {
|
8
|
+
return root => {
|
9
|
+
function checkHoverIgnore(rule, index) {
|
10
|
+
return rule.nodes !== undefined && rule.nodes[index - 1] !== undefined && rule.nodes[index - 1].type == "comment" && rule.nodes[index - 1].text.includes("hover:ignore");
|
11
|
+
}
|
12
|
+
|
13
|
+
function checkPositionNodeHov(parent) {
|
14
|
+
let clone = parent.clone();
|
15
|
+
clone.params = clone.params + " and (hover: hover)";
|
16
|
+
var posn = -1;
|
17
|
+
root.nodes.map((node, index) => {
|
18
|
+
if (node.params == clone.params) {
|
19
|
+
posn = index;
|
20
|
+
}
|
21
|
+
});
|
22
|
+
return posn;
|
23
|
+
}
|
24
|
+
|
25
|
+
function checkPositionNodeAct(parent) {
|
26
|
+
let clone = parent.clone();
|
27
|
+
clone.params = clone.params + " and (hover: none)";
|
28
|
+
var posn = -1;
|
29
|
+
root.nodes.map((node, index) => {
|
30
|
+
if (clone.params == node.params) {
|
31
|
+
posn = index;
|
32
|
+
}
|
33
|
+
});
|
34
|
+
return posn;
|
35
|
+
}
|
36
|
+
|
37
|
+
function checkPositionNodeFireFox(parent) {
|
38
|
+
var posn = -1;
|
39
|
+
root.nodes.map((nodes, index) => {
|
40
|
+
if (nodes.params == "all and (min--moz-device-pixel-ratio:0)") {
|
41
|
+
posn = index;
|
42
|
+
}
|
43
|
+
});
|
44
|
+
return posn;
|
45
|
+
}
|
46
|
+
|
47
|
+
const hoverRules = []; // Start by identifying all :hover rules
|
48
|
+
|
49
|
+
root.walkAtRules((atrule, index) => {
|
50
|
+
let hoverPresent = false;
|
51
|
+
atrule.walkRules((rule, index) => {
|
52
|
+
if (rule.selector.includes("hover")) {
|
53
|
+
hoverPresent = true;
|
54
|
+
}
|
55
|
+
});
|
56
|
+
|
57
|
+
if (hoverPresent) {
|
58
|
+
root.append({
|
59
|
+
name: "media",
|
60
|
+
params: atrule.params + " and (hover: hover)"
|
61
|
+
});
|
62
|
+
root.append({
|
63
|
+
name: "media",
|
64
|
+
params: atrule.params + " and (hover: none)"
|
65
|
+
});
|
66
|
+
root.append({
|
67
|
+
name: "media",
|
68
|
+
params: "all and (min--moz-device-pixel-ratio:0)"
|
69
|
+
});
|
70
|
+
}
|
71
|
+
});
|
72
|
+
root.walkRules(/:hover/i, (rule, index) => {
|
73
|
+
if (!checkHoverIgnore(rule, index)) {
|
74
|
+
// media hover query with ',' ' ' '+'
|
75
|
+
if (rule.parent.name != undefined && rule.parent.params !== undefined) {
|
76
|
+
//console.log(rule.parent.params)
|
77
|
+
// console.log("media query" , rule.selector)
|
78
|
+
if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
|
79
|
+
//console.log("media comma", rule.selector)
|
80
|
+
if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
|
81
|
+
//console.log("not hovered")
|
82
|
+
var posHov = checkPositionNodeHov(rule.parent);
|
83
|
+
var actHov = checkPositionNodeAct(rule.parent);
|
84
|
+
var firHov = checkPositionNodeFireFox(rule.parent);
|
85
|
+
var hovMed = root.nodes[posHov];
|
86
|
+
var actMed = root.nodes[actHov];
|
87
|
+
var firMed = root.nodes[firHov]; //console.log(hovMed, actMed);
|
88
|
+
|
89
|
+
var str = ",";
|
90
|
+
|
91
|
+
if (rule.selector.includes(",\n")) {
|
92
|
+
str = ",\n";
|
93
|
+
}
|
94
|
+
|
95
|
+
rule.selector.split(str).map(subrule => {
|
96
|
+
subrule = subrule.trim();
|
97
|
+
let clone = rule.clone();
|
98
|
+
|
99
|
+
if (subrule.includes("hover")) {
|
100
|
+
clone.selector = subrule;
|
101
|
+
hovMed.append(clone);
|
102
|
+
firMed.append(clone);
|
103
|
+
actMed.append(clone.clone({
|
104
|
+
selector: clone.selector.replace(/:hover/gi, ":active")
|
105
|
+
}));
|
106
|
+
} else {
|
107
|
+
clone.selector = subrule;
|
108
|
+
root.append(clone);
|
109
|
+
}
|
110
|
+
});
|
111
|
+
rule.remove();
|
112
|
+
}
|
113
|
+
} else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
|
114
|
+
//console.log("media plus", rule.selector)
|
115
|
+
if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
|
116
|
+
//console.log("not hovered")
|
117
|
+
var posHov = checkPositionNodeHov(rule.parent);
|
118
|
+
var actHov = checkPositionNodeAct(rule.parent);
|
119
|
+
var firHov = checkPositionNodeFireFox(rule.parent);
|
120
|
+
var hovMed = root.nodes[posHov];
|
121
|
+
var actMed = root.nodes[actHov];
|
122
|
+
var firMed = root.nodes[firHov]; // console.log(hovMed, actMed);
|
123
|
+
|
124
|
+
if (rule.selector.includes("hover")) {
|
125
|
+
console.log(rule.selector);
|
126
|
+
firMed.append(rule);
|
127
|
+
hovMed.append(rule);
|
128
|
+
actMed.append(rule.clone({
|
129
|
+
selector: rule.selector.replace(/:hover/gi, ":active")
|
130
|
+
}));
|
131
|
+
} else {
|
132
|
+
root.append(rule);
|
133
|
+
}
|
134
|
+
} else {// console.log(rule.selector)
|
135
|
+
}
|
136
|
+
} else if (rule.selector.includes(" ")) {
|
137
|
+
//console.log("media space", rule.selector)
|
138
|
+
if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
|
139
|
+
//console.log("not hovered")
|
140
|
+
var posHov = checkPositionNodeHov(rule.parent);
|
141
|
+
var actHov = checkPositionNodeAct(rule.parent);
|
142
|
+
var firHov = checkPositionNodeFireFox(rule.parent);
|
143
|
+
var hovMed = root.nodes[posHov];
|
144
|
+
var actMed = root.nodes[actHov];
|
145
|
+
var firMed = root.nodes[firMed]; //console.log(hovMed, actMed);
|
146
|
+
|
147
|
+
if (rule.selector.includes("hover")) {
|
148
|
+
hovMed.append(rule);
|
149
|
+
actMed.append(rule.clone({
|
150
|
+
selector: rule.selector.replace(/:hover/gi, ":active")
|
151
|
+
}));
|
152
|
+
} else {
|
153
|
+
root.append(rule);
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
} //usual hover query with ',' ' ' '+'
|
158
|
+
else if ((rule.selector.includes(",") || rule.selector.includes(" ") || rule.selector.includes("+")) && rule.parent.name == undefined) {
|
159
|
+
if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
|
160
|
+
//console.log("comma" , rule.selector.split('\n'));
|
161
|
+
rule.selector.split(",\n").map(subrule => {
|
162
|
+
subrule = subrule.trim();
|
163
|
+
let clone = rule.clone();
|
164
|
+
|
165
|
+
if (subrule.includes("hover")) {
|
166
|
+
clone.selector = subrule;
|
167
|
+
hoverRules.push(clone);
|
168
|
+
} else {
|
169
|
+
clone.selector = subrule;
|
170
|
+
root.append(clone);
|
171
|
+
}
|
172
|
+
});
|
173
|
+
rule.remove();
|
174
|
+
} else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
|
175
|
+
//console.log("plus" , rule.selector);
|
176
|
+
if (rule.selector.includes("hover")) {
|
177
|
+
//console.log("plus:", rule.selector);
|
178
|
+
hoverRules.push(rule);
|
179
|
+
rule.remove();
|
180
|
+
}
|
181
|
+
} else if (rule.selector.includes(" ")) {
|
182
|
+
//console.log("space", rule.selector);
|
183
|
+
hoverRules.push(rule);
|
184
|
+
rule.remove();
|
185
|
+
}
|
186
|
+
} // usual hover query
|
187
|
+
else {
|
188
|
+
//console.log(rule);
|
189
|
+
if (rule.selector.includes("hover")) {
|
190
|
+
hoverRules.push(rule);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
}); // If there are any :hover rules in the input, then create media queries
|
195
|
+
// to automatically translate it into :active on touch-based devices
|
196
|
+
|
197
|
+
if (hoverRules.length > 0) {
|
198
|
+
//console.log(hoverRules)
|
199
|
+
// Create a media query targetting ie10 + 11, as these browsers
|
200
|
+
// wont support @media (hover: hover) - but we know that this
|
201
|
+
// browser never runs on mobile devices, so we'll just push the
|
202
|
+
// hover rules there
|
203
|
+
// const ieQuery = root.append({
|
204
|
+
// name: 'media',
|
205
|
+
// params:
|
206
|
+
// 'all and ' +
|
207
|
+
// '(-ms-high-contrast: none), ' +
|
208
|
+
// '(-ms-high-contrast: active)'
|
209
|
+
// }).last;
|
210
|
+
// Create a media query targetting firefox, as this browser doesn't
|
211
|
+
// support @media (hover: hover)... Technically this browser could
|
212
|
+
// run on both desktop and mobile devices, but we're going to be
|
213
|
+
// applying :hover and hope for the best
|
214
|
+
const firefoxQuery = root.append({
|
215
|
+
name: "media",
|
216
|
+
params: "all and (min--moz-device-pixel-ratio:0)"
|
217
|
+
}).last; // Create a media query targetting devices that actually support
|
218
|
+
// hover
|
219
|
+
|
220
|
+
const hoverQuery = root.append({
|
221
|
+
name: "media",
|
222
|
+
params: "(hover: hover)"
|
223
|
+
}).last; // Create a media query targetting devices that don't support hover
|
224
|
+
// (ie. devices where we should fall back to :active instead)
|
225
|
+
|
226
|
+
const activeQuery = root.append({
|
227
|
+
name: "media",
|
228
|
+
params: "(hover: none)"
|
229
|
+
}).last; // Loop through the hover rules and apply them to each of the media
|
230
|
+
// queries
|
231
|
+
// eslint-disable-next-line no-labels
|
232
|
+
|
233
|
+
outerLoop: for (const hoverRule of hoverRules) {
|
234
|
+
// determine if the rule has been nested inside another media
|
235
|
+
// query; in that case bail out as we have no way of reliably
|
236
|
+
// nesting these queries
|
237
|
+
let parentRule = hoverRule.parent;
|
238
|
+
|
239
|
+
while (parentRule) {
|
240
|
+
if (parentRule.type === "atrule" && parentRule.name === "media") {
|
241
|
+
// eslint-disable-next-line no-labels
|
242
|
+
continue outerLoop;
|
243
|
+
}
|
244
|
+
|
245
|
+
parentRule = parentRule.parent;
|
246
|
+
} // Push a clone of the :hover rule 'as is' to queries where we
|
247
|
+
// expect the user's device to support hover
|
248
|
+
// ieQuery.append(hoverRule.clone());
|
249
|
+
|
250
|
+
|
251
|
+
firefoxQuery.append(hoverRule.clone());
|
252
|
+
hoverQuery.append(hoverRule.clone()); // Push a clone of the :hover rule, where we transform the
|
253
|
+
// selector to :active to the query targetting devices that
|
254
|
+
// don't support hover
|
255
|
+
|
256
|
+
activeQuery.append(hoverRule.clone({
|
257
|
+
selector: hoverRule.selector.replace(/:hover/gi, ":active")
|
258
|
+
})); // remove legacy rule from output
|
259
|
+
|
260
|
+
hoverRule.remove();
|
261
|
+
}
|
262
|
+
}
|
263
|
+
};
|
264
|
+
});
|
@@ -0,0 +1,126 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _postcss = _interopRequireWildcard(require("postcss"));
|
4
|
+
|
5
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
6
|
+
|
7
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
8
|
+
|
9
|
+
module.exports = _postcss.default.plugin("postcss-reduced-motion", () => {
|
10
|
+
function animDeclPosn(rule) {
|
11
|
+
let posn = -1;
|
12
|
+
rule.walkDecls((decl, index) => {
|
13
|
+
//console.log(decl.prop, " " , decl.value);
|
14
|
+
if (decl.prop.includes("animation")) {
|
15
|
+
//console.log(decl.prop," selected")
|
16
|
+
posn = index;
|
17
|
+
}
|
18
|
+
});
|
19
|
+
return posn;
|
20
|
+
}
|
21
|
+
|
22
|
+
return root => {
|
23
|
+
let redRules = [];
|
24
|
+
root.walkAtRules((atrule, index) => {
|
25
|
+
if (index != 0) {
|
26
|
+
//ignore case
|
27
|
+
let ignore = false;
|
28
|
+
|
29
|
+
if (root.nodes[index - 1].type == "comment") {
|
30
|
+
ignore = root.nodes[index - 1].text.includes("reduced-motion:ignore");
|
31
|
+
} //animation none push to reduced motion
|
32
|
+
|
33
|
+
|
34
|
+
if (!ignore) {
|
35
|
+
//console.log(atrule)
|
36
|
+
atrule.walkRules(rule => {
|
37
|
+
let pos = animDeclPosn(rule);
|
38
|
+
|
39
|
+
if (pos != -1) {
|
40
|
+
let ruleNew = rule.clone();
|
41
|
+
let decl = ruleNew.nodes[pos];
|
42
|
+
let declClone = decl.clone();
|
43
|
+
declClone.value = "none";
|
44
|
+
ruleNew.walkDecls(declVal => declVal.remove());
|
45
|
+
ruleNew.append(declClone);
|
46
|
+
let atRuleNew = atrule.clone();
|
47
|
+
atRuleNew.nodes = [];
|
48
|
+
atRuleNew.push(ruleNew);
|
49
|
+
redRules.push(atRuleNew);
|
50
|
+
}
|
51
|
+
});
|
52
|
+
}
|
53
|
+
} else {
|
54
|
+
//animation none push to reduced motion
|
55
|
+
//console.log(atrule)
|
56
|
+
atrule.walkRules(rule => {
|
57
|
+
let pos = animDeclPosn(rule);
|
58
|
+
|
59
|
+
if (pos != -1) {
|
60
|
+
let ruleNew = rule.clone();
|
61
|
+
let decl = ruleNew.nodes[pos];
|
62
|
+
let declClone = decl.clone();
|
63
|
+
declClone.value = "none";
|
64
|
+
ruleNew.walkDecls(declVal => declVal.remove());
|
65
|
+
ruleNew.append(declClone);
|
66
|
+
let atRuleNew = atrule.clone();
|
67
|
+
atRuleNew.nodes = [];
|
68
|
+
atRuleNew.push(ruleNew);
|
69
|
+
redRules.push(atRuleNew);
|
70
|
+
}
|
71
|
+
});
|
72
|
+
}
|
73
|
+
});
|
74
|
+
root.walkRules((rule, index) => {
|
75
|
+
if (rule.type === "rule" && rule.parent.name == undefined) {
|
76
|
+
if (index != 0) {
|
77
|
+
//ignore case
|
78
|
+
let ignore = false;
|
79
|
+
|
80
|
+
if (root.nodes[index - 1].type == "comment") {
|
81
|
+
ignore = root.nodes[index - 1].text.includes("reduced-motion:ignore");
|
82
|
+
} //animation none push to reduced motion
|
83
|
+
|
84
|
+
|
85
|
+
if (!ignore) {
|
86
|
+
//console.log(atrule)
|
87
|
+
rule.walkDecls(decl => {
|
88
|
+
if (decl != undefined && decl.prop.includes("animation")) {
|
89
|
+
let declClone = decl.clone();
|
90
|
+
let newRule = rule.clone();
|
91
|
+
declClone.value = "none";
|
92
|
+
newRule.walkDecls(declVal => declVal.remove());
|
93
|
+
newRule.append(declClone);
|
94
|
+
redRules.push(newRule);
|
95
|
+
}
|
96
|
+
});
|
97
|
+
}
|
98
|
+
} else {
|
99
|
+
//animation none push to reduced motion
|
100
|
+
//console.log(atrule)
|
101
|
+
rule.walkDecls(decl => {
|
102
|
+
if (decl != undefined && decl.prop.includes("animation")) {
|
103
|
+
let declClone = decl.clone();
|
104
|
+
let newRule = rule.clone();
|
105
|
+
declClone.value = "none";
|
106
|
+
newRule.walkDecls(declVal => declVal.remove());
|
107
|
+
newRule.append(declClone);
|
108
|
+
redRules.push(newRule);
|
109
|
+
}
|
110
|
+
});
|
111
|
+
}
|
112
|
+
}
|
113
|
+
});
|
114
|
+
|
115
|
+
if (redRules.length > 0) {
|
116
|
+
let redMtnQuery = (0, _postcss.atRule)({
|
117
|
+
name: "media",
|
118
|
+
params: "(prefers-reduced-motion)"
|
119
|
+
});
|
120
|
+
root.append(redMtnQuery).last;
|
121
|
+
redRules.map(rule => {
|
122
|
+
redMtnQuery.append(rule);
|
123
|
+
});
|
124
|
+
}
|
125
|
+
};
|
126
|
+
});
|
package/lib/schemas/index.js
CHANGED
@@ -72,10 +72,7 @@ var _default = {
|
|
72
72
|
createSDkFile: false,
|
73
73
|
nameScope: 'ZOHODESK',
|
74
74
|
version: 'default',
|
75
|
-
outputFile:
|
76
|
-
value: 'efc-sdk-[version].js',
|
77
|
-
cli: 'efc_output_file'
|
78
|
-
},
|
75
|
+
outputFile: 'zohodesk-efc-sdk-[version].js',
|
79
76
|
templateFilePath: '',
|
80
77
|
localeAttr: 'data-efc-locale',
|
81
78
|
localeDefaultValue: 'en_US',
|
@@ -218,6 +215,8 @@ var _default = {
|
|
218
215
|
value: 'zd',
|
219
216
|
cli: 'class_prefix'
|
220
217
|
},
|
218
|
+
combinerMq: false,
|
219
|
+
hoverActive: false,
|
221
220
|
selectorReplace: null,
|
222
221
|
devConsoleExculde: {
|
223
222
|
value: false,
|
@@ -271,6 +270,9 @@ var _default = {
|
|
271
270
|
cli: 'css_unique'
|
272
271
|
},
|
273
272
|
enableChunkHash: false,
|
273
|
+
combinerMq: false,
|
274
|
+
hoverActive: false,
|
275
|
+
keyframesRedMtn: false,
|
274
276
|
folder: 'src',
|
275
277
|
disableES5Transpile: false,
|
276
278
|
hasRTL: false,
|
@@ -9,22 +9,16 @@ var _path = _interopRequireDefault(require("path"));
|
|
9
9
|
|
10
10
|
var _os = require("os");
|
11
11
|
|
12
|
-
var _fs = require("fs");
|
13
|
-
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
13
|
|
16
14
|
let appPath = process.cwd();
|
17
15
|
const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
|
18
16
|
let isWindows = (0, _os.platform)().toLowerCase() === 'win32';
|
19
17
|
|
20
|
-
const _getCliPath = !isNodeModuleUnderAppFolder ? libName =>
|
21
|
-
const cliPath = _path.default.join(__dirname, '..', '..', 'node_modules', '.bin', libName);
|
22
|
-
|
23
|
-
return (0, _fs.existsSync)(cliPath) ? cliPath : libName;
|
24
|
-
} : libName => libName;
|
18
|
+
const _getCliPath = !isNodeModuleUnderAppFolder ? libName => _path.default.join(__dirname, '..', '..', 'node_modules', '.bin', libName) : libName => libName;
|
25
19
|
|
26
20
|
const suffixExt = isWindows ? '.cmd' : '';
|
27
21
|
|
28
22
|
function getCliPath(libName) {
|
29
|
-
return _getCliPath(libName + suffixExt
|
23
|
+
return _getCliPath(libName) + suffixExt;
|
30
24
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@zohodesk/react-cli",
|
3
|
-
"version": "0.0.1-exp.168.
|
3
|
+
"version": "0.0.1-exp.168.2",
|
4
4
|
"description": "A CLI tool for build modern web application and libraries",
|
5
5
|
"scripts": {
|
6
6
|
"init": "node ./lib/utils/init.js",
|
@@ -91,8 +91,11 @@
|
|
91
91
|
"nodemon": "2.0.4",
|
92
92
|
"optimize-js": "1.0.3",
|
93
93
|
"postcss": "7.0.32",
|
94
|
+
"postcss-combine-media-query": "^1.0.1",
|
94
95
|
"postcss-hash-classname": "0.4.0",
|
96
|
+
"postcss-import": "^14.1.0",
|
95
97
|
"postcss-loader": "3.0.0",
|
98
|
+
"postcss-mobile-hover": "^1.0.2",
|
96
99
|
"postcss-selector-replace": "1.0.2",
|
97
100
|
"prop-types": "15.7.2",
|
98
101
|
"react": "16.13.1",
|