@douyinfe/semi-scss-compile 2.1.0-next.0 → 2.1.0
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 +6 -18
- package/lib/bin.js +4 -6
- package/lib/bin.js.map +1 -1
- package/lib/index.d.ts +1 -5
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/utils/compiler.js.map +1 -1
- package/lib/utils/generateSCSSMap.d.ts +1 -1
- package/lib/utils/generateSCSSMap.js +5 -14
- package/lib/utils/generateSCSSMap.js.map +1 -1
- package/lib/utils/writeFile.js.map +1 -1
- package/package.json +5 -6
- package/src/bin.ts +8 -10
- package/src/index.ts +4 -8
- package/src/utils/compiler.ts +4 -3
- package/src/utils/generateSCSSMap.ts +13 -25
- package/src/utils/writeFile.ts +13 -13
package/README.md
CHANGED
|
@@ -15,11 +15,11 @@ There are mainly the following two usage scenarios:
|
|
|
15
15
|
```shell
|
|
16
16
|
npm i -g @douyinfe/semi-scss-compile
|
|
17
17
|
|
|
18
|
-
semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --
|
|
18
|
+
semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --output="path/to/output.css" --min=true
|
|
19
19
|
|
|
20
20
|
# or for short
|
|
21
21
|
|
|
22
|
-
semi-build-scss -f "path/to/foundation" -t "path/to/theme" -
|
|
22
|
+
semi-build-scss -f "path/to/foundation" -t "path/to/theme" -o "path/to/output.css" -m true
|
|
23
23
|
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -36,21 +36,9 @@ function resolve(dir) {
|
|
|
36
36
|
|
|
37
37
|
//eg
|
|
38
38
|
|
|
39
|
-
compile({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
iconPath: resolve('node_modules/@douyinfe/semi-icons'),
|
|
43
|
-
outputPath:resolve('semi-ui/dist/css/semi.min.css'),
|
|
44
|
-
isMin:true
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
compile({
|
|
48
|
-
foundationPath:resolve('semi-foundation/'),
|
|
49
|
-
themePath:resolve('semi-theme-default/'),
|
|
50
|
-
iconPath: resolve('node_modules/@douyinfe/semi-icons'),
|
|
51
|
-
outputPath:resolve('semi-ui/dist/css/semi.css'),
|
|
52
|
-
isMin:false
|
|
53
|
-
})
|
|
39
|
+
compile(resolve('semi-foundation/'), resolve('semi-theme-default/'), resolve('semi-ui/dist/css/semi.min.css'), {isMin: true})
|
|
40
|
+
compile(resolve('semi-foundation/'), resolve('semi-theme-default/'), resolve('semi-ui/dist/css/semi.css'), {isMin: false})
|
|
41
|
+
|
|
54
42
|
```
|
|
55
43
|
|
|
56
44
|
### Advanced API
|
|
@@ -60,7 +48,7 @@ const {generateScssMap, writeFile, compilerFromScssMap} = require('@douyinfe/sem
|
|
|
60
48
|
const fs = require('fs-extra');
|
|
61
49
|
|
|
62
50
|
const isMin = false;
|
|
63
|
-
const scssMap = generateScssMap("path/to/foundation", "path/to/theme"
|
|
51
|
+
const scssMap = generateScssMap("path/to/foundation", "path/to/theme");
|
|
64
52
|
const tempDir = writeFile(scssMap)
|
|
65
53
|
const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
|
|
66
54
|
fs.outputFileSync(outputPath, result.css);
|
package/lib/bin.js
CHANGED
|
@@ -11,19 +11,17 @@ const main = () => {
|
|
|
11
11
|
"--foundation": String,
|
|
12
12
|
"--theme": String,
|
|
13
13
|
"--output": String,
|
|
14
|
-
"--icon": String,
|
|
15
14
|
"--min": Boolean,
|
|
16
15
|
"-f": "--foundation",
|
|
17
16
|
"-t": "--theme",
|
|
18
|
-
"-i": "--icon",
|
|
19
17
|
"-o": "--output",
|
|
20
18
|
"-m": "--min"
|
|
21
19
|
}, { permissive: true });
|
|
22
|
-
const { "--foundation": foundationPath, '--theme': themePath, '--output': outputPath, '--
|
|
20
|
+
const { "--foundation": foundationPath, '--theme': themePath, '--output': outputPath, '--min': isMin } = userArgs;
|
|
23
21
|
console.log(`foundationPath: ${foundationPath},\nthemePath: ${themePath},\noutputPath: ${outputPath}\n`);
|
|
24
|
-
if (foundationPath && themePath &&
|
|
25
|
-
(0, index_1.compile)({
|
|
26
|
-
|
|
22
|
+
if (foundationPath && themePath && outputPath) {
|
|
23
|
+
(0, index_1.compile)(foundationPath, themePath, outputPath, {
|
|
24
|
+
isMin
|
|
27
25
|
});
|
|
28
26
|
}
|
|
29
27
|
else {
|
package/lib/bin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bin.js","sourceRoot":"","sources":["../src/bin.ts"],"names":[],"mappings":";;;;;;AAEA,8CAAsB;AACtB,
|
|
1
|
+
{"version":3,"file":"bin.js","sourceRoot":"","sources":["../src/bin.ts"],"names":[],"mappings":";;;;;;AAEA,8CAAsB;AACtB,mCAAkC;AAElC,MAAM,IAAI,GAAG,GAAG,EAAE;IACd,MAAM,QAAQ,GAAG,IAAA,aAAG,EAAC;QACjB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,OAAO;QAEhB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KAChB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACzB,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;IAClH,OAAO,CAAC,GAAG,CAAC,mBAAmB,cAAc,iBAAiB,SAAS,kBAAkB,UAAU,IAAI,CAAC,CAAC;IACzG,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,EAAE;QAC3C,IAAA,eAAO,EAAC,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE;YAC3C,KAAK;SACR,CAAC,CAAC;KACN;SAAM;QACH,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;AACL,CAAC,CAAC;AAEF,IAAI,EAAE,CAAC"}
|
package/lib/index.d.ts
CHANGED
|
@@ -2,11 +2,7 @@ import generateScssMap from "./utils/generateSCSSMap";
|
|
|
2
2
|
import writeFile from "./utils/writeFile";
|
|
3
3
|
import compilerFromScssMap from "./utils/compiler";
|
|
4
4
|
export interface Options {
|
|
5
|
-
foundationPath: string;
|
|
6
|
-
themePath: string;
|
|
7
|
-
iconPath: string;
|
|
8
|
-
outputPath: string;
|
|
9
5
|
isMin?: boolean;
|
|
10
6
|
}
|
|
11
|
-
declare const compile: (
|
|
7
|
+
declare const compile: (foundationPath: string, themePath: string, outputPath: string, { isMin }?: Options) => void;
|
|
12
8
|
export { compile, generateScssMap, compilerFromScssMap, writeFile };
|
package/lib/index.js
CHANGED
|
@@ -12,8 +12,8 @@ const compiler_1 = __importDefault(require("./utils/compiler"));
|
|
|
12
12
|
exports.compilerFromScssMap = compiler_1.default;
|
|
13
13
|
const path_1 = __importDefault(require("path"));
|
|
14
14
|
const fs_extra_1 = __importDefault(require("fs-extra"));
|
|
15
|
-
const compile = (
|
|
16
|
-
const scssMap = (0, generateSCSSMap_1.default)(foundationPath, themePath
|
|
15
|
+
const compile = (foundationPath, themePath, outputPath, { isMin = false } = {}) => {
|
|
16
|
+
const scssMap = (0, generateSCSSMap_1.default)(foundationPath, themePath);
|
|
17
17
|
const tempDir = (0, writeFile_1.default)(scssMap);
|
|
18
18
|
const result = (0, compiler_1.default)(path_1.default.join(tempDir, 'index.scss'), isMin);
|
|
19
19
|
fs_extra_1.default.outputFileSync(outputPath, result.css);
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,8EAAsD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,8EAAsD;AAqBlD,0BArBG,yBAAe,CAqBH;AApBnB,kEAA0C;AAsBtC,oBAtBG,mBAAS,CAsBH;AArBb,gEAAmD;AAoB/C,8BApBG,kBAAmB,CAoBH;AAnBvB,gDAAwB;AACxB,wDAA0B;AAO1B,MAAM,OAAO,GAAG,CAAC,cAAsB,EAAE,SAAiB,EAAE,UAAkB,EAAE,EAAE,KAAK,GAAG,KAAK,KAAc,EAAE,EAAE,EAAE;IAC/G,MAAM,OAAO,GAAG,IAAA,yBAAe,EAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAA,mBAAS,EAAC,OAAO,CAAC,CAAC;IACnC,MAAM,MAAM,GAAG,IAAA,kBAAmB,EAAC,cAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5E,kBAAE,CAAC,cAAc,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;AAC9C,CAAC,CAAC;AAIE,0BAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../../src/utils/compiler.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AAGxB,MAAM,OAAO,GAAG,CAAC,aAAqB,EAAE,QAAiB,KAAK,EAAE,EAAE;IAC9D,MAAM,MAAM,GAAG,cAAI,CAAC,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../../src/utils/compiler.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AAGxB,MAAM,OAAO,GAAG,CAAC,aAAqB,EAAE,QAAiB,KAAK,EAAE,EAAE;IAC9D,MAAM,MAAM,GAAG,cAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;IACxG,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}
|
|
@@ -7,7 +7,7 @@ const path_1 = __importDefault(require("path"));
|
|
|
7
7
|
const fs_extra_1 = __importDefault(require("fs-extra"));
|
|
8
8
|
const lodash_1 = require("lodash");
|
|
9
9
|
const lodash = { set: lodash_1.set };
|
|
10
|
-
const generateComponentsScssMap = (foundationPath
|
|
10
|
+
const generateComponentsScssMap = (foundationPath) => {
|
|
11
11
|
const foundationComponentList = fs_extra_1.default.readdirSync(foundationPath);
|
|
12
12
|
const componentScssMap = {};
|
|
13
13
|
foundationComponentList.forEach(fileName => {
|
|
@@ -17,20 +17,11 @@ const generateComponentsScssMap = (foundationPath, iconPath) => {
|
|
|
17
17
|
const componentPath = fileAbsolutePath;
|
|
18
18
|
const scssFileList = fs_extra_1.default.readdirSync(componentPath).filter((fileName) => fileName.endsWith('.scss'));
|
|
19
19
|
scssFileList.forEach(scssFileName => {
|
|
20
|
-
|
|
21
|
-
scssRaw = `\n\n//----${fileName}/${scssFileName} start-----\n` + scssRaw + `\n\n//----${fileName}/${scssFileName} end-----\n`;
|
|
20
|
+
const scssRaw = fs_extra_1.default.readFileSync(path_1.default.join(componentPath, scssFileName), { encoding: 'utf-8' });
|
|
22
21
|
lodash.set(componentScssMap, [fileName, scssFileName], scssRaw);
|
|
23
22
|
});
|
|
24
23
|
}
|
|
25
24
|
});
|
|
26
|
-
//for react icon
|
|
27
|
-
const stylePath = path_1.default.join(iconPath, 'src', 'styles');
|
|
28
|
-
const scssFileList = fs_extra_1.default.readdirSync(stylePath).filter((fileName) => fileName.endsWith('.scss'));
|
|
29
|
-
scssFileList.forEach(scssFileName => {
|
|
30
|
-
let scssRaw = fs_extra_1.default.readFileSync(path_1.default.join(stylePath, scssFileName), { encoding: 'utf-8' });
|
|
31
|
-
scssRaw = `\n\n//----${stylePath}/${scssFileName} start-----\n` + scssRaw + `\n\n//----${stylePath}/${scssFileName} end-----\n`;
|
|
32
|
-
lodash.set(componentScssMap, ['icons', scssFileName], scssRaw);
|
|
33
|
-
});
|
|
34
25
|
return componentScssMap;
|
|
35
26
|
};
|
|
36
27
|
const generateThemeScssMap = (themePath) => {
|
|
@@ -46,10 +37,10 @@ const generateThemeScssMap = (themePath) => {
|
|
|
46
37
|
// console.log(themeScssMap)
|
|
47
38
|
return themeScssMap;
|
|
48
39
|
};
|
|
49
|
-
const generateScssMap = (foundationPath, themePath
|
|
40
|
+
const generateScssMap = (foundationPath, themePath) => {
|
|
50
41
|
return {
|
|
51
|
-
components: generateComponentsScssMap(foundationPath
|
|
52
|
-
theme: generateThemeScssMap(themePath)
|
|
42
|
+
components: generateComponentsScssMap(foundationPath),
|
|
43
|
+
theme: generateThemeScssMap(themePath)
|
|
53
44
|
};
|
|
54
45
|
};
|
|
55
46
|
exports.default = generateScssMap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateSCSSMap.js","sourceRoot":"","sources":["../../src/utils/generateSCSSMap.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AACxB,wDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"generateSCSSMap.js","sourceRoot":"","sources":["../../src/utils/generateSCSSMap.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AACxB,wDAA0B;AAC1B,mCAA6B;AAE7B,MAAM,MAAM,GAAG,EAAE,GAAG,EAAH,YAAG,EAAE,CAAC;AAEvB,MAAM,yBAAyB,GAAG,CAAC,cAAsB,EAAE,EAAE;IACzD,MAAM,uBAAuB,GAAG,kBAAE,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAoE,EAAE,CAAC;IAC7F,uBAAuB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvC,MAAM,gBAAgB,GAAG,cAAI,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;QAC7D,IAAI,kBAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,kBAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,WAAW,EAAE,EAAE;YAChF,qBAAqB;YACrB,MAAM,aAAa,GAAG,gBAAgB,CAAC;YACvC,MAAM,YAAY,GAAG,kBAAE,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;YACpG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;gBAChC,MAAM,OAAO,GAAG,kBAAE,CAAC,YAAY,CAAC,cAAI,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC/F,MAAM,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YACpE,CAAC,CAAC,CAAC;SACN;IACL,CAAC,CAAC,CAAC;IACH,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC;AAGF,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC/C,MAAM,QAAQ,GAAG,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,CAAU,CAAC;IACrI,MAAM,YAAY,GAAkD,EAAE,CAAC;IACvE,KAAK,MAAM,QAAQ,IAAI,QAAQ,EAAE;QAC7B,MAAM,gBAAgB,GAAG,cAAI,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;QAChE,IAAI,kBAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;YACjC,iBAAiB;YACjB,YAAY,CAAC,QAAQ,CAAC,GAAG,kBAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;SACpF;KACJ;IACD,4BAA4B;IAC5B,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,cAAsB,EAAE,SAAiB,EAAE,EAAE;IAClE,OAAO;QACH,UAAU,EAAE,yBAAyB,CAAC,cAAc,CAAC;QACrD,KAAK,EAAE,oBAAoB,CAAC,SAAS,CAAC;KACzC,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"writeFile.js","sourceRoot":"","sources":["../../src/utils/writeFile.ts"],"names":[],"mappings":";;;;;AAAA,wDAA0B;AAC1B,gDAAwB;AACxB,4CAAoB;AAEpB,
|
|
1
|
+
{"version":3,"file":"writeFile.js","sourceRoot":"","sources":["../../src/utils/writeFile.ts"],"names":[],"mappings":";;;;;AAAA,wDAA0B;AAC1B,gDAAwB;AACxB,4CAAoB;AAEpB,mCAAyC;AAEzC,MAAM,MAAM,GAAG,EAAE,SAAS,EAAT,kBAAS,EAAE,IAAI,EAAJ,aAAI,EAAE,CAAC;AAEnC,MAAM,kBAAkB,GAAG,CAAC,OAAiD,EAAE,OAAe,EAAE,EAAE;IAC9F,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QAC9C,MAAM,gBAAgB,GAAG,cAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;QACzE,kBAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;QAClC,KAAK,MAAM,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE;YAC5D,kBAAE,CAAC,aAAa,CAAC,cAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;SAC5H;KACJ;IACD,OAAO;AACX,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAsD,EAAE,OAAe,EAAE,EAAE;IAC/F,MAAM,YAAY,GAAG,cAAI,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjD,kBAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAE9B,KAAK,MAAM,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QAC7C,kBAAE,CAAC,aAAa,CAAC,cAAI,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC,YAAoC,CAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;KAC1I;IACD,OAAO;AACX,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,aAAiD,EAAE,EAAE;IAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAEhD,4BAA4B;IAC5B,IAAI,oBAAoB,GAAG,EAAE,CAAC;IAC9B,oBAAoB,IAAI,iCAAiC,CAAC;IAC1D,oBAAoB,IAAI,kCAAkC,CAAC;IAE3D,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE;QAC5D,IAAI,YAAY,GAAG,GAAG,aAAa,OAAO,CAAC;QAC3C,gFAAgF;QAChF,IAAI,aAAa,KAAK,SAAS,EAAE;YAC7B,YAAY,GAAG,aAAa,CAAC;SAChC;aAAM,IAAI,aAAa,KAAK,WAAW,EAAE;YACtC,YAAY,GAAG,aAAa,CAAC;SAChC;QACD,oBAAoB,IAAI,yBAAyB,aAAa,IAAI,YAAY,MAAM,CAAC;KACxF;IACD,uCAAuC;IACvC,oBAAoB,IAAI,kDAAkD,CAAC;IAC3E,oBAAoB,IAAI,+CAA+C,CAAC;IACxE,gCAAgC;IAGhC,kFAAkF;IAClF,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAClD,IAAI,aAAa,EAAE;QACf,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE;YAC5D,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,EAAE;gBACxD,OAAO,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,IAAI,4CAA4C,aAAa,EAAE,CAAC;aACzH;SACJ;KACJ;IACD,wBAAwB;IAExB,qBACO;QACC,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC;QACjC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;KACrD,IACD,KAAK,EAAE,oBAAoB,IAC7B;AACN,CAAC,CAAC;AAGF,MAAM,SAAS,GAAG,CAAC,OAA2C,EAAE,UAAkB,cAAI,CAAC,IAAI,CAAC,YAAE,CAAC,MAAM,EAAE,EAAE,qBAAqB,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;IAC3I,kBAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEzB,MAAM,4BAA4B,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChE,kBAAkB,CAAC,4BAA4B,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;IACxE,cAAc,CAAC,4BAA4B,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IAC/D,qBAAqB;IACrB,kBAAE,CAAC,aAAa,CAAC,cAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;IAChH,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-scss-compile",
|
|
3
|
-
"version": "2.1.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "compile semi scss to css",
|
|
5
5
|
"author": "daiqiang@bytedance.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"scss"
|
|
19
19
|
],
|
|
20
20
|
"scripts": {
|
|
21
|
-
"build:lib": "
|
|
22
|
-
"prepublishOnly": "npm run build:lib"
|
|
21
|
+
"build:lib": "tsc",
|
|
22
|
+
"prepublishOnly": "rm -rf lib && npm run build:lib"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"arg": "^5.0.1",
|
|
@@ -28,10 +28,9 @@
|
|
|
28
28
|
"sass": "^1.43.4"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@types/lodash": "^4.14.
|
|
31
|
+
"@types/lodash": "^4.14.176",
|
|
32
32
|
"@types/sass": "^1.43.0",
|
|
33
|
-
"rimraf": "^3.0.2",
|
|
34
33
|
"typescript": "^4.4.4"
|
|
35
34
|
},
|
|
36
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "337c5b02a791cf46483e0273c8dc842a9eab222f"
|
|
37
36
|
}
|
package/src/bin.ts
CHANGED
|
@@ -1,31 +1,29 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
3
|
import arg from "arg";
|
|
4
|
-
import {compile} from "./index";
|
|
4
|
+
import { compile } from "./index";
|
|
5
5
|
|
|
6
6
|
const main = () => {
|
|
7
7
|
const userArgs = arg({
|
|
8
8
|
"--foundation": String,
|
|
9
9
|
"--theme": String,
|
|
10
10
|
"--output": String,
|
|
11
|
-
"--icon":String,
|
|
12
11
|
"--min": Boolean,
|
|
13
12
|
|
|
14
13
|
"-f": "--foundation",
|
|
15
14
|
"-t": "--theme",
|
|
16
|
-
"-i":"--icon",
|
|
17
15
|
"-o": "--output",
|
|
18
16
|
"-m": "--min"
|
|
19
|
-
}, {permissive: true});
|
|
20
|
-
const {"--foundation": foundationPath, '--theme': themePath, '--output': outputPath,'--
|
|
17
|
+
}, { permissive: true });
|
|
18
|
+
const { "--foundation": foundationPath, '--theme': themePath, '--output': outputPath, '--min': isMin } = userArgs;
|
|
21
19
|
console.log(`foundationPath: ${foundationPath},\nthemePath: ${themePath},\noutputPath: ${outputPath}\n`);
|
|
22
|
-
if (foundationPath && themePath &&
|
|
23
|
-
compile({
|
|
24
|
-
|
|
20
|
+
if (foundationPath && themePath && outputPath) {
|
|
21
|
+
compile(foundationPath, themePath, outputPath, {
|
|
22
|
+
isMin
|
|
25
23
|
});
|
|
26
24
|
} else {
|
|
27
|
-
console.error('Error: lack of args.')
|
|
25
|
+
console.error('Error: lack of args.');
|
|
28
26
|
}
|
|
29
|
-
}
|
|
27
|
+
};
|
|
30
28
|
|
|
31
29
|
main();
|
package/src/index.ts
CHANGED
|
@@ -6,19 +6,15 @@ import fs from 'fs-extra';
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
export interface Options {
|
|
9
|
-
foundationPath: string,
|
|
10
|
-
themePath: string,
|
|
11
|
-
iconPath: string,
|
|
12
|
-
outputPath: string
|
|
13
9
|
isMin?: boolean,
|
|
14
10
|
}
|
|
15
11
|
|
|
16
|
-
const compile = (
|
|
17
|
-
const scssMap = generateScssMap(foundationPath, themePath
|
|
18
|
-
const tempDir = writeFile(scssMap)
|
|
12
|
+
const compile = (foundationPath: string, themePath: string, outputPath: string, { isMin = false }: Options = {}) => {
|
|
13
|
+
const scssMap = generateScssMap(foundationPath, themePath);
|
|
14
|
+
const tempDir = writeFile(scssMap);
|
|
19
15
|
const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
|
|
20
16
|
fs.outputFileSync(outputPath, result.css);
|
|
21
|
-
}
|
|
17
|
+
};
|
|
22
18
|
|
|
23
19
|
|
|
24
20
|
export {
|
package/src/utils/compiler.ts
CHANGED
|
@@ -2,8 +2,9 @@ import sass from 'sass';
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
const compile = (entryScssPath: string, isMin: boolean = false) => {
|
|
5
|
-
const result = sass.renderSync({file: entryScssPath, outputStyle: isMin ? 'compressed' : 'expanded'});
|
|
6
|
-
return result
|
|
7
|
-
}
|
|
5
|
+
const result = sass.renderSync({ file: entryScssPath, outputStyle: isMin ? 'compressed' : 'expanded' });
|
|
6
|
+
return result;
|
|
7
|
+
};
|
|
8
8
|
|
|
9
9
|
export default compile;
|
|
10
|
+
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
import fs from "fs-extra";
|
|
3
|
-
import {set} from 'lodash';
|
|
3
|
+
import { set } from 'lodash';
|
|
4
4
|
|
|
5
|
-
const lodash = {set};
|
|
5
|
+
const lodash = { set };
|
|
6
6
|
|
|
7
|
-
const generateComponentsScssMap = (foundationPath: string
|
|
7
|
+
const generateComponentsScssMap = (foundationPath: string) => {
|
|
8
8
|
const foundationComponentList = fs.readdirSync(foundationPath);
|
|
9
9
|
const componentScssMap: { [componentName: string]: { [scssFileName: string]: string } } = {};
|
|
10
10
|
foundationComponentList.forEach(fileName => {
|
|
@@ -14,46 +14,34 @@ const generateComponentsScssMap = (foundationPath: string, iconPath: string) =>
|
|
|
14
14
|
const componentPath = fileAbsolutePath;
|
|
15
15
|
const scssFileList = fs.readdirSync(componentPath).filter((fileName) => fileName.endsWith('.scss'));
|
|
16
16
|
scssFileList.forEach(scssFileName => {
|
|
17
|
-
|
|
18
|
-
scssRaw = `\n\n//----${fileName}/${scssFileName} start-----\n` + scssRaw + `\n\n//----${fileName}/${scssFileName} end-----\n`
|
|
17
|
+
const scssRaw = fs.readFileSync(path.join(componentPath, scssFileName), { encoding: 'utf-8' });
|
|
19
18
|
lodash.set(componentScssMap, [fileName, scssFileName], scssRaw);
|
|
20
|
-
})
|
|
19
|
+
});
|
|
21
20
|
}
|
|
22
21
|
});
|
|
23
|
-
|
|
24
|
-
//for react icon
|
|
25
|
-
const stylePath = path.join(iconPath, 'src', 'styles');
|
|
26
|
-
const scssFileList = fs.readdirSync(stylePath).filter((fileName) => fileName.endsWith('.scss'));
|
|
27
|
-
scssFileList.forEach(scssFileName => {
|
|
28
|
-
let scssRaw = fs.readFileSync(path.join(stylePath, scssFileName), {encoding: 'utf-8'});
|
|
29
|
-
scssRaw = `\n\n//----${stylePath}/${scssFileName} start-----\n` + scssRaw + `\n\n//----${stylePath}/${scssFileName} end-----\n`
|
|
30
|
-
lodash.set(componentScssMap, ['icons', scssFileName], scssRaw);
|
|
31
|
-
})
|
|
32
|
-
|
|
33
22
|
return componentScssMap;
|
|
34
|
-
}
|
|
23
|
+
};
|
|
35
24
|
|
|
36
25
|
|
|
37
26
|
const generateThemeScssMap = (themePath: string) => {
|
|
38
27
|
const fileList = ['_font.scss', '_palette.scss', 'global.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
|
|
39
|
-
const themeScssMap: { [key in typeof fileList[number]]?: string } = {}
|
|
28
|
+
const themeScssMap: { [key in typeof fileList[number]]?: string } = {};
|
|
40
29
|
for (const fileName of fileList) {
|
|
41
30
|
const scssAbsolutePath = path.join(themePath, 'scss', fileName);
|
|
42
31
|
if (fs.existsSync(scssAbsolutePath)) {
|
|
43
32
|
//in theme folder
|
|
44
|
-
themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, {encoding: "utf8"});
|
|
33
|
+
themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, { encoding: "utf8" });
|
|
45
34
|
}
|
|
46
35
|
}
|
|
47
36
|
// console.log(themeScssMap)
|
|
48
37
|
return themeScssMap;
|
|
49
38
|
};
|
|
50
39
|
|
|
51
|
-
|
|
52
|
-
const generateScssMap = (foundationPath: string, themePath: string, iconPath: string) => {
|
|
40
|
+
const generateScssMap = (foundationPath: string, themePath: string) => {
|
|
53
41
|
return {
|
|
54
|
-
components: generateComponentsScssMap(foundationPath
|
|
55
|
-
theme: generateThemeScssMap(themePath)
|
|
56
|
-
}
|
|
57
|
-
}
|
|
42
|
+
components: generateComponentsScssMap(foundationPath),
|
|
43
|
+
theme: generateThemeScssMap(themePath)
|
|
44
|
+
};
|
|
45
|
+
};
|
|
58
46
|
|
|
59
47
|
export default generateScssMap;
|
package/src/utils/writeFile.ts
CHANGED
|
@@ -2,16 +2,16 @@ import fs from 'fs-extra';
|
|
|
2
2
|
import path from 'path';
|
|
3
3
|
import os from 'os';
|
|
4
4
|
import generateScssMap from "./generateSCSSMap";
|
|
5
|
-
import {cloneDeep, omit} from "lodash";
|
|
5
|
+
import { cloneDeep, omit } from "lodash";
|
|
6
6
|
|
|
7
|
-
const lodash = {cloneDeep, omit};
|
|
7
|
+
const lodash = { cloneDeep, omit };
|
|
8
8
|
|
|
9
9
|
const writeComponentScss = (scssMap: { [p: string]: { [p: string]: string } }, tempDir: string) => {
|
|
10
10
|
for (const componentName of Object.keys(scssMap)) {
|
|
11
11
|
const componentDirPath = path.join(tempDir, 'components', componentName);
|
|
12
12
|
fs.emptyDirSync(componentDirPath);
|
|
13
13
|
for (const scssFileName of Object.keys(scssMap[componentName])) {
|
|
14
|
-
fs.writeFileSync(path.join(componentDirPath, scssFileName), scssMap[componentName][scssFileName], {encoding: 'utf-8'});
|
|
14
|
+
fs.writeFileSync(path.join(componentDirPath, scssFileName), scssMap[componentName][scssFileName], { encoding: 'utf-8' });
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
return;
|
|
@@ -22,32 +22,32 @@ const writeThemeScss = (scssMap: (ReturnType<typeof generateScssMap>)['theme'],
|
|
|
22
22
|
fs.emptyDirSync(themeDirPath);
|
|
23
23
|
|
|
24
24
|
for (const scssFileName of Object.keys(scssMap)) {
|
|
25
|
-
fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, {encoding: "utf8"});
|
|
25
|
+
fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, { encoding: "utf8" });
|
|
26
26
|
}
|
|
27
27
|
return;
|
|
28
|
-
}
|
|
28
|
+
};
|
|
29
29
|
|
|
30
30
|
const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) => {
|
|
31
31
|
const scssMap = lodash.cloneDeep(scssMapOrigin);
|
|
32
32
|
|
|
33
33
|
//----- generate entry -----
|
|
34
34
|
let compilerEntryContent = '';
|
|
35
|
-
compilerEntryContent += `@import "./theme/index.scss";\n
|
|
35
|
+
compilerEntryContent += `@import "./theme/index.scss";\n`;
|
|
36
36
|
compilerEntryContent += `@import "./theme/global.scss";\n`;
|
|
37
37
|
|
|
38
38
|
for (const componentName of Object.keys(scssMap['components'])) {
|
|
39
39
|
let scssFileName = `${componentName}.scss`;
|
|
40
40
|
//edge case portal keyframes, cause their folderName and scssFilename not match.
|
|
41
41
|
if (componentName === '_portal') {
|
|
42
|
-
scssFileName = 'portal.scss'
|
|
42
|
+
scssFileName = 'portal.scss';
|
|
43
43
|
} else if (componentName === 'keyframes') {
|
|
44
|
-
scssFileName = 'rotate.scss'
|
|
44
|
+
scssFileName = 'rotate.scss';
|
|
45
45
|
}
|
|
46
46
|
compilerEntryContent += `@import "./components/${componentName}/${scssFileName}";\n`;
|
|
47
47
|
}
|
|
48
48
|
//edge case for iconButton and textarea
|
|
49
|
-
compilerEntryContent += `@import "./components/button/iconButton.scss";\n
|
|
50
|
-
compilerEntryContent += `@import "./components/input/textarea.scss";\n
|
|
49
|
+
compilerEntryContent += `@import "./components/button/iconButton.scss";\n`;
|
|
50
|
+
compilerEntryContent += `@import "./components/input/textarea.scss";\n`;
|
|
51
51
|
//----- generate entry end -----
|
|
52
52
|
|
|
53
53
|
|
|
@@ -69,7 +69,7 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
|
|
|
69
69
|
},
|
|
70
70
|
index: compilerEntryContent
|
|
71
71
|
};
|
|
72
|
-
}
|
|
72
|
+
};
|
|
73
73
|
|
|
74
74
|
|
|
75
75
|
const writeFile = (scssMap: ReturnType<typeof generateScssMap>, tempDir: string = path.join(os.tmpdir(), `semi_scss_compile_${Date.now()}`)) => {
|
|
@@ -79,8 +79,8 @@ const writeFile = (scssMap: ReturnType<typeof generateScssMap>, tempDir: string
|
|
|
79
79
|
writeComponentScss(finalScssMapWaitForCompiling["components"], tempDir);
|
|
80
80
|
writeThemeScss(finalScssMapWaitForCompiling['theme'], tempDir);
|
|
81
81
|
//write compile entry
|
|
82
|
-
fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], {encoding: "utf8"});
|
|
82
|
+
fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], { encoding: "utf8" });
|
|
83
83
|
return tempDir;
|
|
84
|
-
}
|
|
84
|
+
};
|
|
85
85
|
|
|
86
86
|
export default writeFile;
|