Fixed ant-design/ant-design#24777 and #45

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,21 @@
+---
+name: Bug report
+about: Title (Must be in English)
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+Describe your bug in English language
+
+**Show your code**
+Show your `config-overrides.js` file and styles folder structure
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+
+**Version**
+Which version is installed in your application? Try using the latest version, that may help

CHANGELOG.md

@@ -1,13 +1,16 @@
 # Changelog
 This document contains changes in this package with each version change.
-
-## [1.2.3] - 2020-05-19 (latest)
+## [1.2.4] - 2020-06-06 (latest)
+- Fixed following issues
+    - https://github.com/ant-design/ant-design/issues/24777
+    - https://github.com/mzohaibqc/antd-theme-generator/issues/45
+## [1.2.3] - 2020-05-19
 - Rewamped base script to remove restriction to use unique theme color values for different variables, now you can use same color for multiple variables or even 
  variables as value for other variables
 - now generated color.less size has been reduced by 30% or more (300kB -> 200kB) due to removal of redundant rules and ant design variables
 
 
-## [1.2.1] - 2020-04-25 (latest)
+## [1.2.1] - 2020-04-25
 - Added code to remove statements with value containing url like `background: url('some url')`  in color.less file
 - Here is detail about the issue: https://github.com/mzohaibqc/antd-theme-generator/issues/38
 

README.md

@@ -9,9 +9,8 @@ const { generateTheme } = require('antd-theme-generator');
 
 const options = {
   antDir: path.join(__dirname, './node_modules/antd'),
-  stylesDir: path.join(__dirname, './src/styles'),
+  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
   varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
-  mainLessFile: path.join(__dirname, './src/styles/index.less'), // (not required if you are using verison 1.2.3 or higher)
   themeVariables: ['@primary-color'],
   outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
   customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
@@ -25,19 +24,22 @@ generateTheme(options).then(less => {
 })
 ```
 
+| Property | Type | Default | Descript |
+| --- | --- | --- | --- |
+| antdDir | string | - | This is path to antd directory in your node_modules |
+| varFile | string | - | Path to your theme related variables file |
+| themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change |
+| outputFilePath | string | - | Generated less content will be written to file path specified otherwise it will not be written. However, you can use returned output and write in any file as you want |
+| customColorRegexArray | array | ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name => new RegExp(`${name}\(.*\)`))] | This array is to provide regex which will match your color value, most of the time you don't need this |
 
-## Below restriction is for verion 1.3.4 or less. Now after v1.3.5, there is no need to use unique hex color codes for your theme variables, you can use same code or even assign a color variable to another theme color.
-## Note: (for v1.2.3 or lower version) include all color variables in `varFile` that you want to change dynamically and assign them unique color codes. Don't assign same color to two or more variables and don't use `#fff`, `#ffffff`, `#000` or `#000000`. If you still want white or black color as default, slightly change it e.g. `#fffffe` or `#000001` which will not replace common background colors from other components. 
-
-## If you variables have some custom color code like `fade(@primary-color, 20%)` or something that does not matches with common regex to match a valid color then add your custom regex array as `customColorRegexArray` variable in options object while executing `generateTheme(options)`.
 
 Add following lines in your main html file
 
 ```
 <link rel="stylesheet/less" type="text/css" href="/color.less" />
 <script>
   window.less = {
-    async: false,
+    async: true,
     env: 'production'
   };
 </script>

examples/customize-cra/color.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const fs = require('fs');
-// const { generateTheme, getLessVars } = require('../../index');
-const { generateTheme, getLessVars } = require('antd-theme-generator');
+const { generateTheme, getLessVars } = require('../../index');
+// const { generateTheme, getLessVars } = require('antd-theme-generator');
 
 const themeVariables = getLessVars(path.join(__dirname, './src/styles/vars.less'))
 const defaultVars = getLessVars('./node_modules/antd/lib/style/themes/default.less')
@@ -16,15 +16,12 @@ const options = {
   stylesDir: path.join(__dirname, './src'),
   antDir: path.join(__dirname, './node_modules/antd'),
   varFile: path.join(__dirname, './src/styles/vars.less'),
-  mainLessFile: path.join(__dirname, './src/styles/main.less'),
   themeVariables: Array.from(new Set([
     ...Object.keys(darkVars),
     ...Object.keys(lightVars),
     ...Object.keys(themeVariables),
   ])),
-  indexFileName: 'index.html',
   outputFilePath: path.join(__dirname, './public/color.less'),
-  customColorRegexArray: [/^fade\(.*\)$/]
 }
 
 generateTheme(options).then(less => {