Unitflip

A Javascript library for converting CSS units (e.g., px, rem, em, %) into other CSS units.

Installation

using NPM

npm install unitflip

using CDN

// ES6 Syntax
import unitFlip from "https://unpkg.com/unitflip@latest/dist/index.esm.mjs";

// Common JS
const unitFlip = require("https://unpkg.com/unitflip@latest/dist/index.cjs");

using embedded CDN

<script src="https://unpkg.com/unitflip@latest/dist/index.umd.js"></script>

Usage

import unitFlip from "unitflip";

// converts 16px to rem with default precision and props
unitFlip(16, "px", "rem"); // 1rem

// converts 16vw into px with a precision of 2 and with a viewPortWidth set to 1280
unitFlip(16, "px", "vw", 2, { viewPortWidth: 1280 }); // 1.25

Development

Running the Test

npm run test

Break Down into End to End Test

these unit test are for checking if the conversion function is returning the right conversion value.

• focus on individual functions of unitFlip.
• test cases cover common scenarios.
• Framework: Jest

import unitFlip from "unitflip";

it("should return 1", () => {
  // value, sourceUnit, targetUnit
  expect(unitFlip(16, "px", "rem")).toBe(1);
});

Running Locally

1. Clone the repository:

git clone https://github.com/zshaian/unitflip.git

2. Install dependencies:

npm install

3. Dev Mode:

npm run dev

4. Build:

npm run build

This generates a dist/ folder with the production ready files.

Contributing

Please read CONTRIBUTING for the process of submitting pull request or creating an issue.

Code of Conduct

Please read CODE OF CONDUCT for details on our code of conduct.

Built With

Versioning

SemVer for versioning. For the versions available, see the Repo Tags

License

This project is licensed under the MIT License. See the LICENSE file for more details.