Skip to content

0.45.0

Choose a tag to compare

@peterver peterver released this 05 Jul 10:19
· 117 commits to main since this release

Added

  • feat: createScript({ css }) API, you can now pass a css instance into createScript, enabling automatic type inference for atomic CSS token access.
  • feat: Atomic util $.cssVar(name) for retrieving computed CSS values from css.var tokens.
  • feat: Atomic util $.cssTheme(name) for retrieving computed CSS values from css.theme tokens.
// css.ts
import {createCss} from '@trifrost/core';

export const css = createCss({
  var: {
    fontSizeM: '1.8rem',
    spacingS: '0.5rem',
  },
  theme: {
    fg: '#000',
    bg: '#fff',
  },
});
// script.ts
import {createScript} from '@trifrost/core';
import {css} from './css';
import {type Env} from './types';

const config = {
  css,
  atomic: true,
} as const;

const {Script, script} = createScript<typeof config, Env, /* Other generics */>(config);
export {Script, script};
// Some component file
export function SomeComponent() {
  return (
    ...
    <Script>
      {(el, $) => {
        // ✅ Fully typed and autocompletable
        el.style.fontSize = $.cssVar('fontSizeM');
        el.style.background = $.cssTheme('bg');
      }}
    </Script>;
    ...
  );
}

Improved

  • dx: Atomic $watch and $bind callbacks now receive (newVal, oldVal) arguments instead of just (newVal), enabling more expressive data change tracking and comparisons.
  • qol: When using only string-based theme variables (without { light, dark }), TriFrost will no longer inject media queries for them, they are treated as regular vars. These are still available via css.$t.
  • qol: ARC no longer ref-cleans method bindings thanks to the LRU cookie system, it now exclusively manages data prop references.

Breaking

  • createScript now requires passing the config type explicitly as the first generic. This unlocks better type inference (e.g. CSS token safety) and paves the way for future DX improvements.