mzohaibqc / antd-theme-generator

This script is to generate color.less file to update color related css in browser.
https://mzohaibqc.github.io/antd-theme-generator/
358 stars 87 forks source link

[LessError: error evaluating function `ceil`: argument must be a number] when generateTheme in antd@4.18.2 #121

Open liuxinqiong opened 2 years ago

liuxinqiong commented 2 years ago

Describe the bug When i use this library to generate antd theme, it's failed. And the error is throwed by less, just as the title say.

The important thing that i must need to clarify is, it's not the less version problem. my less version is v3.9.0.

After some debugger, I found the reason is that less content is invalid, I write the antdLess variable to file by using the below code.

antdLess = `${antdLess}\n${varsCombined}`;
// fs.writeFileSync(path.join(nodeModulesPath, '../test.less'), antdLess)
const { css: antCss } = await render(antdLess, [antdPath, antdStylesDir]);
const allCss = `${antCss}\n${userCustomCss}`;
results = await postcss([reducePlugin]).process(allCss, {
  from: antdStylesFile,
});
css = results.css;

At the end of the file, some size variable be writen to color value. just like this, it's why less compile error.

@steps-dot-size: #e10fa1;
@steps-current-dot-size: #d32868;
@steps-description-max-width: #85d7d4;
@steps-nav-content-max-width: #590433;
@result-subtitle-font-size: #27fd6d;
@image-bg: #d64eac;
@image-color: #f48295;
@image-mask-font-size: #83309c;
@image-preview-operation-size: #732cd5;
@image-preview-operation-color: #c31a6d;
@image-preview-operation-disabled-color: #275807;

Show your code

const path = require('path');
const fs = require('fs');
const { generateTheme, getLessVars } = require('antd-theme-generator');

// note: the reason i passed "../../" token, becasue i'm in a monorepo project.
const antDir = path.join(__dirname, '../../node_modules/antd');

const defaultVars = getLessVars(`${antDir}/lib/style/themes/default.less`);
const darkVars = {
  ...getLessVars(`${antDir}/lib/style/themes/dark.less`),
  '@primary-color': defaultVars['@primary-color'],
  '@picker-basic-cell-active-with-range-color': 'darken(@primary-color, 20%)',
};
const lightVars = {
  ...getLessVars(`${antDir}/lib/style/themes/compact.less`),
  '@primary-color': defaultVars['@primary-color'],
};
fs.writeFileSync('./src/dark.json', JSON.stringify(darkVars));
fs.writeFileSync('./src/light.json', JSON.stringify(lightVars));

const options = {
  antDir,
  stylesDir: './src/config', // note: these is no less file in that directory, beceuse i just need it process antd component, except my custom component. the reason that i passed it, because generateTheme api need it.
  themeVariables: Array.from(
    new Set([...Object.keys(darkVars), ...Object.keys(lightVars), ...Object.keys(defaultVars)]),
  ),
  outputFilePath: path.join(__dirname, './public/color.less'),
};

generateTheme(options)
  .then((less) => {
    console.log('Theme generated successfully');
  })
  .catch((error) => {
    console.log('Error', error);
  });

I've spent two days on it. I need some help desperately. Looking forward to a reply, thanks.

Screenshots image

Version v1.2.11

dbolan commented 2 years ago

Hello! I ran into the same issue, removing strictMath: true from the less-loader options in the webpack config fixed it. This was with the base antd package, but hopefully it's still applicable to your case.