{"id":14541,"library":"easy-css-transform-builder","title":"Easy CSS Transform Builder","description":"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.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/tsuyoshiwada/easy-css-transform-builder","tags":["javascript","css","transform","style","builder","helper","easy","typescript"],"install":[{"cmd":"npm install easy-css-transform-builder","lang":"bash","label":"npm"},{"cmd":"yarn add easy-css-transform-builder","lang":"bash","label":"yarn"},{"cmd":"pnpm add easy-css-transform-builder","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary factory function to initialize the transform builder. The package is ESM-first and ships with types, requiring named imports.","wrong":"const createCSSTransformBuilder = require('easy-css-transform-builder');","symbol":"createCSSTransformBuilder","correct":"import { createCSSTransformBuilder } from 'easy-css-transform-builder';"},{"note":"An array of all supported CSS transform property names. This is useful for introspection or validation and is exposed as a named export.","wrong":"import properties from 'easy-css-transform-builder/properties';","symbol":"properties","correct":"import { properties } from 'easy-css-transform-builder';"}],"quickstart":{"code":"import { createCSSTransformBuilder } from 'easy-css-transform-builder';\n\n// Initialize the builder, optionally setting default units.\nconst builder = createCSSTransformBuilder({\n  length: 'px', // Default for length values\n  angle: 'deg'  // Default for angle values\n});\n\n// Define your transform properties as an object.\nconst transformProperties = {\n  translateX: 30,\n  scale: 2.8,\n  rotate3d: [1, 0, 0, 60],\n  skewY: '40rad' // Units can be explicitly provided as strings\n};\n\n// Generate the CSS transform string.\nconst cssTransformString = builder(transformProperties);\n\nconsole.log(cssTransformString);\n// Expected output: translateX(30px) scale(2.8) rotate3d(1, 0, 0, 60deg) skewY(40rad)\n\n// Example of dynamic usage (e.g., in a React component's style prop)\nconst myElementStyle = {\n  transform: builder({\n    translateX: 100,\n    rotate: '45deg'\n  })\n};\n// In a real application, you'd apply myElementStyle to an element.\nconsole.log('Dynamic style transform:', myElementStyle.transform);","lang":"typescript","description":"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."},"warnings":[{"fix":"Review the `CHANGELOG.md` for updates when upgrading, and consider pinning exact package versions to avoid unexpected breaking changes.","message":"This 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Default 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure all input values conform to the expected types (number or string) and valid ranges for CSS transform properties as per MDN documentation.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use a named ESM import: `import { createCSSTransformBuilder } from 'easy-css-transform-builder';`","cause":"Attempting to use a CommonJS `require` statement for an ESM-first package or an incorrect named import.","error":"TypeError: createCSSTransformBuilder is not a function"},{"fix":"Ensure `createCSSTransformBuilder()` is called to get a builder instance before using it: `const builder = createCSSTransformBuilder();`","cause":"The `builder` instance was not initialized or is out of scope when attempting to call it.","error":"ReferenceError: builder is not defined"},{"fix":"Ensure array inputs for `translate3d` and `scale3d` have exactly 3 elements, and `rotate3d` has exactly 4 elements (x, y, z, angle).","cause":"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).","error":"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)."}],"ecosystem":"npm"}