← Back to blog

Plumeria 0.13.0

2025/07/05

Imporved create function in Main API

The create function creates an atom based on a set of properties and values and reuses the same atom. More details are available on GitHub and in the npm readme, but it creates a hash class for each property.

Simple example:

import { css } from '@plumeria/core';
 
const styles = css.create({
  text: {
    fontSize: 12, // xxxhash1
    color: 'navy', // xxxhash2
  },
});
 
const className = styles.$text;
// className is "xxxhash1 xxxhash2"
 
const classNames = css.props(styles.text); // if you want to apply more styles
// classNames is "xxxhash1 xxxhash2

The API will be the same as before, but the new hash of atoms may make the classes harder to find in development tools.

In development mode, the class name is set as the id of the <style> in the <head>, and you can see a list of classes that are being used and reused.

When using pseudo selectors, be aware that they are not pooled into atoms (the hash chunks are grouped together per selector).

A Sample Project:

Effect of reuse rate

Below is an example of a comparison of style sizes between atomic and semantic:

StyleSizeVersion
Semantic (traditional)2,433 bytesv0.12.0
Atomic2,004 bytesv0.13.6

In this case, a reuse effect of about 17.632% was observed. As the number of styles in the entire project increases, atomicization will lead to further class reuse, and even greater size reduction effects can be expected.

However, this only measures the bundle of the create function, and global is still the traditional semantic style, so it should be kept to a minimum.

※: In order to improve the stability of the collision rate of the atomic class, the number of characters has been changed from 7 to 8 in v0.13.2 and later. The actual measured values in this table are the values after the change to 8 characters.

New Hash Improvements

The distribution rate of hash generation has been greatly improved.

The property-value set object is converted to a string using MurmurHash3's 32-bit string format and used for the hash.

The hash looks much cleaner because toString(36) is used. The uniqueness of atoms is guaranteed, eliminating most concerns about collisions.