index.js

#!/usr/bin/env node
const fs = require("fs");
const path = require("path");
const glob = require("glob");
const postcss = require("postcss");
const less = require("less");
const bundle = require("less-bundle-promise");
const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");
const AntDesignThemePlugin = require("./webpack-plugins");

function updateConfig(config, env, options = {}) {
  let vars = {};
  if (options.varFile) {
    if (fs.existsSync(options.varFile)) {
      vars = getLessVars(options.varFile);
    } else {
      throw Error("variables file absolute path does not exists. ");
    }
  } else {
    const stylesDir =
      options.stylesDir || path.join(__dirname, "../../src/styles");
    const varFile = path.join(stylesDir, "./variables.less");
    if (fs.existsSync(varFile)) {
      vars = getLessVars(varFile);
    } else {
      console.log(`No variables.less file found at path: ${varFile}`);
    }
  }
  /*
    One can provide variables through options against `vars` key or it can be used to override
    variables' values provides in variables file
  */
  vars = Object.assign(vars, options.vars);
  config = rewireLess.withLoaderOptions({
    modifyVars: vars,
    javascriptEnabled: true
  })(config, env);
  if (!(options.importPlugin === false)) {
    config = injectBabelPlugin(
      ["import", { libraryName: "antd", style: true }],
      config
    );
  }
  if (
    Array.isArray(options.themeVariables) &&
    options.themeVariables.length > 0
  ) {
    config.plugins.push(new AntDesignThemePlugin(options));
  }

  return config;
}

/*
  This funtion reads a less file and create an object with keys as variable names 
  and values as variables respective values. e.g.
  //variabables.less
    @primary-color : #1890ff;
    @heading-color : #fa8c16;
    @text-color : #cccccc;
  
    to

    {
      '@primary-color' : '#1890ff',
      '@heading-color' : '#fa8c16',
      '@text-color' : '#cccccc'
    }

*/
function getLessVars(filtPath) {
  const sheet = fs.readFileSync(filtPath).toString();
  const lessVars = {};
  const matches = sheet.match(/@(.*:[^;]*)/g) || [];

  matches.forEach(variable => {
    const definition = variable.split(/:\s*/);
    const varName = definition[0].replace(/['"]+/g, "").trim();
    lessVars[varName] = definition.splice(1).join(":");
  });
  return lessVars;
}

/*
  This function takes color string as input and return true if string is a valid color otherwise returns false.
  e.g.
  isValidColor('#ffffff'); //true
  isValidColor('#fff'); //true 
  isValidColor('rgba(0, 0, 0, 0.5)'); //true
  isValidColor('20px'); //false
*/
function isValidColor(color) {
  if (!color || color.match(/px/g)) return false;
  if (color.match(/colorPalette|fade/g)) return true;
  if (color.charAt(0) === "#") {
    color = color.substring(1);
    return (
      [3, 4, 6, 8].indexOf(color.length) > -1 && !isNaN(parseInt(color, 16))
    );
  }
  return /^(rgb|hsl)a?\((\d+%?(deg|rad|grad|turn)?[,\s]+){2,3}[\s\/]*[\d\.]+%?\)$/i.test(
    color
  );
}

function dynamicAntdTheme(options) {
  return function(config) {
    return updateConfig(config, process.env.NODE_ENV, options);
  };
}

module.exports = dynamicAntdTheme;