Skip to content

Commit fd78644

Browse files
hyochanhyochan
committed
ci: publish docs
1 parent e2cf8f5 commit fd78644

4 files changed

Lines changed: 128 additions & 34 deletions

File tree

‎.github/workflows/deploy-docs.yml‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
name: Deploy Docs
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- 'packages/docs/**'
9+
- '.github/workflows/deploy-docs.yml'
10+
workflow_dispatch:
11+
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup Node.js
29+
uses: actions/setup-node@v4
30+
with:
31+
node-version: '20'
32+
33+
- name: Setup pnpm
34+
uses: pnpm/action-setup@v4
35+
36+
- name: Get pnpm store directory
37+
id: pnpm-cache
38+
shell: bash
39+
run: |
40+
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
41+
42+
- name: Setup pnpm cache
43+
uses: actions/cache@v4
44+
with:
45+
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
46+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
47+
restore-keys: |
48+
${{ runner.os }}-pnpm-store-
49+
50+
- name: Install dependencies
51+
run: pnpm install --frozen-lockfile
52+
53+
- name: Build Docusaurus
54+
run: pnpm --filter kstyled-docs build
55+
56+
- name: Setup Pages
57+
uses: actions/configure-pages@v4
58+
59+
- name: Upload artifact
60+
uses: actions/upload-pages-artifact@v3
61+
with:
62+
path: packages/docs/build
63+
64+
deploy:
65+
environment:
66+
name: github-pages
67+
url: ${{ steps.deployment.outputs.page_url }}
68+
runs-on: ubuntu-latest
69+
needs: build
70+
steps:
71+
- name: Deploy to GitHub Pages
72+
id: deployment
73+
uses: actions/deploy-pages@v4

‎.markdownlint.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"default": true,
3+
"MD033": {
4+
"allowed_elements": [
5+
"details",
6+
"summary",
7+
"div",
8+
"br",
9+
"img",
10+
"a",
11+
"code",
12+
"pre",
13+
"span",
14+
"strong",
15+
"em"
16+
]
17+
},
18+
"MD013": false,
19+
"MD041": false
20+
}

‎packages/docs/docs/performance.md‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@ kstyled transforms styles at compile time, resulting in zero runtime overhead co
1010

1111
### Bundle size comparison
1212

13-
| Library | Bundle Size (minified) | Packages Required |
14-
|---------|----------------------|-------------------|
15-
| **kstyled** | ~10 KB | 1 package: `kstyled` |
16-
| **@emotion/native** | ~13-18 KB | 3 packages: `@emotion/native` + `@emotion/primitives-core` + `@emotion/react`* |
17-
| **styled-components/native** | ~21 KB | 1 package: `styled-components` (includes both web & native) |
13+
| Library | Bundle Size (minified) | Packages Required |
14+
| ---------------------------- | ---------------------- | ------------------------------------------------------------------------------- |
15+
| **kstyled** | ~10 KB | 1 package: `kstyled` |
16+
| **@emotion/native** | ~13-18 KB | 3 packages: `@emotion/native` + `@emotion/primitives-core` + `@emotion/react`\* |
17+
| **styled-components/native** | ~21 KB | 1 package: `styled-components` (includes both web & native) |
1818

19-
*\*@emotion/react is a required peer dependency for @emotion/native to work*
19+
_\*@emotion/react is a required peer dependency for @emotion/native to work_
2020

2121
**Key insights:**
22+
2223
- **kstyled is the smallest** at ~10 KB with everything in one package
2324
- **@emotion/native requires 3 separate packages** totaling ~13-18 KB:
2425
- `@emotion/native`: ~1 KB (just a wrapper)
@@ -30,7 +31,7 @@ kstyled transforms styles at compile time, resulting in zero runtime overhead co
3031
- Includes both web and native in the same npm package
3132
- Use `styled-components/native` import path for React Native
3233

33-
*Additional note: styled-components and emotion also depend on `css-to-react-native` (~25 KB) for runtime CSS parsing.*
34+
_Additional note: styled-components and emotion also depend on `css-to-react-native` (~25 KB) for runtime CSS parsing._
3435

3536
### Rendering performance
3637

@@ -62,7 +63,7 @@ const Item = styled(View)`
6263
<FlatList
6364
data={items}
6465
renderItem={({ item }) => <Item>{item.content}</Item>}
65-
/>
66+
/>;
6667
```
6768

6869
### Static-heavy components
@@ -110,13 +111,13 @@ const Button = styled(Pressable)<{ $primary?: boolean }>`
110111
padding: 12px 24px;
111112
border-radius: 8px;
112113
font-weight: 600;
113-
background-color: ${p => p.$primary ? '#007AFF' : '#ccc'};
114+
background-color: ${(p) => (p.$primary ? '#007AFF' : '#ccc')};
114115
`;
115116

116117
// Less optimal - everything dynamic
117118
const Button = styled(Pressable)<{ $padding?: number; $radius?: number }>`
118-
padding: ${p => p.$padding || 12}px;
119-
border-radius: ${p => p.$radius || 8}px;
119+
padding: ${(p) => p.$padding || 12}px;
120+
border-radius: ${(p) => p.$radius || 8}px;
120121
`;
121122
```
122123

@@ -131,11 +132,7 @@ const Item = styled(View)`
131132
`;
132133

133134
function MyItem({ color }: { color: string }) {
134-
return (
135-
<Item style={{ backgroundColor: color }}>
136-
{/* ... */}
137-
</Item>
138-
);
135+
return <Item style={{ backgroundColor: color }}>{/* ... */}</Item>;
139136
}
140137
```
141138

@@ -151,7 +148,7 @@ const getButtonColor = (variant: string) => {
151148

152149
const Button = styled(Pressable)<{ $variant: string }>`
153150
padding: 12px;
154-
background-color: ${p => getButtonColor(p.$variant)};
151+
background-color: ${(p) => getButtonColor(p.$variant)};
155152
`;
156153

157154
// Consider memoizing or pre-computing
@@ -193,13 +190,13 @@ Below are real benchmark results from our test app rendering 50 complex cards:
193190

194191
</details>
195192

196-
| Metric | kstyled | emotion |
197-
|--------|---------|---------|
198-
| **Median** | **477.74ms** | **561.23ms** |
199-
| Mean | 482.43ms | 565.34ms |
200-
| Min / Max | 476.66ms / 494.44ms | 544.33ms / 592.24ms |
201-
| P95 | 494.15ms | 585.37ms |
202-
| Std Dev | ±7.55ms | ±12.32ms |
193+
| Metric | kstyled | emotion |
194+
| ---------- | ------------------- | ------------------- |
195+
| **Median** | **477.74ms** | **561.23ms** |
196+
| Mean | 482.43ms | 565.34ms |
197+
| Min / Max | 476.66ms / 494.44ms | 544.33ms / 592.24ms |
198+
| P95 | 494.15ms | 585.37ms |
199+
| Std Dev | ±7.55ms | ±12.32ms |
203200

204201
**Result: 14.9% faster** ⚡
205202

@@ -216,13 +213,13 @@ Below are real benchmark results from our test app rendering 50 complex cards:
216213

217214
</details>
218215

219-
| Metric | kstyled | styled-components |
220-
|--------|---------|-------------------|
221-
| **Median** | **182.94ms** | **199.47ms** |
222-
| Mean | 186.21ms | 193.26ms |
223-
| Min / Max | 182.37ms / 215.84ms | 182.33ms / 201.51ms |
224-
| P95 | 201.20ms | 200.82ms |
225-
| Std Dev | ±9.88ms | ±8.35ms |
216+
| Metric | kstyled | styled-components |
217+
| ---------- | ------------------- | ------------------- |
218+
| **Median** | **182.94ms** | **199.47ms** |
219+
| Mean | 186.21ms | 193.26ms |
220+
| Min / Max | 182.37ms / 215.84ms | 182.33ms / 201.51ms |
221+
| P95 | 201.20ms | 200.82ms |
222+
| Std Dev | ±9.88ms | ±8.35ms |
226223

227224
**Result: 8.3% faster** ⚡
228225

@@ -231,6 +228,7 @@ Below are real benchmark results from our test app rendering 50 complex cards:
231228
</div>
232229

233230
**Test configuration:**
231+
234232
- 50 cards per benchmark
235233
- 10 iterations per library (3 warm-up iterations discarded)
236234
- Randomized order each iteration
@@ -247,17 +245,17 @@ The performance advantage comes from **build-time optimization**:
247245
const Box = styled(View)`
248246
padding: 16px;
249247
border-radius: 12px;
250-
background-color: ${p => p.$selected ? '#007AFF' : '#FFF'};
248+
background-color: ${(p) => (p.$selected ? '#007AFF' : '#FFF')};
251249
`;
252250

253251
// Is compiled at build time to:
254252
const styles = StyleSheet.create({
255-
s0: { padding: 16, borderRadius: 12 }
253+
s0: { padding: 16, borderRadius: 12 },
256254
});
257255

258256
const Box = (props) => {
259257
const dynamicStyle = {
260-
backgroundColor: props.$selected ? '#007AFF' : '#FFF'
258+
backgroundColor: props.$selected ? '#007AFF' : '#FFF',
261259
};
262260
return <View style={[styles.s0, dynamicStyle]} {...props} />;
263261
};
@@ -274,10 +272,13 @@ const Box = (props) => {
274272
### Performance characteristics
275273

276274
The **8-15% improvement** is consistent across different types of components:
275+
277276
- Components with mostly static styles benefit from build-time compilation
278277
- Components with dynamic styles still benefit from faster component instantiation and lighter runtime overhead
279278
- The improvement is most noticeable when rendering many components (e.g., long lists)
280279

280+
**Note on real-world impact**: While our simple benchmark shows an 8-15% performance improvement, **more complex components with deeper nesting, multiple dynamic props, and heavy style computations can see even larger performance gains**. The compile-time optimization becomes increasingly beneficial as component complexity grows, since kstyled eliminates all CSS parsing overhead regardless of style complexity.
281+
281282
### Important notes
282283

283284
- Both kstyled and runtime CSS-in-JS libraries are highly optimized

‎packages/docs/static/.nojekyll‎

Whitespace-only changes.

0 commit comments

Comments
 (0)