ci: publish

Author: hyochan

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: Publish to npm
+name: Publish
 
 on:
   workflow_dispatch:
@@ -93,10 +93,19 @@ jobs:
         if: ${{ inputs.dry-run }}
         run: pnpm publish:dry
 
-      - name: Publish to npm
+      - name: Ensure npm 11.5.1 or later
         if: ${{ !inputs.dry-run }}
-        run: pnpm publish:packages --provenance --no-git-checks
-        # Trusted Publishers (OIDC) 사용으로 NODE_AUTH_TOKEN 불필요
+        run: npm install -g npm@latest
+
+      - name: Publish kstyled to npm
+        if: ${{ !inputs.dry-run }}
+        run: npm publish --access public --provenance
+        working-directory: ./packages/kstyled
+
+      - name: Publish babel-plugin-kstyled to npm
+        if: ${{ !inputs.dry-run }}
+        run: npm publish --access public --provenance
+        working-directory: ./packages/babel-plugin-kstyled
 
       - name: Push changes
         if: ${{ !inputs.dry-run }}
@@ -105,12 +114,14 @@ jobs:
           git push origin v${{ steps.version.outputs.VERSION }}
 
       - name: Create GitHub Release
-        if: ${{ !inputs.dry-run }}
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        if: ${{ !inputs.dry-run && steps.version.outputs.VERSION }}
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: v${{ steps.version.outputs.VERSION }}
-          release_name: Release v${{ steps.version.outputs.VERSION }}
+          name: v${{ steps.version.outputs.VERSION }}
           draft: false
           prerelease: false
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

CONTRIBUTING.md

@@ -268,34 +268,66 @@ bun run dev
 
 ### Publishing a New Version
 
-1. **Update package versions**
+We support two methods for publishing: **GitHub Actions (Recommended)** and **Manual**.
 
-   **Option A: Automatic (Recommended)**
+#### Method 1: GitHub Actions (Recommended)
 
-   Use the version scripts to automatically bump versions in both packages:
+The easiest way to publish is using the automated GitHub Actions workflow:
 
-   ```bash
-   pnpm version:patch  # 0.1.2 → 0.1.3 (bug fixes)
-   pnpm version:minor  # 0.1.3 → 0.2.0 (new features)
-   pnpm version:major  # 0.2.0 → 1.0.0 (breaking changes)
-   ```
+1. **Go to GitHub Actions**
+
+   Navigate to: `https://github.com/hyodotdev/kstyled/actions/workflows/publish.yml`
+
+2. **Run workflow**
+
+   - Click "Run workflow"
+   - Select branch: `main`
+   - Choose version bump type:
+     - `patch` - Bug fixes (0.3.0 → 0.3.1)
+     - `minor` - New features (0.3.0 → 0.4.0)
+     - `major` - Breaking changes (0.3.0 → 1.0.0)
+   - Optional: Check "Dry run" to test without publishing
 
-   This updates both `kstyled` and `babel-plugin-kstyled` at once.
+3. **Wait for completion**
 
-   **Option B: Manual**
+   The workflow will automatically:
+   - ✅ Build all packages
+   - ✅ Run type checking and tests
+   - ✅ Bump versions in both packages
+   - ✅ Commit and push changes
+   - ✅ Publish to npm (with OIDC authentication)
+   - ✅ Create git tag
+   - ✅ Create GitHub Release with auto-generated notes
 
-   Manually edit version in both packages:
-   - `packages/kstyled/package.json`
-   - `packages/babel-plugin-kstyled/package.json`
+4. **Verify**
 
-   Example: `"version": "0.1.3"`
+   Check that:
+   - New version appears on npm
+   - GitHub Release is created
+   - Git tag is pushed
 
-   > **Note**: The root `package.json` version is for development only and doesn't affect npm publishing.
+**Note**: The workflow uses OpenID Connect (OIDC) for npm authentication, so no NPM_TOKEN is needed.
+
+#### Method 2: Manual Publishing
+
+If you need to publish manually:
+
+1. **Update package versions**
+
+   Use the version scripts to automatically bump versions in both packages:
+
+   ```bash
+   pnpm version:patch  # 0.3.0 → 0.3.1 (bug fixes)
+   pnpm version:minor  # 0.3.0 → 0.4.0 (new features)
+   pnpm version:major  # 0.3.0 → 1.0.0 (breaking changes)
+   ```
+
+   This updates both `kstyled` and `babel-plugin-kstyled` at once using the custom `scripts/bump-version.js` script.
 
 2. **Build and test everything**
 
    ```bash
-   pnpm build && pnpm typecheck && pnpm lint
+   pnpm build && pnpm typecheck && pnpm test
    ```
 
    Make sure all checks pass with 0 errors.
@@ -304,7 +336,8 @@ bun run dev
 
    ```bash
    git add packages/*/package.json
-   git commit -m "chore: bump version to 0.1.3"
+   git commit -m "chore: release v0.3.1"
+   git tag v0.3.1
    ```
 
 4. **Verify npm login**
@@ -339,35 +372,40 @@ bun run dev
    pnpm publish:packages
    ```
 
-   This publishes both `kstyled` and `babel-plugin-kstyled` to npm with public access as the `latest` version.
-
-   **Option B: Beta/Preview Release (next tag)**
+   For provenance (recommended):
 
    ```bash
-   pnpm publish:packages --tag next
+   pnpm publish:packages --provenance
    ```
 
-   This publishes both packages with the `next` tag, allowing users to test pre-release versions without affecting the stable `latest` version:
+   This publishes both `kstyled` and `babel-plugin-kstyled` to npm with public access as the `latest` version.
+
+   **Option B: Beta/Preview Release (next tag)**
 
    ```bash
-   # Users can install the next version with:
-   npm install kstyled@next babel-plugin-kstyled@next
+   pnpm publish:packages --tag next
    ```
 
    Use this for:
    - Testing major changes before stable release
    - Preview releases for early adopters
    - Release candidates (e.g., `0.3.0-rc.1`)
 
-7. **Create and push git tag**
+7. **Push changes and tags**
 
    ```bash
-   git tag v0.1.3
-   git push
-   git push --tags
+   git push origin main
+   git push origin v0.3.1
    ```
 
-8. **Verify publication**
+8. **Create GitHub Release (optional)**
+
+   Go to: `https://github.com/hyodotdev/kstyled/releases/new`
+   - Select the tag you just pushed
+   - Generate release notes automatically
+   - Publish release
+
+9. **Verify publication**
 
    ```bash
    npm view kstyled version

README.md

@@ -54,6 +54,7 @@ export default function App() {
 
 - ⚡️ **Zero runtime** - Styles compiled to `StyleSheet.create` at build time
 - 🎨 **Familiar API** - styled-components syntax you already know
+- ✨ **Flexible syntax** - Supports `${16}px`, `${'16px'}`, and `${16}` (unlike styled-components/emotion)
 - 🎭 **Theme support** - Built-in ThemeProvider with TypeScript
 - 💪 **Full TypeScript** - Complete type inference
 - 📦 **Tiny bundle** - Minimal runtime code

package.json

@@ -36,9 +36,10 @@
     "prepublish": "pnpm build && pnpm typecheck && pnpm test",
     "publish:packages": "pnpm publish -r --filter '!example' --filter '!kstyled-docs' --access public",
     "publish:dry": "pnpm publish -r --filter '!example' --filter '!kstyled-docs' --access public --dry-run",
-    "version:patch": "pnpm -r --filter '!example' --filter '!kstyled-docs' exec npm version patch --no-git-tag-version",
-    "version:minor": "pnpm -r --filter '!example' --filter '!kstyled-docs' exec npm version minor --no-git-tag-version",
-    "version:major": "pnpm -r --filter '!example' --filter '!kstyled-docs' exec npm version major --no-git-tag-version"
+    "version:patch": "node scripts/bump-version.js patch",
+    "version:minor": "node scripts/bump-version.js minor",
+    "version:major": "node scripts/bump-version.js major",
+    "version:get": "node -p \"require('./packages/kstyled/package.json').version\""
   },
   "devDependencies": {
     "@turbo/gen": "^2.3.3",

packages/babel-plugin-kstyled/src/__tests__/transform.test.ts

@@ -328,6 +328,107 @@ describe('babel-plugin-kstyled', () => {
     });
   });
 
+  describe('Template Literal Interpolation with Units', () => {
+    test('should handle interpolation with px unit suffix', () => {
+      const input = `
+        import { styled } from 'kstyled';
+        import { View } from 'react-native';
+
+        const Box = styled(View)\`
+          width: \${({$size = 'medium'}) =>
+            $size === 'small' ? 16 : $size === 'large' ? 24 : 20}px;
+          height: \${({$size = 'medium'}) =>
+            $size === 'small' ? 16 : $size === 'large' ? 24 : 20}px;
+          border-radius: \${({$size = 'medium'}) =>
+            $size === 'small' ? 8 : $size === 'large' ? 12 : 10}px;
+        \`;
+      `;
+
+      const output = transform(input);
+
+      // Should contain width, height, borderRadius
+      expect(output).toContain('width');
+      expect(output).toContain('height');
+      expect(output).toContain('borderRadius');
+      // The px suffix should be stripped automatically
+      // Values should be numbers, not strings with 'px'
+      expect(output).not.toContain('px');
+      expect(output).toBeDefined();
+    });
+
+    test('should handle simple interpolation with px unit', () => {
+      const input = `
+        import { styled } from 'kstyled';
+        import { View } from 'react-native';
+
+        const SIZE = 16;
+        const Box = styled(View)\`
+          width: \${SIZE}px;
+          height: \${SIZE}px;
+        \`;
+      `;
+
+      const output = transform(input);
+
+      expect(output).toContain('width');
+      expect(output).toContain('height');
+      // px should be stripped from interpolations
+      expect(output).not.toContain('px');
+      expect(output).toBeDefined();
+    });
+
+    test('should handle multiple units in interpolations', () => {
+      const input = `
+        import { styled } from 'kstyled';
+        import { Text } from 'react-native';
+
+        const FONT_SIZE = 14;
+        const LINE_HEIGHT = 20;
+        const Label = styled(Text)\`
+          font-size: \${FONT_SIZE}px;
+          line-height: \${LINE_HEIGHT}px;
+          letter-spacing: \${0.5}px;
+        \`;
+      `;
+
+      const output = transform(input);
+
+      expect(output).toContain('fontSize');
+      expect(output).toContain('lineHeight');
+      expect(output).toContain('letterSpacing');
+      // All px units should be stripped
+      expect(output).not.toContain('px');
+    });
+
+    test('should handle string values with px units from functions', () => {
+      const input = `
+        import { styled } from 'kstyled';
+        import { View } from 'react-native';
+
+        const Box = styled(View)\`
+          width: \${({$size = 'medium'}) =>
+            $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+          height: \${({$size = 'medium'}) =>
+            $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+          border-radius: \${({$size = 'medium'}) =>
+            $size === 'small' ? '8px' : $size === 'large' ? '12px' : '10px'};
+        \`;
+      `;
+
+      const output = transform(input);
+
+      expect(output).toContain('width');
+      expect(output).toContain('height');
+      expect(output).toContain('borderRadius');
+      // String values like '16px' are preserved in the function
+      // They will be normalized at runtime by normalizeStyleValue
+      expect(output).toContain('16px');
+      expect(output).toContain('24px');
+      expect(output).toContain('20px');
+      expect(output).toBeDefined();
+    });
+  });
+
   describe('Comprehensive React Native Property Support', () => {
     test('should support all ViewStyle border properties', () => {
       const input = `