feat(*): base62Hash 5 characters to base36Hash 6 and 8 characters

Author: refirst11

src/_internal/index.ts

@@ -1,7 +1,7 @@
 export * from './types';
 export * from './utils/extends';
 export * from './utils/helper';
-export { genBase62Hash } from './utils/hash';
+export { genBase36Hash } from './utils/hash';
 export { injectClientCSS } from './utils/inject-client-css';
 export { injectClientGlobalCSS } from './utils/inject-client-global-css';
 export { injectServerCSS, getServerCSS } from './utils/inject-server-css';

src/_internal/utils/sheet-compiler.ts

@@ -1,14 +1,14 @@
 import { pseudo, camelToKebabCase, isClassesObjectType, applyCssValue } from '..';
 import type { PropertyType, ClassesObjectType, CustomCSSProperties, CustomHTMLType } from '..';
 
-export function sheetCompiler(object: ClassesObjectType | CustomHTMLType, base62Hash?: string, core?: string) {
+export function sheetCompiler(object: ClassesObjectType | CustomHTMLType, base36Hash?: string, core?: string) {
   let styleSheet = '';
   let bigIndent = false;
   const mediaQueries: { media: string; css: string }[] = [];
 
   const classNameType = (property: string) => {
     if (core === '--global') return property;
-    else return '.' + property + '_' + base62Hash;
+    else return '.' + property + '_' + base36Hash;
   };
 
   const rules = (indent: string, rulesValue: unknown, property: unknown) => {

src/_internal/utils/style-compiler.ts

@@ -1,10 +1,10 @@
 import { camelToKebabCase, pseudo, applyCssValue } from '..';
 import type { CustomCSSProperties, PropertyType, PropertyValue } from '..';
 
-export function styleCompiler<T extends CustomCSSProperties>(object: T, base62Hash?: string, root?: string) {
+export function styleCompiler<T extends CustomCSSProperties>(object: T, base36Hash?: string, root?: string) {
   const classNameType = () => {
     if (root === '--root') return ':root';
-    else return '._' + base62Hash;
+    else return '.' + base36Hash;
   };
   let bigIndent = false;
 

src/core/method/create.ts

@@ -1,19 +1,19 @@
 import type { ReturnStyleType, ClassesObjectType, ExactClassesObjectType } from '../../_internal';
-import { isDevelopment, isDevAndTest, isServer, injectServerCSS, injectClientCSS, sheetCompiler, genBase62Hash } from '../../_internal';
-import styles from '../styles/style.module.css';
+import { isDevAndTest, sheetCompiler, isDevelopment, injectServerCSS, genBase36Hash, isServer, injectClientCSS } from '../../_internal';
 import { createGlobalStyleSheetPromise, globalStyleSheetPromise, resolveGlobalStyleSheet } from './create-build-in-helper';
+import styles from '../styles/style.module.css';
 
 export function create<T extends ClassesObjectType>(object: ExactClassesObjectType<T> | ClassesObjectType): ReturnStyleType<T> {
-  const base62Hash = genBase62Hash(object, 5);
-  const { styleSheet } = sheetCompiler(object, base62Hash);
+  const base36Hash = genBase36Hash(object, 6);
+  const { styleSheet } = sheetCompiler(object, base36Hash);
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   resolveGlobalStyleSheet(styleSheet);
 
   return new Proxy(object, {
-    get: function (target, prop: string) {
-      if (typeof prop === 'string' && prop in target) {
-        const className = prop + '_' + base62Hash;
-        if (isDevelopment) isServer ? injectServerCSS(base62Hash, styleSheet, 'create') : injectClientCSS(base62Hash, styleSheet, 'create');
+    get: function (target, key: string) {
+      if (typeof key === 'string' && key in target) {
+        const className = key + '_' + base36Hash;
+        if (isDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet, 'create') : injectClientCSS(base36Hash, styleSheet, 'create');
         return isDevAndTest ? className : styles[className];
       }
     },

src/core/method/global.ts

@@ -1,12 +1,13 @@
 import type { CustomHTMLType } from '../../_internal';
-import { isDevAndTest, isServer, injectServerCSS, injectClientGlobalCSS, sheetCompiler, genBase62Hash } from '../../_internal';
+import { isDevAndTest, isServer, injectServerCSS, injectClientGlobalCSS, sheetCompiler, genBase36Hash } from '../../_internal';
 import { resolveGlobalStyleSheet, globalStyleSheetPromise, createGlobalStyleSheetPromise } from './global-build-in-helper';
+import '../styles/global.css';
 
 export function global(object: CustomHTMLType): void {
-  const base62Hash = genBase62Hash(object, 5);
+  const base36Hash = genBase36Hash(object, 8);
   const { styleSheet } = sheetCompiler(object, undefined, '--global');
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   resolveGlobalStyleSheet([styleSheet, '--global']);
 
-  if (isDevAndTest) isServer ? injectServerCSS(base62Hash, styleSheet, 'global') : injectClientGlobalCSS(styleSheet, 'global');
+  if (isDevAndTest) isServer ? injectServerCSS(base36Hash, styleSheet, 'global') : injectClientGlobalCSS(styleSheet, 'global');
 }

src/core/method/root.ts

@@ -1,12 +1,13 @@
 import type { ExtendedCSSProperties } from '../../_internal';
-import { isDevAndTest, isServer, injectServerCSS, injectClientGlobalCSS, styleCompiler, genBase62Hash } from '../../_internal';
+import { isDevAndTest, isServer, injectServerCSS, injectClientGlobalCSS, styleCompiler, genBase36Hash } from '../../_internal';
 import { resolveGlobalStyleSheet, globalStyleSheetPromise, createGlobalStyleSheetPromise } from './root-build-in-helper';
+import '../styles/global.css';
 
 export function root(object: ExtendedCSSProperties): void {
-  const base62Hash = genBase62Hash(object, 5);
+  const base36Hash = genBase36Hash(object, 8);
   const { styleSheet } = styleCompiler(object, undefined, '--root');
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   resolveGlobalStyleSheet([styleSheet, '--global']); // global.css
 
-  if (isDevAndTest) isServer ? injectServerCSS(base62Hash, styleSheet, 'root') : injectClientGlobalCSS(styleSheet, 'root');
+  if (isDevAndTest) isServer ? injectServerCSS(base36Hash, styleSheet, 'root') : injectClientGlobalCSS(styleSheet, 'root');
 }

src/core/method/set.ts

@@ -1,15 +1,14 @@
 import type { ExtendedCSSProperties } from '../../_internal';
-import { isDevelopment, isDevAndTest, isServer, injectServerCSS, injectClientCSS, styleCompiler, genBase62Hash } from '../../_internal';
-import styles from '../styles/style.module.css';
+import { isDevAndTest, isDevelopment, injectClientCSS, styleCompiler, genBase36Hash, injectServerCSS, isServer } from '../../_internal';
 import { createGlobalStyleSheetPromise, globalStyleSheetPromise, resolveGlobalStyleSheet } from './set-build-in-helper';
+import styles from '../styles/style.module.css';
 
 export function set(object: ExtendedCSSProperties): string {
-  const base62Hash = genBase62Hash(object, 5);
-  const { styleSheet } = styleCompiler(object, base62Hash);
-  const classHash = '_' + base62Hash;
+  const base36Hash = genBase36Hash(object, 8);
+  const { styleSheet } = styleCompiler(object, base36Hash);
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   resolveGlobalStyleSheet(styleSheet);
 
-  if (isDevelopment) isServer ? injectServerCSS(base62Hash, styleSheet, 'set') : injectClientCSS(base62Hash, styleSheet, 'set');
-  return isDevAndTest ? classHash : styles[classHash];
+  if (isDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet, 'set') : injectClientCSS(base36Hash, styleSheet, 'set');
+  return isDevAndTest ? base36Hash : styles[base36Hash];
 }