Extract css variables from less variables

README.md

For example, extract ant-design's color theme (V4) in

• https://github.com/ant-design/ant-design/blob/c73b9a7/components/style/themes/default.less
• https://github.com/ant-design/ant-design/blob/c73b9a7/components/style/themes/dark.less

git clone [email protected]:ant-design/ant-design.git
cd ant-design

# read from stdin
lessc --js -

input

@import './components/style/themes/default.less';
// @import './components/style/themes/dark.less';

// cf. https://stackoverflow.com/questions/11198221/defining-variable-variables-using-less-css
:root {
  each(
    primary-color
    primary-color-hover
    primary-color-active
    primary-color-outline

    error-color
    error-color-hover
    error-color-active
    error-color-outline

    text-color
    text-color-secondary

    border-color-base
    border-color-split

    background-color-light
    background-color-base

    disabled-color
    disabled-bg
  , {
    --antd-@{value}: ~"@{@{value}}";
  });
}

output (default)

:root {
  --antd-primary-color: #1890ff;
  --antd-primary-color-hover: #40a9ff;
  --antd-primary-color-active: #096dd9;
  --antd-primary-color-outline: rgba(24, 144, 255, 0.2);
  --antd-error-color: #ff4d4f;
  --antd-error-color-hover: #ff7875;
  --antd-error-color-active: #d9363e;
  --antd-error-color-outline: rgba(255, 77, 79, 0.2);
  --antd-text-color: rgba(0, 0, 0, 0.85);
  --antd-text-color-secondary: rgba(0, 0, 0, 0.45);
  --antd-border-color-base: #d9d9d9;
  --antd-border-color-split: #f0f0f0;
  --antd-background-color-light: #fafafa;
  --antd-background-color-base: #f5f5f5;
  --antd-disabled-color: rgba(0, 0, 0, 0.25);
  --antd-disabled-bg: #f5f5f5;
}

output (dark)

:root {
  --antd-primary-color: #177ddc;
  --antd-primary-color-hover: #3c9be8;
  --antd-primary-color-active: #095cb5;
  --antd-primary-color-outline: rgba(23, 125, 220, 0.2);
  --antd-error-color: #a61d24;
  --antd-error-color-hover: #b33b3d;
  --antd-error-color-active: #800f19;
  --antd-error-color-outline: rgba(166, 29, 36, 0.2);
  --antd-text-color: rgba(255, 255, 255, 0.85);
  --antd-text-color-secondary: rgba(255, 255, 255, 0.45);
  --antd-border-color-base: #434343;
  --antd-border-color-split: #303030;
  --antd-background-color-light: rgba(255, 255, 255, 0.04);
  --antd-background-color-base: rgba(255, 255, 255, 0.08);
  --antd-disabled-color: rgba(255, 255, 255, 0.3);
  --antd-disabled-bg: rgba(255, 255, 255, 0.08);
}