Enhance runtime style processing with atoms callback functions

[Luca Schneider (Mad-Kat)]

This PR introduces significant improvements to the runtime style processing system, adding support for directly use atoms in CSS prop and support for callback functions in atoms.

Features

Direct atoms Support in CSS Props

• atoms can now be used directly within css prop expressions
• Seamless integration between atoms and css functions
• Unified runtime processing for both static and dynamic styling

Enhanced atoms Function with Callback Support

• Added support for runtime callback functions in atoms() that can dynamically manipulate class names and styles
• Callbacks receive (props, classNames, style) parameters for fine-grained control
• Supports conditional class application and dynamic style modifications

Usage

// atoms with callback functions
const Component = styled.div<{$active: boolean}>(
  atoms("base-class", (props, classNames, style) => {
    if (props.$active) {
      classNames.add("active");
      style.borderWidth = "2px";
    }
    classNames.delete("base-class");
  })
);

// atoms directly in CSS prop
<div css={atoms(
  "p-4 rounded-md",
  true && "bg-white shadow-sm",
  (props, classNames, style) => {
    classNames.add("focus:ring-2");
    style["--ring-offset"] = "2px";
  }
)} />

// Combined css and atoms
<div css={css`
  color: red;
  ${atoms("flex items-center", (_, classNames) => {
      classNames.add("flex-col");
  })}
`} />

TODO

• Fix types
• Update docs
• Document the complex logic
• Test more

[changeset-bot]

🦋 Changeset detected

Latest commit: 35bac98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
next-yak	Minor
yak-swc	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📚 Documentation Preview Deployed!

A preview of the documentation changes in this PR has been deployed to Vercel:

🔗 View Documentation Preview

This preview will update automatically with new commits to this PR.

[github-actions]

🧪 Example App Preview Deployed!

A preview of the example app changes in this PR has been deployed to Vercel:

🔗 View Example App Preview

This preview will update automatically with new commits to this PR.

[codspeed-hq]

CodSpeed Performance Report

Merging #375 will degrade performances by 41.74%

_{Comparing feat/atoms-with-callbacks (35bac98) with main (a3175c0)}

Summary

⚡ 2 improvements
❌ 4 (👁 4) regressions
✅ 6 untouched benchmarks

Benchmarks breakdown

	Benchmark	BASE	HEAD	Change
👁	render AttrsComponentsYak	52.9 ms	61.2 ms	-13.61%
⚡	render CssPropComponentsYak	13.7 ms	12.4 ms	+10.02%
👁	render DynamicPropsComponentsYak	168.2 ms	288.6 ms	-41.74%
⚡	render KanjiLetterComponentYak	315.9 ms	285.4 ms	+10.68%
👁	render NestedComponentsYak	11.5 ms	17.2 ms	-33.5%
👁	render PureComponentsYak	18 ms	20.8 ms	-13.17%