@zohodesk/react-cli 0.0.1-exp.168.1 → 0.0.1-exp.168.2
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 +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",
|