Namer

The job of namer is to tell windi how to name the generated css.

Built-in Namers #

At present(windijs@1.1.4), windi includes the following three built-in namers. The source code can found here.

Alpha Namer #

Alpha Namer will name the generated css one by one in the order of .a, .b, .c, ..., .a0, .a1, .... The advantage of this method is that it is simple and clean, works well in SPA. But, because this method depends on the order of generated css, if your site uses SSR architecture, there may be a problem of losing style due to repeated naming in separate pages.

The default namer of Windi JS is the Alpha Namer. You don't need to specify it yourself. The following is an example, which you can do when you encounter some special situations.

import { alphaNamer, useNamer } from "windijs";

useNamer(alphaNamer);

Hash Namer #

Hash Namer names css by calculating the hash value of the metadata of each css StyleObject. For Example, .w-1r1q5pt .w-qawtuy .w-1d7u671 .... The advantage is that it always generates same name when meta is same. So it's works perfect for SSR architecture, the disadvantage is that it may not as concise as alpha namer.

import { hashNamer, useNamer } from "windijs";

useNamer(hashNamer);

Atomic Namer #

Atomic namer will keep the original props for naming css. For example, when you call rounded.lg, the generated css will be named as .rounded\.lg, and hover(rounded.lg, font.bold) will be named as hover\:rounded\.lg hover\:font\.bold. This namer is more suitable for development, because it can see which utility generates what css, but it is not recommended for production.

import { atomicNamer, useNamer } from "windijs";

useNamer(atomicNamer);

Custom Namer #

You can create your own namer, such as using different hash algorithms.

import { useNamer, getStyleIdent } from "windijs";

function myNamer(style) {
  return "_" + myHash(getStyleIdent(style));
}

useNamer(myNamer);

getStyleIdent will generate a unique identifier for StyleObject. You can also use attributes like style.meta, style.css to generate hash.

import { useNamer, hash } from "windijs";

function myNamer(style) {
  return "_" + hash(JSON.stringify(style.css));
}

useNamer(myNamer);

Note: If your class name contains characters that need to be escaped, such as @, :, ., you can use the built-in escapeCSS method to escape them.

import { useNamer, escapeCSS, getStyleIdent } from "windijs";

export function myNamer(style) {
  return escapeCSS(getStyleIndent(style));
}

useNamer(myNamer);