Skip to content

Commit 32db240

Browse files
bluesdbluesd
authored
feat: Use less js instead of cli. (#11)
Add ARGV Parser (new dep: minimist). Update README.
1 parent 1747590 commit 32db240

File tree

4 files changed

+2315
-116
lines changed

4 files changed

+2315
-116
lines changed

‎README.md‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,97 @@
22

33
A simple way to create an antd theme css file with zero configuration.
44

5-
[Ant Design](https://ant.design/) provides plenty of UI components, styled with [less](http://lesscss.org/). You can customize the default theme modifying less variable, to achive this you have multiple ways ([check the doc here](https://ant.design/docs/react/customize-theme)). The problem is that you don't have a simple way to create a static `css` file with zero configuration.
5+
[Ant Design](https://ant.design/) provides plenty of UI components, styled with [less](http://lesscss.org/).
6+
You can customize the default theme modifying less variables, [check the doc](https://ant.design/docs/react/customize-theme) for multiple ways to achieve this.\
7+
The main issue being that you don't have a simple way to create a static `css` file with zero configuration.
68

7-
This project was created with `Antd Design v4.6.6` and aims to simplify the customization of your theme if you don't want to install dependencies, configurate things like `less` or eject your [React](reactjs.org) project.
9+
This package was created with `Antd Design v4.6.6` and aims to ease the theme's customization process without having to install more dependencies yourself, set up `less` or eject your [React](reactjs.org) project.
810

911
## Usage
1012

1113
### Generate custom theme styles
1214

13-
1. Create your own custom theme with the variables that you want to override, in a file called `./custom-theme.less`.
15+
1. Create your own custom theme overriding Antd's less variables (by default: `./custom-theme.less`).
1416

15-
2. To generate the `css` file with your custom theme, run this command:
17+
2. Generate theme's custom `.css` file.
1618

17-
- **Option A:** Without installing this plugin
19+
- **Option A:** Without installing this plugin:
20+
```sh
21+
$ npx @emeks/antd-custom-theme-generator
1822

19-
```sh
20-
$ npx @emeks/antd-custom-theme-generator
23+
output > ./custom-theme.css
24+
```
2125

22-
output > ./custom-theme.css
23-
```
26+
- **Option B:** Installing the package as a dev dependency:
2427

25-
- **Option B:** Installing the package as a dev dependency
28+
```sh
29+
$ npm i -E --save-dev @emeks/antd-custom-theme-generator
30+
```
2631

27-
```sh
28-
$ npm i -E --save-dev @emeks/antd-custom-theme-generator
29-
```
32+
Then generating your theme:
33+
```sh
34+
$ generate-theme
3035
31-
Then generates your custom theme:
36+
output > ./custom-theme.css
37+
```
3238

33-
```sh
34-
$ generate-theme
35-
36-
output > ./custom-theme.css
37-
```
38-
39-
3. Replace the import of `antd/dist/antd.css` in your project, with the output file (`custom-theme.css`) generated by this plugin.
39+
3. Replace `antd/dist/antd.css` import in your project, with the output file (by default: `./custom-theme.css`) generated by this plugin.
4040

4141
### Options
4242

43-
| Name | Default | Description |
44-
| ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
45-
| verbose | | Print more info for debugging |
46-
| customThemeFilePath | ./custom-theme.less | Path of the less file with the variables your want to override |
47-
| generatedThemeFilePath | ./custom-theme.css | Output path where the script give you the css file with your new theme |
48-
| antdLibraryPath | ./node_modules/antd | Path of the antd library |
49-
| theme | default | Antd theme you want to override (e.g. `dark` or `compact`) - [check all available options](https://github.com/ant-design/ant-design/tree/master/components/style/themes) |
43+
| Name | Default | Description |
44+
| --- | --- | --- |
45+
| `--verbose` or `-v` | | Print more info for debugging |
46+
| `--antd` | ./node_modules/antd | Path of the antd library |
47+
| `--theme` | default | Antd theme you want to override (e.g. `dark` or `compact`) - [Check available options](https://github.com/ant-design/ant-design/tree/master/components/style/themes). |
48+
| `<customThemeFilePath>` | ./custom-theme.less | Path of the less file with the variables your want to override |
49+
| `<generatedThemeFilePath>` | ./custom-theme.css | Output path where the script give you the css file with your new theme |
5050

5151
> **Notes**:
5252
>
53-
> - The order of the options is important.
53+
> The order of the paths **is** important.
5454
> ```sh
55-
> $ generate-theme [verbose] [customThemeFilePath] [generatedThemeFilePath] [antdLibraryPath] [theme]
55+
> $ generate-theme [--verbose] [--antd] [--theme] [<customThemeFilePath>] [<generatedThemeFilePath>]
5656
> ```
57-
> - Notice that all these paths must be defined relative to your project root path.
57+
>
5858

5959
### Examples
6060

6161
- Generate dark theme
6262

6363
```sh
64-
$ npx @emeks/antd-custom-theme-generator ./custom-theme.less ./custom-theme.css ./node_modules/antd dark
64+
$ npx @emeks/antd-custom-theme-generator --theme dark
6565
```
6666

67-
- Generate default theme with diferents paths
67+
- Generate default theme with non default paths
6868
```sh
6969
$ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css
7070
```
7171

7272
### FAQ
7373

74-
**Q1: Which variables can I override?**
74+
> **Q1: Which variables can I override?**
7575

76-
> The variables that are exposed by antd in this file: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
76+
You may override any variable exposed by Antd in [this file](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less).
7777

78-
**Q2: Should I run this command every time i change my `custom-theme.less` file?**
78+
> **Q2: Should I run this command every time I change my `custom-theme.less` file?**
7979

80-
> Yes, we don't provide hot-reload yet.
80+
Yes, we don't provide hot-reload yet.
8181
8282
## Development
8383
84-
### Use the package locally:
84+
- Inside package folder, link it globally:
8585
8686
```sh
8787
$ npm link
8888
```
8989
90-
Then in another project with antd already installed and with a `custom-theme.less` file created, execute:
90+
- Use the package in your project (with antd already installed and a `custom-theme.less` file created as well):
9191
9292
```sh
9393
$ generate-theme
9494
```
9595
9696
## TODO List:
9797
98-
- [ ] Add hot-reload generation
98+
- [ ] Add hot-reload generation.

‎index.js‎

Lines changed: 51 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,60 @@
11
#!/usr/bin/env node
2-
const { exec } = require("child_process");
3-
const path = require("path");
4-
const verbose = process.argv[2] === "verbose";
2+
const fs = require("fs");
3+
const less = require("less");
4+
const argv = require("minimist")(
5+
process.argv.slice(2),
6+
{alias: {"verbose": ["v"]}}
7+
);
58

6-
const scriptParams = {
7-
"process.argv": process.argv,
8-
"process.cwd()": process.cwd(),
9-
__dirname: __dirname,
9+
const DEFAULTS = {
10+
verbose: false,
11+
in: "./custom-theme.less",
12+
out: "./custom-theme.css",
13+
antd: "./node_modules/antd",
14+
theme: "default"
1015
};
11-
if (verbose) {
12-
console.debug("Script params");
13-
console.debug(scriptParams);
14-
}
1516

16-
const initialPosition = verbose ? 3 : 2;
17-
const scriptVariables = {
18-
customThemeFilePath: path.join(
19-
process.cwd(),
20-
process.argv[initialPosition] || "./custom-theme.less"
21-
),
22-
generatedThemeFilePath: path.join(
23-
process.cwd(),
24-
process.argv[initialPosition + 1] || "./custom-theme.css"
25-
),
26-
antdLibraryPath: path.join(
27-
process.cwd(),
28-
process.argv[initialPosition + 2] || "./node_modules/antd"
29-
),
30-
theme: process.argv[initialPosition + 3] || "default",
31-
};
17+
const verbose = argv["verbose"] || DEFAULTS.verbose;
18+
const inFilePath = argv._[0] || DEFAULTS.in;
19+
const outFilePath = argv._[1] || DEFAULTS.out;
20+
const antdLibPath = argv["antd"] || DEFAULTS.antd;
21+
const theme = argv["theme"] || DEFAULTS.theme;
22+
23+
verbose && console.debug(`
24+
\x1b[34m[Params]\x1b[0m
25+
Args:
26+
verbose: ${argv["verbose"] || ''}
27+
antd: ${argv['antd'] || ''}
28+
theme: ${argv['theme'] || ''}
29+
in: ${argv._[0] || ''}
30+
out: ${argv._[1] || ''}
31+
CWD: ${process.cwd()}
32+
__dirname: ${__dirname}
33+
34+
\x1b[34m[Vars]\x1b[0m
35+
customTheme: ${inFilePath}
36+
generatedTheme: ${outFilePath}
37+
antdLib: ${antdLibPath}
38+
theme: ${theme}
3239
33-
if (verbose) {
34-
console.debug("Script variables");
35-
console.debug(scriptVariables);
36-
}
40+
Generating theme...
41+
`);
3742

38-
const content = `
39-
@import url("${scriptVariables.antdLibraryPath}/lib/style/themes/${scriptVariables.theme}.less");
40-
@import url("${scriptVariables.antdLibraryPath}/dist/antd.less");
41-
@import url("${scriptVariables.customThemeFilePath}");
42-
`;
43-
if (verbose) {
44-
console.debug(
45-
'About to generate "/tmp/generated-theme.less" tmp file:',
46-
content
47-
);
48-
}
43+
const imports = [
44+
`@import url('${antdLibPath}/lib/style/themes/${theme}.less');`,
45+
`@import url('${antdLibPath}/dist/antd.less');`,
46+
`@import url('${inFilePath}');`
47+
].join('');
4948

50-
exec(
51-
`echo "${content}" > /tmp/generated-theme.less`,
52-
{ cwd: process.cwd() },
53-
(error1, stdout, stderr) => {
54-
if (!error1) {
55-
if (verbose) {
56-
console.debug(
57-
`Dynamic generation: "/tmp/generated-theme.less" tmp file was successfully generated`
58-
);
59-
}
60-
exec(
61-
`node_modules/less/bin/lessc --js /tmp/generated-theme.less ${scriptVariables.generatedThemeFilePath}`,
62-
{ cwd: __dirname },
63-
(error2, stdout, stderr) => {
64-
if (!error2) {
65-
if (verbose) {
66-
console.debug(
67-
`Finally: "${scriptVariables.generatedThemeFilePath}" was successfully generated`
68-
);
69-
} else {
70-
console.debug(
71-
`AntDesign file (${scriptVariables.generatedThemeFilePath}) was successfully generated`
72-
);
73-
}
74-
} else {
75-
console.error(error2);
76-
}
77-
}
78-
);
79-
} else {
80-
console.error(error1);
49+
less.render(imports, {javascriptEnabled: true})
50+
.then(
51+
({css}) => {
52+
try {
53+
fs.writeFileSync(outFilePath, css);
54+
console.log(`AntDesign theme (${outFilePath}) successfully generated.`);
55+
} catch(e) {
56+
console.error(`Could not write into file (${outFilePath}):`, e);
8157
}
82-
}
58+
},
59+
(error) => console.error(error)
8360
);

0 commit comments

Comments
 (0)