open-index/open-npm huggingface dataset:
npm package: @sohu-bpd/utils
Description: Frontend utility library
Latest version: 0.0.5

# @sohu-bpd/utils

Frontend utility library for common development tasks.

## Installation

```bash
npm install @sohu-bpd/utils
# or
pnpm add @sohu-bpd/utils
# or
yarn add @sohu-bpd/utils
```

## Usage

### ESM / CommonJS

```typescript
import { px2vw, px2px } from '@sohu-bpd/utils'

// or
const { px2vw, px2px } = require('@sohu-bpd/utils')
```

### Browser (IIFE)

```html
<script src="https://unpkg.com/@sohu-bpd/utils/dist/index.global.js"></script>
<script>
  const { px2vw, px2px } = SohuUtils
</script>
```

## API

### px2vw

将设计稿的 px 值转换为 vw 单位字符串，适用于响应式布局。

```typescript
function px2vw(
  px: number,
  designWidth?: number,
  unitPrecision?: number
): string
```

**Parameters:**

- `px` - 设计稿上的 px 值
- `designWidth` - 设计稿基准宽度，默认 `750`
- `unitPrecision` - 小数位精度，默认 `5`

**Returns:** vw 单位字符串，如 `"13.33333vw"`

**Example:**

```typescript
import { px2vw } from '@sohu-bpd/utils'

// 基于 750px 设计稿
px2vw(100) // "13.33333vw"
px2vw(375) // "50vw"

// 基于 375px 设计稿
px2vw(100, 375) // "26.66667vw"

// 自定义精度
px2vw(100, 750, 2) // "13.33vw"
```

### px2px

将设计稿的 px 值转换为当前屏幕的实际像素值，适用于 Canvas、动态计算等场景。

```typescript
function px2px(px: number, designWidth?: number): number
```

**Parameters:**

- `px` - 设计稿上的 px 值
- `designWidth` - 设计稿基准宽度，默认 `750`

**Returns:** 实际像素值（number）

**Example:**

```typescript
import { px2px } from '@sohu-bpd/utils'

// 假设当前屏幕宽度为 375px
px2px(100) // 50
px2px(750) // 375

// 基于 375px 设计稿
px2px(100, 375) // 100
```

## TypeScript Support

This package is written in TypeScript and includes type definitions out of the box.

```typescript
import type { } from '@sohu-bpd/utils'

// All functions are fully typed
const vwValue: string = px2vw(100)
const pxValue: number = px2px(100)
```

## Bundle Formats

- **ESM** (`.mjs`) - Modern JavaScript modules
- **CommonJS** (`.js`) - Node.js and bundlers
- **IIFE** (`.global.js`) - Browser `<script>` tag with global `SohuUtils`

## Changelog

### 0.0.2 (2026-01-29)

- Initial release with `px2vw` and `px2px` utilities
- Full TypeScript support
- Comprehensive unit tests and E2E tests
- Multiple bundle formats (ESM, CJS, IIFE)

## License

MIT
npm package: @soil-spoon/design-system
Description: Design system maintained and used by [WorkOS](https://workos.com).
Latest version: 1.2.0

Design system maintained and used by [WorkOS](https://workos.com).

Built with [Stitches](https://github.com/stitchesjs/stitches) and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).