CSS Solusion

Problem

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.

These are now rejected by product managers from a runtime performance perspective.

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.

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