<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>kstyled Blog</title>
        <link>https://crossplatformkorea.github.io/kstyled/blog</link>
        <description>kstyled Blog</description>
        <lastBuildDate>Sat, 11 Jul 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <copyright>Copyright © 2026 Cross Platform Korea.</copyright>
        <item>
            <title><![CDATA[kstyled 0.4 moves styling work out of render]]></title>
            <link>https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4</link>
            <guid>https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4</guid>
            <pubDate>Sat, 11 Jul 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[kstyled 0.4 strengthens compile-time output, composition, typed themes, and package interoperability.]]></description>
            <content:encoded><![CDATA[<p>kstyled 0.4 starts with a narrow goal: keep the styled authoring model while
making the generated React Native code easier to predict, inspect, and ship.</p>
<p><code>0.4.1</code> is now the stable release for that work. The <code>latest</code> tag moves to 0.4,
while <code>0.3.8</code> remains available by exact version for teams that need a staged
migration.</p>
<h2 class="anchor anchorTargetStickyNavbar_ZhhB" id="a-compiler-contract-developers-can-rely-on">A compiler contract developers can rely on<a href="https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4#a-compiler-contract-developers-can-rely-on" class="hash-link" aria-label="Direct link to A compiler contract developers can rely on" title="Direct link to A compiler contract developers can rely on" translate="no">​</a></h2>
<p>Static declarations belong in <code>StyleSheet.create()</code>. Values that depend on
props or themes should remain small runtime expressions. The 0.4 compiler makes
that boundary explicit for styled components and function-scoped <code>css</code>
templates.</p>
<p>Strict mode turns that contract into a CI check:</p>
<div class="language-js codeBlockContainer_hAPj theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_Lofy"><pre tabindex="0" class="prism-code language-js codeBlock_eEDs thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_KaKk"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'babel-plugin-kstyled'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">strict</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<p>When a matched template cannot be transformed, the build fails with compiler
context instead of quietly changing its performance characteristics.</p>
<h2 class="anchor anchorTargetStickyNavbar_ZhhB" id="composition-without-wrapper-debt">Composition without wrapper debt<a href="https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4#composition-without-wrapper-debt" class="hash-link" aria-label="Direct link to Composition without wrapper debt" title="Direct link to Composition without wrapper debt" translate="no">​</a></h2>
<p>Real component libraries extend styles, add <code>attrs</code>, forward refs, switch the
render target with <code>as</code>, and pass external styles. The beta preserves those
behaviors while collapsing nested styled wrappers back to the original target.</p>
<p>The runtime also avoids avoidable allocation in common paths: a single
compiled style remains a single reference, normalized dynamic objects are
reused, and external styles are not cloned when no shorthand expansion is
needed.</p>
<h2 class="anchor anchorTargetStickyNavbar_ZhhB" id="better-boundaries-for-library-authors">Better boundaries for library authors<a href="https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4#better-boundaries-for-library-authors" class="hash-link" aria-label="Direct link to Better boundaries for library authors" title="Direct link to Better boundaries for library authors" translate="no">​</a></h2>
<p><code>defineTheme</code> and generic <code>useTheme</code> improve theme inference without requiring
global type augmentation. Explicit CJS, ESM, and React Native export conditions
make package resolution less dependent on bundler heuristics. Source maps and
matching declarations ship with both the runtime and compiler packages.</p>
<p>These are not headline APIs, but they are the details that determine whether a
styling package behaves consistently in an application, a component library,
and a test runner.</p>
<h2 class="anchor anchorTargetStickyNavbar_ZhhB" id="upgrade-to-04">Upgrade to 0.4<a href="https://crossplatformkorea.github.io/kstyled/blog/kstyled-0-4#upgrade-to-04" class="hash-link" aria-label="Direct link to Upgrade to 0.4" title="Direct link to Upgrade to 0.4" translate="no">​</a></h2>
<p>Install both packages at the same version:</p>
<div class="language-bash codeBlockContainer_hAPj theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_Lofy"><pre tabindex="0" class="prism-code language-bash codeBlock_eEDs thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_KaKk"><span class="token-line" style="color:#393A34"><span class="token plain">pnpm add kstyled@0.4.1</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">pnpm add -D babel-plugin-kstyled@0.4.1</span><br></span></code></pre></div></div>
<p>Then validate production builds and representative screens on iOS, Android,
and web. The
<a class="" href="https://crossplatformkorea.github.io/kstyled/releases/0.4.1">full release notes</a> include migration guidance and a
practical validation checklist.</p>]]></content:encoded>
            <category>release</category>
            <category>react-native</category>
            <category>performance</category>
        </item>
    </channel>
</rss>