Demand analysis

Defects of existing schemes

  • CSS variable

Unable to support complex expression mix(var(–primary-color), # FFF, 20%)

  • Multiple CSS themes

Fixed theme style, unable to switch theme color in real time CSS code separation is not easy to handle

  • Less Dynamic switching

When the less Runtime is large enough to switch topics, the entire stylesheet is parsed -> eval -> genCSS, resulting in slow switching

What you want to achieve

  • Supports real-time modification of @primary-color, @border-radius-base and other parameters
  • The browser page is refreshed by default and the style is changed, without unnecessary animation or obvious loading process
  • Small size of packaging, no need to package multiple style files
  • Code separation is friendly, and styles for different pages can be loaded separately

Implementation scheme

Plan a

  • How it works: Dynamically change colors through class overwriting, because CSS loads from top to bottom, and the same name overwrites the corresponding properties.

  • Open source implementation: dynamic-antd-theme github.com/luffyZh/dyn…

  • Comment: a lot of repetitive CSS operations are done to override class names, only @primarycolor related overrides are done, other overrides are still required :global or within component overrides. There are ready-made plug and play peels for direct use.

Scheme 2

  • Principle: Less variables and expressions that need to be modified by different skins are left blank at compile time and filled at run time.

  • Open source implementation: antD-theme github.com/wuzekang/an…

  • Comment: Out of the box. There are limitations:

1. Postcss-position is incompatible. Postcss – position will directly to the position of CSS attribute value for value. The match (/ ^ static | absolute | fixed | relative… /). The toString () and ‘” [theme: the position, default: relative] “‘. The match (…). Postcss-position === null

2. Recursive Mixin Call loop variables cannot be skin variables, such as @grid-columns in ant-Design raster system code

.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{ant-prefix}-col@{class}-order-@{index} {
    order: @index;
  }
  .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@grid-columns, @class);
Copy the code

Plan 3

  • Principle: after the style file is parsed through webpack plug-in form, the code for changing the theme is injected into each JS header.

  • Open source implementation: webpack-theme-color-replacer github.com/hzsrc/webpa…

  • Comment: The need to introduce additional style replacement JS in the code, without less compilation in the page, improves the switching speed.

Plan 4

  • How it works: You parse your CSS before you go online, and when you go online you only need to parse the style files that you have already processed. The inspiration comes from plan three.

  • Webpack-stylesheet-variant-replacer-plugin github.com/eaTong/webp…

  • Comments: support key–value to define variables that need to be replaced, and the injection file is controllable, not repeated injection, easy to use.