purpose

  • In order to improve the efficiency of developers and improve the customizability of component libraries, component libraries need to provide skinning functions and style customization functions in multiple types of components, allowing users to switch applications to different themed skins and allowing developers to style specific components.
  • To reduce the size of the code, component libraries need to provide on-demand functionality. Components are only packaged into the project when they are imported manually, whether it is HTML, JS, or CSS.

Styles to choose

sass/less css in js
Full support for style overrides ✅ ❗(className support required)
Rem layout support ✅ ❗(most library support)
readability strong strong
It costs low high
Whether SSR is supported Natural support Need additional support
Whether streaming rendering is supported Natural support Need additional support
Support postcss ✅ ❗(own plugin ecosystem)

Styles are introduced as needed

To use a component library, you need to load all the styles of the component library, but most of the time you don’t need to use all the components of the component library, let alone load all the styles of the components. So component libraries need to provide on-demand import.

For example, if we now need to use the Button component, we would write the following code:

import {Button} from "@bufang/dogc"
Copy the code

Since we didn’t import all the style files at this time, the Button style won’t take effect, so we need to manually import the Button style:

import "@bufang/dogc/lib/button/style"
Copy the code

Here are two problems to solve.

In order to introduce the style of the component separately, we need to package the style of the component separately when packaging. How to achieve the separate packaging?
  • The installationnpm install rollup-plugin-stylesAnd,preserveModulesAdaptation, that is, output CSS files split by component dimension.
  • Configure a rollup. Config. Js
output = { dir: "cjs", format: "cjs", preserveModules: true, preserveModulesRoot: "components", exports: "named", assetFileNames: ({ name }) => { const { ext, dir, base } = path.parse(name); if (ext ! == ".css") return "[name].[ext]"; Return path.join(dir, "style", base); }}; Plugins :[styles({mode: "extract", // make CSS to be extracted from less: {javascriptEnabled: true}, extensions: [".less"], minimize: false, use: ["less"], url: { inline: true, }, sourceMap: Rollup-plugin-styles bug onExtract(data) {const {name} = data; const {base} = path.parse(name); const {base} = path.parse(name);  if (base !== "index.css") return false; return true; }, }), ]Copy the code
Is it tedious to import styles manually every time you import a component? How to import styles automatically?
  • npm install babel-plugin-import --save-dev
  • Configure the Babel
module.exports = { plugins: [ [ "import", { libraryName: "@bufang/dogc", libraryDirectory: "es", // default: lib camel2DashComponentName: true, style: Return '${name}/style/index.less';},},],]}; return '${name}/style/index.less';},},],]};Copy the code

The topic configuration

  • Solution 1: CSS3 Variables

Define a global color variable that changes the value of all references to the variable on the page.

@import "./color/index.less"; body, body[theme-mode="dark"] .dogc-always-light { --dogc-color-white: rgba( var(--dogc-white), 1 ); Inverse -- dogC-color-black: rgba(var(-- dogC-black), 1); Inverse -- dgC-color-primary: rGBA (var(-- DGC-blue-5), 1); // The main color. Use only when strong emphasis is required. }Copy the code

. If you want to modify the theme color: when the document body. The style.css. SetProperty (‘ – dogc – color – primary ‘, ‘blue’); B: Yes, it’s very convenient.

  • Solution 2: Less modifyVars

The modifyVars method is implemented based on compilation of less in the browser. Therefore, when importing less files, you need to import them in link mode, and then modify the variables based on the method in less.js. It is more troublesome to operate, so you can study it yourself if you are interested.

Therefore, THE CSS Variables solution was chosen.