Styling Re Solusion

Need to use scoped CSS. This is because style name management methods such as BEM are outdated.

CSS Modules are not Zero-Runtime

This is a CSS module implemented using JavaScript. It leaves a hash map of class names and keys during compilation.

On the client side, these incur runtime reference costs and object bundle costs.

const styles = {
  ctas: 'page-module___8aEwW__ctas',
  footer: 'page-module___8aEwW__footer',
  logo: 'page-module___8aEwW__logo',
  main: 'page-module___8aEwW__main',
  page: 'page-module___8aEwW__page',
  primary: 'page-module___8aEwW__primary',
  secondary: 'page-module___8aEwW__secondary',
};

Reference(CSS Modules)

Solutions

styled-components and emotion.

Normally, it would likely be rejected by your supervisor or team leader.

Need to use “Zero Runtime CSS in JS” and preferably the atomic version.

Source order (cascading) perspective, control through merging is strictly only possible with Atomic CSS.

“Zero Runtime Atomic CSS in JS” is required.

If you use a solution like tailwind-merge, it will no longer be zero runtime. The same applies to clsx and classnames. Of course, that's because it's a runtime merge.

The only way to maintain "Atomic CSS with Zero Runtime" is to avoid performing merge operations at runtime.

Plumeria compiler completes merges during the build process. The hash map is not retained, presumably because it is not needed.

Plumeria is the only solution I've found, and it's stable.