Registry / web-framework / easy-css-transform-builder

easy-css-transform-builder

library0.1.0jsnpmunverified

easy-css-transform-builder is a JavaScript/TypeScript utility library designed to simplify the creation of complex CSS `transform` values. It enables developers to define various transform properties like `translateX`, `scale`, `rotate3d`, and `skewY` within a simple JavaScript object, which the library then serializes into a valid CSS `transform` string. The current version is 0.1.0, indicating it is in its initial release phase without an established release cadence, and it ships with TypeScript types for enhanced developer experience. Its key differentiator is its straightforward, fluent API for programmatically generating CSS transform strings, making it particularly useful for dynamic styling and animation integrations within JavaScript-driven UI frameworks, as illustrated by its usage examples.

web-framework

npm install easy-css-transform-builder

github ↗package ↗

INSTALL

IMPORT

SIG · EASY-CSS-TRANSFORM

easy-css-transform-builder

web-frameworkjavascriptv0.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

createCSSTransformBuilder

✓ import { createCSSTransformBuilder } from 'easy-css-transform-builder';

✗ const createCSSTransformBuilder = require('easy-css-transform-builder');

This is the primary factory function to initialize the transform builder. The package is ESM-first and ships with types, requiring named imports.

properties

✓ import { properties } from 'easy-css-transform-builder';

✗ import properties from 'easy-css-transform-builder/properties';

An array of all supported CSS transform property names. This is useful for introspection or validation and is exposed as a named export.

This quickstart initializes the transform builder with default units and demonstrates how to apply multiple CSS transform properties from an object into a single CSS transform string.

import { createCSSTransformBuilder } from 'easy-css-transform-builder'; // Initialize the builder, optionally setting default units. const builder = createCSSTransformBuilder({ length: 'px', // Default for length values angle: 'deg' // Default for angle values }); // Define your transform properties as an object. const transformProperties = { translateX: 30, scale: 2.8, rotate3d: [1, 0, 0, 60], skewY: '40rad' // Units can be explicitly provided as strings }; // Generate the CSS transform string. const cssTransformString = builder(transformProperties); console.log(cssTransformString); // Expected output: translateX(30px) scale(2.8) rotate3d(1, 0, 0, 60deg) skewY(40rad) // Example of dynamic usage (e.g., in a React component's style prop) const myElementStyle = { transform: builder({ translateX: 100, rotate: '45deg' }) }; // In a real application, you'd apply myElementStyle to an element. console.log('Dynamic style transform:', myElementStyle.transform);

Debug

Known issues

gotchaThis package is currently in its very early stages (v0.1.0). While functional, expect potential API changes, limited community support, and unoptimized performance as it matures.

fix

Review the `CHANGELOG.md` for updates when upgrading, and consider pinning exact package versions to avoid unexpected breaking changes.

affects: >=0.1.0

gotchaDefault units for length (`px`) and angle (`deg`) are applied to number values when not explicitly provided. Be mindful when mixing unit-less numbers with string-based unit values, as implicit units will be added to numbers.

fix

Always explicitly define units when creating the builder (`createCSSTransformBuilder({ length: 'em', angle: 'rad' })`) or provide string values with units (e.g., `translateX: '50%'`) for each property to ensure the desired CSS output.

affects: >=0.1.0

gotchaThe library does not perform extensive validation on input values for transform properties. Providing invalid types (e.g., an object instead of a number for `translateX`) or out-of-range values may lead to unexpected CSS output or runtime errors in the browser.

fix

Ensure all input values conform to the expected types (number or string) and valid ranges for CSS transform properties as per MDN documentation.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: createCSSTransformBuilder is not a function

Attempting to use a CommonJS `require` statement for an ESM-first package or an incorrect named import.

fix

Use a named ESM import: `import { createCSSTransformBuilder } from 'easy-css-transform-builder';`

ReferenceError: builder is not defined

The `builder` instance was not initialized or is out of scope when attempting to call it.

fix

Ensure `createCSSTransformBuilder()` is called to get a builder instance before using it: `const builder = createCSSTransformBuilder();`

Argument of type 'number[]' is not assignable to parameter of type '[number, number, number]' for 'translate3d' (or similar TypeScript errors for 3D transforms with incorrect array lengths).

Providing an array with an incorrect number of elements for 3D transform functions like `translate3d`, `scale3d`, or `rotate3d` (e.g., 2 elements instead of 3 or 4).

fix

Ensure array inputs for `translate3d` and `scale3d` have exactly 3 elements, and `rotate3d` has exactly 4 elements (x, y, z, angle).

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/tsuyoshiwada/easy-css-transform-builder ↗

packagehttps://www.npmjs.com/package/easy-css-transform-builder ↗