babel-runtime-jsx-style-transform

1.0.2 verified Sat Apr 25 auth: no javascript

Babel runtime plugin for transforming JSX style properties from px to vw units during runtime. Current version 1.0.2, minimal release cadence. Provides two utility functions: px2vw for individual property conversion and px2vw4style for converting entire style objects. Limited documentation and niche use case compared to build-time alternatives like postcss-px-to-viewport.

Common errors

error Uncaught TypeError: px2vw is not a function ↓

cause Using default import instead of named import.

fix

Change import to: import { px2vw } from 'babel-runtime-jsx-style-transform'

error Uncaught ReferenceError: px2vw4style is not defined ↓

cause Misspelled function name (e.g., px2vw4Style with capital S).

fix

Use exact function name: px2vw4style (all lowercase).

error Module not found: Can't resolve 'babel-runtime-jsx-style-transform' ↓

cause Package not installed or not listed in dependencies.

fix

Run: npm install babel-runtime-jsx-style-transform

Warnings

gotcha Default viewport width used for calculation is 720px. If your design is based on a different viewport width, values will be incorrect. ↓

fix There is no configuration option. Manually adjust or fork the package.

gotcha Function only converts values that end with 'px'. Values with other units or no unit are left unchanged. ↓

fix Ensure all style values that need conversion are explicitly in px format.

gotcha No TypeScript type definitions shipped. Using with TypeScript may require custom type declarations. ↓

fix Create a .d.ts file declaring module and exporting function types.

gotcha Package has only one release (1.0.2) and appears unmaintained. Use at your own risk. ↓

fix Consider build-time alternatives like postcss-px-to-viewport or style-vh-loader.

Install

npm install babel-runtime-jsx-style-transform

yarn add babel-runtime-jsx-style-transform

pnpm add babel-runtime-jsx-style-transform

Imports

px2vw

wrong

import px2vw from 'babel-runtime-jsx-style-transform'

correct

import { px2vw } from 'babel-runtime-jsx-style-transform'

Named export only; no default export.

px2vw4style

wrong

import { px2vw4Style } from 'babel-runtime-jsx-style-transform'

correct

import { px2vw4style } from 'babel-runtime-jsx-style-transform'

Function name is all lowercase 'px2vw4style' (not camelCase).

default import (wrong)

wrong

import babelRuntime from 'babel-runtime-jsx-style-transform'

correct

import { px2vw } from 'babel-runtime-jsx-style-transform'

This package provides no default export. Must use named imports.

Quickstart

Demonstrates both px2vw and px2vw4style imports and usage for runtime conversion of px values to vw.

import { px2vw, px2vw4style } from 'babel-runtime-jsx-style-transform';

// Example: Convert a single property value
const originalValue = '100px';
const converted = px2vw(originalValue); // e.g., '13.88888888888889vw' (based on default viewport width 720px)
console.log(converted);

// Example: Convert an entire style object
const styleObject = {
  width: '100px',
  height: '200px',
  fontSize: '16px'
};
const convertedStyle = px2vw4style(styleObject); // converts all numeric px values to vw
console.log(convertedStyle);
// Output: { width: '13.88888888888889vw', height: '27.77777777777778vw', fontSize: '2.2222222222222223vw' }