@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha21

package/src/helpers/phone.ts

@@ -1,4 +1,4 @@
-import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isNotEmpty, isStringEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { IPhoneInfo, IPhoneValue } from '../components';
 import { phoneInfo } from '../constants';
 
@@ -46,22 +46,26 @@ export const getFullPhone = (phone?: IPhoneValue): string =>
   (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
 
 export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
+  if (isStringEmpty(phoneWithCode)) {
+    return;
   }
 
-  return countryCode;
+  // ищем страны, для которых phoneWithCode начинается с fullCode (dialCode + areaCode)
+  const matchedCountries = phoneInfo.filter((info) =>
+    info.fullCodes.some((fullCode) => phoneWithCode.startsWith(fullCode)),
+  );
+
+  // если нашлась всего одна — ок, выдаём её
+  if (matchedCountries.length === 1) {
+    return matchedCountries[0].countryCode;
+  }
+
+  // если нашлось несколько, выбираем страну с наименьшим dialCodePriority (0 — самая приоритетная)
+  const highestPriorityCountries = phoneInfo
+    .filter((info) => phoneWithCode.startsWith(info.dialCode))
+    .sort((a, b) => (a.dialCodePriority ?? 1000) - (b.dialCodePriority ?? 1000));
+
+  return highestPriorityCountries.at(0)?.countryCode;
 };
 
 export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
 export * from './use-merged-refs';
+export * from './use-merge';

package/src/hooks/use-merge.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMerge = <T>(one?: T, two?: T): T | undefined =>
+  useMemo(
+    () => (isNotEmpty(one) && isNotEmpty(two) ? mergeStyles(one, two) : one ?? two),
+    [one, two],
+  );

package/src/hooks/use-mixed-styles.ts

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
-import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import type { IMixedStyles } from '../theme';
+
+export const mixStyles = <T>(...tweakStyles: Array<IMixedStyles<T>>): Array<NonNullable<T>> =>
+  tweakStyles.flat().filter(isObject) as Array<NonNullable<T>>;
 
 export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+  baseStyles?: IMixedStyles<StyleSheet>,
+  tweakStyles?: IMixedStyles<StyleSheet>,
+): Array<NonNullable<StyleSheet>> =>
+  useMemo(() => mixStyles(baseStyles, tweakStyles), [baseStyles, tweakStyles]);

package/src/hooks/use-tweak-styles.ts

@@ -1,11 +1,24 @@
-import { useMemo } from 'react';
-import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
+import { useContext, useMemo } from 'react';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import {
+  areStylesThemed,
+  themedStyles,
+  IComponentName,
+  IMaybeArray,
+  useTheme,
+  JssContext,
+  IMixedStyles,
+} from '../theme';
+import { mixStyles } from './use-mixed-styles';
 
 // TODO: Можно усилить типы
 export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
   innerStyles,
-  tweakStyles: currentComponentTweakStyles,
+  tweakStyles,
   className,
   currentComponentName,
 }: {
@@ -13,12 +26,12 @@ export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet &
    * Это tweakStyles, определенные в родительском компоненте
    * (например, стили для Input, определенные в стилях компонента Select)
    */
-  innerStyles?: StyleSheet[ClassName];
+  innerStyles?: IMixedStyles<StyleSheet[ClassName]>;
   /**
    * Пропса tweakStyles из родительского компонента
    * (это уже непосредственно ISelectProps.tweakStyles)
    */
-  tweakStyles?: StyleSheet;
+  tweakStyles?: IMaybeArray<StyleSheet>;
   /**
    * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
    */
@@ -27,31 +40,40 @@ export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet &
    * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
    */
   currentComponentName?: IComponentName;
-}): StyleSheet[ClassName] =>
-  useMemo(() => {
-    const theme = getTheme();
-    // tweakStyles, переопределенные в теме родительского компонента
+}): Array<NonNullable<StyleSheet[ClassName]>> => {
+  const theme = useTheme();
+  const isMergeDisabled = isNotEmpty(useContext(JssContext).tweakStylesArch);
+
+  return useMemo(() => {
     const themeStyles = isNotEmpty(currentComponentName)
-      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
+      ? (theme.components?.[currentComponentName] as StyleSheet)
       : undefined;
-    const tweakStyles = currentComponentTweakStyles?.[className];
 
-    // Если нечего мержить
-    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
-    if (styles.length <= 1) {
-      return styles[0];
+    const resultStyles = mixStyles(
+      innerStyles,
+      mixStyles(themeStyles, tweakStyles).map((style) => style[className]),
+    );
+
+    if (isMergeDisabled || resultStyles.length < 2) {
+      return resultStyles;
+    }
+
+    const [maybeInnerStyles, maybeThemeStyles, ...rest] = resultStyles;
+
+    if (
+      maybeThemeStyles !== themeStyles?.[className] || // Если нет themeStyles или innerStyles
+      isArrayNotEmpty(rest) // Или есть tweakStyles
+    ) {
+      // Мёржим как есть
+      return [mergeStyles(maybeInnerStyles, maybeThemeStyles, ...rest)];
     }
 
-    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
-    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
-      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
+    // Иначе мёржим themeStyles в innerStyles
+    if (!areStylesThemed(maybeInnerStyles)) {
+      themedStyles(maybeInnerStyles, maybeThemeStyles);
     }
 
-    // Ну тут уже прощай кэш
-    return mergeStyles(innerStyles, themeStyles, tweakStyles);
-  }, [
-    innerStyles,
-    className,
-    currentComponentName,
-    currentComponentTweakStyles,
-  ]) as StyleSheet[ClassName];
+    // И возвращаем только innerStyles
+    return [maybeInnerStyles];
+  }, [innerStyles, className, currentComponentName, tweakStyles, theme, isMergeDisabled]);
+};

package/src/theme/Provider.tsx

@@ -1,6 +1,6 @@
-import { createContext, FC, ReactNode } from 'react';
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react';
 import { common } from './common';
-import { IUiKitTheme } from './types';
+import type { IUiKitTheme } from './types';
 
 export interface IThemedProviderProps {
   theme: IUiKitTheme;
@@ -11,11 +11,16 @@ let globalTheme: IUiKitTheme;
 
 export const getTheme = (): IUiKitTheme => globalTheme;
 
-export const ThemeContext = createContext<{
+interface ThemeContextValue {
   theme: IUiKitTheme;
-}>({ theme: common });
+}
+
+export const ThemeContext = createContext<ThemeContextValue>({ theme: common });
 
 export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
   globalTheme = theme;
-  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+  const value: ThemeContextValue = useMemo(() => ({ theme }), [theme]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
+
+export const useTheme = (): IUiKitTheme => useContext(ThemeContext).theme;

package/src/theme/common.ts

@@ -91,9 +91,12 @@ export const helpers = {
 
     // Chromium
     '@supports selector(::-webkit-scrollbar)': {
+      '--webkit-scrollbar-width': '10px',
+      '--webkit-scrollbar-height': '10px',
+
       '&::-webkit-scrollbar': {
-        height: 10,
-        width: 10,
+        width: 'var(--webkit-scrollbar-width)',
+        height: 'var(--webkit-scrollbar-height)',
 
         '&-thumb': {
           width: 6,

package/src/theme/create-themed-styles.ts

@@ -0,0 +1,78 @@
+import { useContext, useInsertionEffect, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { mixStyles } from '../hooks/use-mixed-styles';
+import { getTheme, useTheme } from './Provider';
+import {
+  checkStyles,
+  cleanStyles,
+  getTweakStylesCache,
+  isStylesNotEmpty,
+  mergeTweakStyles,
+} from './helpers';
+import { ThemedStylesManager, JssContext } from './true-jss';
+import { IComponentName, IStyles, IUseStyles } from './types';
+
+const DEFAULT_NAME = 'LocalComponent';
+
+export function createThemedStyles<C extends string>(
+  ...args: [IStyles<C>] | [IComponentName, IStyles<C>]
+): IUseStyles<C> {
+  const [componentName, styles] = args.length === 2 ? args : [undefined, args[0]];
+  const name = componentName ?? DEFAULT_NAME;
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkStyles(name, styles);
+  }
+
+  const tweakStylesManager = new ThemedStylesManager({ styles, name });
+  const tweakStylesCache = getTweakStylesCache();
+
+  const useStyles = createUseStyles<C>((tweakStyles) => {
+    const theme = getTheme();
+    return mergeStyles(
+      styles as Styles<C>,
+      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C>) : undefined,
+      tweakStyles,
+    );
+  });
+
+  return (data) => {
+    const jssContext = useContext(JssContext);
+
+    const tweakStyles = useMemo(
+      () => mixStyles(data?.theme).filter(isStylesNotEmpty),
+      [data?.theme],
+    );
+
+    if (jssContext.tweakStylesArch !== 'true-jss') {
+      const tweakStylesStrategy =
+        jssContext.tweakStylesArch === 'react-jss' ? tweakStylesCache : mergeTweakStyles;
+
+      const theme = useMemo(
+        () => cleanStyles(tweakStylesStrategy(tweakStyles)),
+        [tweakStylesStrategy, tweakStyles],
+      );
+
+      return useStyles(isNotEmpty(data) ? { ...data, theme } : data);
+    }
+
+    const { components } = useTheme();
+
+    const themeStyles = isNotEmpty(componentName) ? components?.[componentName] : undefined;
+
+    const classes = tweakStylesManager.getClasses(themeStyles, tweakStyles, jssContext);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manage(themeStyles);
+      return unmanage;
+    }, [themeStyles]);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manageTweak(themeStyles, tweakStyles);
+      return unmanage;
+    }, [themeStyles, classes]);
+
+    return classes;
+  };
+}

package/src/theme/helpers.ts

@@ -1,29 +1,31 @@
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
+import { merge } from 'lodash-es';
 import {
   isArrayNotEmpty,
   isNotEmpty,
   mergeStyles,
 } from '@true-engineering/true-react-platform-helpers';
-import { getTheme } from './Provider';
-import { IComponentName, IStyles, IUseStyles } from './types';
+import { IMaybeArray } from './types';
 
 const EMPTY_STYLES = {};
 
-const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
+export const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
 
-const cleanStyles = <T>(tweakStyles?: T): T =>
-  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
-    ? tweakStyles
-    : (EMPTY_STYLES as T);
+export const isStylesNotEmpty = <T>(tweakStyles?: T): tweakStyles is NonNullable<T> =>
+  isNotEmpty(tweakStyles) && !Object.keys(tweakStyles).every(isTweakStyle);
 
-const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
-  const invalidClasses = Object.keys(styles).reduce((acc, key) => {
-    if (isTweakStyle(key)) {
-      acc.push(key);
-    }
-    return acc;
-  }, [] as string[]);
+export const cleanStyles = <T>(tweakStyles?: T): T =>
+  isStylesNotEmpty(tweakStyles) ? tweakStyles : (EMPTY_STYLES as T);
+
+export const mergeTweakStyles = <T>(tweakStyles?: IMaybeArray<T>): T | undefined => {
+  if (!Array.isArray(tweakStyles)) {
+    return tweakStyles;
+  }
+  const [first, ...rest] = tweakStyles;
+  return isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+};
+
+export const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
+  const invalidClasses = Object.keys(styles).filter(isTweakStyle);
 
   if (isArrayNotEmpty(invalidClasses)) {
     console.error(
@@ -47,30 +49,28 @@ export const themedStyles = <T>(styles: T, themeComponentStyles: T): T => {
   return styles;
 };
 
-export function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
+type TweakStylesCache = (styles: object[], prev?: object[]) => object | undefined;
+export const getTweakStylesCache = (): TweakStylesCache => {
+  let mergedStyles: object | undefined;
+  const cache = new WeakMap<object, TweakStylesCache>();
 
-export function createThemedStyles<C extends string, P>(
-  componentName: IComponentName,
-  styles: IStyles<C, P>,
-): IUseStyles<C, P>;
+  const getNext = (next: object) => {
+    if (!cache.has(next)) {
+      cache.set(next, getTweakStylesCache());
+    }
+    return cache.get(next)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createThemedStyles<C extends string, P>(...args: any[]): IUseStyles<C, P> {
-  const shouldUseTheme = args.length > 1;
-  const styles: IStyles<C, P> = shouldUseTheme ? args[1] : args[0];
-  const componentName: IComponentName | undefined = shouldUseTheme ? args[0] : undefined;
+  return (styles, prev = []) => {
+    const [next, ...rest] = styles;
+    if (isNotEmpty(next)) {
+      return getNext(next)(rest, prev.concat(next));
+    }
 
-  if (process.env.NODE_ENV !== 'production') {
-    checkStyles(componentName ?? 'LocalComponent', styles);
-  }
-  const useStyles = createUseStyles<C, P>((tweakStyles) => {
-    const theme = getTheme();
-    return mergeStyles(
-      styles as Styles<C, P>,
-      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C, P>) : undefined,
-      tweakStyles,
-    );
-  });
+    if (isNotEmpty(mergedStyles)) {
+      return mergedStyles;
+    }
 
-  return (data) => useStyles(isNotEmpty(data) ? { ...data, theme: cleanStyles(data.theme) } : data);
-}
+    return (mergedStyles = mergeTweakStyles(prev));
+  };
+};

package/src/theme/index.ts

@@ -1,4 +1,6 @@
 export * from './Provider';
+export * from './true-jss';
 export * from './common';
 export * from './types';
 export * from './helpers';
+export * from './create-themed-styles';

package/src/theme/true-jss/ThemedStylesManager.ts

@@ -0,0 +1,92 @@
+import { jss } from 'react-jss';
+import type { Classes, StyleSheet } from 'jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { IStyles } from '../types';
+import { IPartialStyle, TweakStylesManager } from './TweakStylesManager';
+import { IJssContext } from './jss-context';
+
+interface IStyleSheet<C extends string> {
+  manager: TweakStylesManager<C>;
+  refs: number;
+  sheet: StyleSheet<C>;
+  detachTimeout?: number;
+}
+
+const NO_THEME_STYLES: IPartialStyle = {};
+
+interface IThemedStylesManagerOptions<C extends string> {
+  styles: IStyles<C>;
+  name: string;
+}
+
+export class ThemedStylesManager<C extends string> {
+  #styleSheetMap = new Map<IPartialStyle, IStyleSheet<C>>();
+  #styles: IStyles<C>;
+  #name: string;
+
+  constructor({ styles, name }: IThemedStylesManagerOptions<C>) {
+    this.#styles = styles;
+    this.#name = name;
+  }
+
+  public getClasses(
+    theme = NO_THEME_STYLES,
+    tweak: IPartialStyle[],
+    jssContext: IJssContext,
+  ): Classes<C> {
+    return this.getOrCreate(theme, jssContext).manager.getClasses(tweak);
+  }
+
+  public manageTweak(theme = NO_THEME_STYLES, tweak: IPartialStyle[]): VoidFunction | undefined {
+    this.#styleSheetMap.get(theme)?.manager.manage(tweak);
+
+    return () => this.#styleSheetMap.get(theme)?.manager.unmanage(tweak);
+  }
+
+  public manage(theme = NO_THEME_STYLES): VoidFunction | undefined {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value)) {
+      return;
+    }
+    if (isNotEmpty(value.detachTimeout)) {
+      clearTimeout(value.detachTimeout);
+      value.detachTimeout = undefined;
+    }
+    value.refs += 1;
+    if (value.refs > 0) {
+      value.sheet.attach();
+    }
+
+    return () => this.unmanage(theme);
+  }
+
+  private unmanage(theme = NO_THEME_STYLES): void {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value) || value.refs === 0) {
+      return;
+    }
+    value.refs -= 1;
+    if (value.refs === 0 && !isNotEmpty(value.detachTimeout)) {
+      value.detachTimeout = window.setTimeout(() => {
+        if (value.refs === 0) {
+          value.sheet.detach();
+        }
+      }, 100);
+    }
+  }
+
+  private getOrCreate(theme: IPartialStyle, jssContext: IJssContext): IStyleSheet<C> {
+    if (!this.#styleSheetMap.has(theme)) {
+      const sheet = jss.createStyleSheet(mergeStyles(this.#styles, theme), {
+        link: true,
+        meta: this.#name,
+        generateId: jssContext.generateId,
+      });
+      const classes = { ...sheet.classes };
+      const manager = new TweakStylesManager({ sheet, classes });
+      this.#styleSheetMap.set(theme, { sheet, manager, refs: 0 });
+    }
+
+    return this.#styleSheetMap.get(theme)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  }
+}

package/src/theme/true-jss/TweakStylesManager.ts

@@ -0,0 +1,157 @@
+import type { StyleSheet, Classes, Rule } from 'jss';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  joinStrings,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { isTweakStyle } from '../helpers';
+
+export type IPartialStyle = object;
+
+interface TweakRules<C extends string> {
+  classes: Classes<C>;
+  refs?: number;
+  rules: Map<C, Rule>;
+}
+
+interface TweakStylesManagerOptions<C extends string> {
+  sheet: StyleSheet<C>;
+  classes: Classes<C>;
+  tweak?: IPartialStyle[];
+}
+
+export class TweakStylesManager<C extends string> {
+  #map = new WeakMap<IPartialStyle, TweakStylesManager<C>>();
+  #sheet: StyleSheet<C>;
+  #classes: Classes<C>;
+  #tweak: IPartialStyle[];
+
+  #tweakRules: TweakRules<C> | undefined;
+  constructor({ sheet, classes, tweak = [] }: TweakStylesManagerOptions<C>) {
+    this.#sheet = sheet;
+    this.#classes = classes;
+    this.#tweak = tweak;
+  }
+
+  public getClasses([next, ...rest]: IPartialStyle[]): Classes<C> {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.getClasses(rest);
+    }
+    return this.getOrCreate()?.classes ?? this.#classes;
+  }
+
+  public manage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.manage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules)) {
+      return;
+    }
+    if (this.#tweakRules.refs === 0) {
+      this.insertRules();
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 0) + 1;
+  }
+
+  public unmanage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.unmanage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules) || this.#tweakRules.refs === 0) {
+      return;
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 1) - 1;
+    if (this.#tweakRules.refs === 0) {
+      this.deleteRules();
+    }
+  }
+
+  private getNextManager(next?: IPartialStyle) {
+    if (!isNotEmpty(next)) {
+      return;
+    }
+    if (!this.#map.has(next)) {
+      const manager = new TweakStylesManager({
+        sheet: this.#sheet,
+        classes: this.#classes,
+        tweak: this.#tweak.concat(next),
+      });
+      this.#map.set(next, manager);
+    }
+    return this.#map.get(next);
+  }
+
+  private getOrCreate() {
+    if (!isNotEmpty(this.#tweakRules) && isArrayNotEmpty(this.#tweak)) {
+      const [first, ...rest] = this.#tweak;
+      const styles = isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+
+      const rules = this.addRules(styles);
+
+      const classes = { ...this.#classes };
+      rules.forEach((rule, key) => {
+        classes[key] = joinStrings([classes[key], rule.id], ' ');
+      });
+
+      this.#tweakRules = { classes, rules };
+    }
+    return this.#tweakRules;
+  }
+
+  private addRules(styles: IPartialStyle) {
+    return new Map(
+      Object.entries(styles)
+        .map(([key, style]) => this.addRule(key as C, style))
+        .filter(isNotEmpty),
+    );
+  }
+
+  private addRule(key: C, style: object) {
+    if (isTweakStyle(key)) {
+      return;
+    }
+    const rule = this.#sheet.addRule(key, style, { index: this.getInsertIndex(key) });
+    return isNotEmpty(rule) ? ([key, rule] as const) : undefined;
+  }
+
+  private insertRules() {
+    this.#tweakRules?.rules.forEach((rule, key) => {
+      this.#sheet.rules.register(rule);
+      this.#sheet.rules.index.splice(this.getInsertIndex(key), 0, rule);
+      this.#sheet.insertRule(rule);
+    });
+  }
+
+  private deleteRules() {
+    this.#tweakRules?.rules.forEach((rule) => this.#sheet.deleteRule(rule));
+  }
+
+  private getInsertIndex(key: C) {
+    return (
+      this.#sheet.rules.index.findIndex((rule) => rule.key === key) + 1 ||
+      this.#sheet.rules.index.length
+    );
+  }
+}
+
+declare module 'jss' {
+  export interface RuleList {
+    index: Rule[];
+  }
+  // eslint-disable-next-line no-shadow
+  export interface StyleSheet<RuleName> {
+    rules: RuleList;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    deleteRule(rule: Rule): boolean;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    addRule(
+      name: RuleName,
+      style: JssStyle,
+      options?: Partial<Rule['options']>,
+    ): (Rule & { id: string }) | null;
+  }
+}

package/src/theme/true-jss/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemedStylesManager';
+export * from './jss-context';