{"id":19364,"library":"babel-runtime-jsx-style-transform","title":"babel-runtime-jsx-style-transform","description":"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.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/Yurisa/babel-runtime-jsx-style-transform","tags":["javascript","babel","runtime","jsx"],"install":[{"cmd":"npm install babel-runtime-jsx-style-transform","lang":"bash","label":"npm"},{"cmd":"yarn add babel-runtime-jsx-style-transform","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-runtime-jsx-style-transform","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export only; no default export.","wrong":"import px2vw from 'babel-runtime-jsx-style-transform'","symbol":"px2vw","correct":"import { px2vw } from 'babel-runtime-jsx-style-transform'"},{"note":"Function name is all lowercase 'px2vw4style' (not camelCase).","wrong":"import { px2vw4Style } from 'babel-runtime-jsx-style-transform'","symbol":"px2vw4style","correct":"import { px2vw4style } from 'babel-runtime-jsx-style-transform'"},{"note":"This package provides no default export. Must use named imports.","wrong":"import babelRuntime from 'babel-runtime-jsx-style-transform'","symbol":"default import (wrong)","correct":"import { px2vw } from 'babel-runtime-jsx-style-transform'"}],"quickstart":{"code":"import { px2vw, px2vw4style } from 'babel-runtime-jsx-style-transform';\n\n// Example: Convert a single property value\nconst originalValue = '100px';\nconst converted = px2vw(originalValue); // e.g., '13.88888888888889vw' (based on default viewport width 720px)\nconsole.log(converted);\n\n// Example: Convert an entire style object\nconst styleObject = {\n  width: '100px',\n  height: '200px',\n  fontSize: '16px'\n};\nconst convertedStyle = px2vw4style(styleObject); // converts all numeric px values to vw\nconsole.log(convertedStyle);\n// Output: { width: '13.88888888888889vw', height: '27.77777777777778vw', fontSize: '2.2222222222222223vw' }","lang":"javascript","description":"Demonstrates both px2vw and px2vw4style imports and usage for runtime conversion of px values to vw."},"warnings":[{"fix":"There is no configuration option. Manually adjust or fork the package.","message":"Default viewport width used for calculation is 720px. If your design is based on a different viewport width, values will be incorrect.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all style values that need conversion are explicitly in px format.","message":"Function only converts values that end with 'px'. Values with other units or no unit are left unchanged.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Create a .d.ts file declaring module and exporting function types.","message":"No TypeScript type definitions shipped. Using with TypeScript may require custom type declarations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider build-time alternatives like postcss-px-to-viewport or style-vh-loader.","message":"Package has only one release (1.0.2) and appears unmaintained. Use at your own risk.","severity":"gotcha","affected_versions":"1.0.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change import to: import { px2vw } from 'babel-runtime-jsx-style-transform'","cause":"Using default import instead of named import.","error":"Uncaught TypeError: px2vw is not a function"},{"fix":"Use exact function name: px2vw4style (all lowercase).","cause":"Misspelled function name (e.g., px2vw4Style with capital S).","error":"Uncaught ReferenceError: px2vw4style is not defined"},{"fix":"Run: npm install babel-runtime-jsx-style-transform","cause":"Package not installed or not listed in dependencies.","error":"Module not found: Can't resolve 'babel-runtime-jsx-style-transform'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}