Registry / web-framework / babel-runtime-jsx-style-transform

babel-runtime-jsx-style-transform

JSON →
library1.0.2jsnpmunverified

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.

npm install babel-runtime-jsx-style-transform
INSTALL
IMPORT
SIG · BABEL-RUNTIME-JSX-
B
babel-runtime-jsx-style-transform
web-frameworkjavascriptv1.0.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

px2vw
import { px2vw } from 'babel-runtime-jsx-style-transform'
import px2vw from 'babel-runtime-jsx-style-transform'
Named export only; no default export.
px2vw4style
import { px2vw4style } from 'babel-runtime-jsx-style-transform'
import { px2vw4Style } from 'babel-runtime-jsx-style-transform'
Function name is all lowercase 'px2vw4style' (not camelCase).
default import (wrong)
import { px2vw } from 'babel-runtime-jsx-style-transform'
import babelRuntime from 'babel-runtime-jsx-style-transform'
This package provides no default export. Must use named imports.

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' }
Debug
Known issues
gotchaDefault 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.
affects: >=1.0.0
gotchaFunction 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.
affects: >=1.0.0
gotchaNo TypeScript type definitions shipped. Using with TypeScript may require custom type declarations.
fix
Create a .d.ts file declaring module and exporting function types.
affects: >=1.0.0
gotchaPackage 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.
affects: 1.0.2
Errors
Common errors & fixes
Uncaught TypeError: px2vw is not a function
Using default import instead of named import.
fix
Change import to: import { px2vw } from 'babel-runtime-jsx-style-transform'
Uncaught ReferenceError: px2vw4style is not defined
Misspelled function name (e.g., px2vw4Style with capital S).
fix
Use exact function name: px2vw4style (all lowercase).
Module not found: Can't resolve 'babel-runtime-jsx-style-transform'
Package not installed or not listed in dependencies.
fix
Run: npm install babel-runtime-jsx-style-transform
Upgrade
Version history
1.0.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
babel-runtime-jsx-style-transform — npm install babel-runtime-jsx-style-transform · libregistry