Added
- feat:
createScript({ css })
API, you can now pass acss
instance intocreateScript
, enabling automatic type inference for atomic CSS token access. - feat: Atomic util
$.cssVar(name)
for retrieving computed CSS values fromcss.var
tokens. - feat: Atomic util
$.cssTheme(name)
for retrieving computed CSS values fromcss.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 viacss.$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.