[RFC] App Level Zero-runtime and Dynamic CSS-in-JS (Short ver.)

[MadCcc]

Motivation

Since emotion will serialize css every time token change, which is not consistent with the idea of css var, we need to switch to zero-runtime cssinjs to improve performance of our official website.

However, dynamic style is one of the advantage of cssinjs, so we try to get both benefits of zero-runtime and dynamic style by CSS variables.

Example

const useStyle = createStyle(({varFn}) => {
  return `
  height: 100px;
  width: 100px;
  border: ${varFn((props) => `1px solid ${props.borderColor}`)};
  background: ${varFn(() => `grey`)};
`
})

const Demo: FC<{borderColor: string}> = (props) => {
  const {cssVars, className} = useStyle(props);

  return (
    <div style={{...cssVars}} className={className}>Test</div>
  )
}

Detailed design

All dynamic parts of style could be replaced with varFn, which will generate a css var in style, making style itself static.
And these css var will be placed on the root element of components, working for elements inside.

Drawbacks

Problems possibly need to be solve:

• Consistent CSS Var naming - for SSR
• Avoid CSS Var naming conflict
• Portal DOM

[zombieJ]

Note that this is a app level style solution?

[ccnuyan]

hi, do we already have a plan to enable supporting of Zero-runtime css?

[MadCcc]

Currently you can use css var from antd with 3rd zero-runtime libs