@stellaround/px-to-vw-converter

px-to-vw-converter

English | 中文

Introduction

A tool for intelligently converting pixel units (px) to viewport width units (vw), designed for minimal responsive adaptation in projects using ant-design-vue, Vue 3, and Vite.

✨ Core Features

• Automatically convert px to vw in CSS/JS
• Support for Ant Design Vue's StyleProvider style transformation
• Provide Vite plugins for inline styles and build processes
• Support custom exclusion directories and manual conversion methods

---

🚀 Quick Start

Installation

pnpm i @stellaround/px-to-vw-converter

Global Configuration

Initialize in main.ts:

import { setConfig } from '@stellaround/px-to-vw-converter'

// Defaults: viewportWidth=1920, precision=2
setConfig({
    viewportWidth: 1920,  // Design draft width (px)
    precision: 3          // Decimal precision
})

Ant Design Vue Setup

In root component:

import { transformAntdCss } from '@stellaround/px-to-vw-converter'

export default () => (
    <a-style-provider transformers={[transformAntdCss]}>
    <App />
    </a-style-provider>
)

Vite Configuration

vite.config.ts:

import { 
  vitePluginInlinePxToVw,
  vitePluginPostCssPxToViewport 
} from '@stellaround/px-to-vw-converter'

export default defineConfig({
  plugins: [
    // Handle inline styles
    vitePluginInlinePxToVw({
      excludeDirs: ['src/pages/overview'] // Excluded paths
    }),
    
    // Process CSS files
    vitePluginPostCssPxToViewport()
  ]
})

Manual Conversion

For dynamic scenarios:

import { convertPxToVw } from '@stellaround/px-to-vw-converter'

// Convert 100px to vw
const vwValue = convertPxToVw(100) // e.g. "5.128vw"

License

Apache

Copyright (c) 2024-present spectature