[RFC] v5 less consume variables

[zombieJ]

📋 RFC

Summary

Provide a guide for static covert and compatible package to handle convert.

Basic example

[None]

Motivation

v5 using CSS-in-JS which means static css framework like less can not consume the less variable by antd anymore. We should find a way to help user using variables in static framework.

Detailed

New to use

antd provide static function and seed token to generate related token with out React life cycle:

import { theme } from 'antd';

const  { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);

User can consume as less variable with less-loader:

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: mapToken,
    },
  },
}

Compatible usage

User use compatible package to convert v5 variables to compatible variables:

import { convertLegacyToken } from '@ant-design/compatible';

const v4Token = convertLegacyToken(mapToken);

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: v4Token,
    },
  },
}

Then user need to remove useless less import code:

-- @import (reference) '~antd/dist/antd.less';

For umi user, can use umi-plugin-antd which will generate a mock file antd/dist/antd.less as placeholder.

Drawbacks

Not fully support with v4 usage.

Adoption strategy

Guid in doc but recommend CSS-in-JS solution first.

[afc163]

1. 提供一个导出所有 token 并打平的方案。
2. 通过 less-loader 的 modifyVars 配置让业务应用的 less 文件都能访问到里面的变量。

import { defaultTheme } from '.......';

          {
            loader: "less-loader",
            options: {
              lessOptions: {
                modifyVars: defaultTheme,
              },
            },
          },

[afc163]

1. defaultConfig 是个啥，之前貌似没见过这个概念。
2. 既然已经能直接算出来了，为啥不直接导出一个 defaultTokens？
3. v4Token 和 defaultToken 的差异是啥？key 一样，value 不一样是么？
4. 我感觉 import { v4Theme } from '@ant-design/compatible'; 或 import { v4Tokens } from '@ant-design/compatible'; 直接一步到位更好。

[zombieJ]

1. 可以改成更简单的 seedToken，defaultConfig 是现在有的 export 所以复用了。
2. 不行，如果是用户改了主题色，提供 defaultTokens 用户是不能用的。
3. key 不用，例如 colorPrimary 在 v4 中是 primary-color。less 不是驼峰命名。
4. 见 2，提供默认值对于改过 less 变量的用户无法使用。

[hengyanqwe]

我在按照教程引入时报错了，你们为什么可以在webpack.config中使用import呢？我在package.json中添加type:module依然不行

[Curry3O]

我上午也遇到这个问题，找了半天还没找到如何解决。请问现在有解决方案吗？

[qiqizjl]

+1 也遇到了同样的问题