fp-units - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

lib/index.js

@@ -7,12 +7,12 @@ 'use strict';
 
-var _parse = require('./parse');
+var _convert = require('./convert');
 
-Object.defineProperty(exports, 'parse', {
+Object.defineProperty(exports, 'convert', {
   enumerable: true,
   get: function get() {
-    return _parse.parse;
+    return _interopRequireDefault(_convert).default;
   }
 });
 
-var _to = require('./to');
+var _converter = require('./converter');
 
@@ -22,10 +22,6 @@ Object.defineProperty(exports, 'converter', {
   get: function get() {
-    return _to.converter;
+    return _interopRequireDefault(_converter).default;
   }
 });
-Object.defineProperty(exports, 'to', {
-  enumerable: true,
-  get: function get() {
-    return _to.to;
-  }
-});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "fp-units",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "An FP-oriented library to easily convert CSS units.",
@@ -16,2 +16,3 @@ "main": "lib/index.js",
   "keywords": [
+    "css",
     "css-units",
@@ -21,6 +22,9 @@ "units",
     "fp",
-    "functional-programming"
+    "functional",
+    "functional-programming",
+    "calc"
   ],
   "license": "MIT",
   "dependencies": {
+    "css-tree": "^1.0.0-alpha19",
     "ramda": "^0.23.0"
@@ -32,15 +36,16 @@ },
     "babel-jest": "^19.0.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-plugin-ramda": "^1.2.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-es2017": "^6.24.1",
-    "cross-env": "^4.0.0",
     "documentation": "^4.0.0-beta.19",
-    "flow-bin": "^0.43.1",
+    "flow-bin": "^0.45.0",
     "jest": "^19.0.2",
     "path": "^0.12.7",
     "rimraf": "^2.6.1",
-    "webpack": "^2.3.3"
+    "webpack": "^2.3.3",
+    "webpack-bundle-analyzer": "^2.4.0"
   },
@@ -50,19 +55,17 @@ "scripts": {
     "docs": "documentation readme src/index.js --section=API",
-    "build": "npm run build:commonjs && npm run build:umd && npm run build:umd:min",
-    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --ignore __tests__ --out-dir lib",
-    "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js dist/fp-units.umd.js",
-    "build:umd:min": "cross-env BABEL_ENV=commonjs NODE_ENV=production webpack src/index.js dist/fp-units.umd.min.js",
+    "build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
+    "build:lib": "babel src --ignore *.spec.js --out-dir lib",
+    "build:umd": "webpack src/index.js dist/fp-units.js",
+    "build:umd:min": "webpack -p src/index.js dist/fp-units.min.js",
     "clean": "rimraf lib dist coverage",
-    "lint": "npm run lint:flow",
-    "lint:flow": "flow check || exit 0",
+    "flow": "flow check",
     "preversion": "npm test",
     "postversion": "git push && git push --tags",
-    "prepublish": "npm run lint && npm test && npm run build",
+    "prepublish": "npm run flow && npm test && npm run build",
     "postpublish": "npm run clean"
   },
   "jest": {
-    "testMatch": [
-      "**/__tests__/**"
-    ]
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true
   }
 }

README.md

 # fp-units
 
-An FP-oriented library to easily convert CSS units. Provides some convenient curried functions to parse and convert every CSS units available in the spec.
+An FP-oriented library to easily convert CSS units. Provides some convenient curried functions to convert any CSS units available in the spec.
 
+[![Build Status](https://img.shields.io/travis/anthonydugois/fp-units.svg)](https://travis-ci.org/anthonydugois/fp-units)
+[![Codecov](https://img.shields.io/codecov/c/github/anthonydugois/fp-units.svg)](https://codecov.io/gh/anthonydugois/fp-units)
+
 1.  [Installation](#installation)
@@ -16,9 +19,18 @@ 2.  [Basic usage](#basic-usage)
 
-### Absolut units
+### Absolute units
 
 ```js
-import { to } from 'fp-units'
+import { converter } from 'fp-units'
 
-to('px', '100px 2cm 15mm 4q 4in 30pc 24pt')
-// [100, 75.59055, 56.69291, 3.77953, 384, 480, 32]
+converter({}, 'px', '100px 2cm 15mm 4q 4in 30pc 24pt')
+// [[100, 75.59055, 56.69291, 3.77953, 384, 480, 32]]
+
+converter({}, 'px', [30, '4px 8px', '2cm'])
+// [[30], [4, 8], [75.59055]]
+
+converter({}, 'px', 30)
+// [[30]]
+
+converter({}, 'px', 'calc(2 * calc(12px + 3px))')
+// [[30]]
 ```
@@ -28,21 +40,15 @@
 
-In order to be able to do conversions between relative units, **fp-units** needs to know some values to perform calculus. For example, to convert `px` into `%`, you have to provide a fixed size to let **fp-units** know on what constant coefficient it should base the converter. In a browser environment, **fp-units** is able to guess the majority of the configuration object by itself: in most cases, you'll just have to provide the `root` and the `element` properties.
+In order to be able to do conversions between relative units, **fp-units** needs to know some values to perform calculus. For example, to convert `px` into `%`, you have to provide a fixed size to let **fp-units** know on what constant coefficient it should base the converter.
 
+In a browser environment, **fp-units** is able to guess the majority of the configuration object by itself: in most cases, you'll just have to provide the `node` property. For more advanced config, please see the [config object](#config-object) below.
+
 ```js
 import { converter } from 'fp-units'
 
-const config = {
-  viewportWidth: window.innerWidth, // width of the viewport (vw, vmin, vmax)
-  viewportHeight: window.innerHeight, // height of the viewport (vh, vmin, vmax)
-  root: document.documentElement, // the root element (rem, rlh)
-  element: document.querySelector('#foobar'), // the element (em, lh, %)
-  rootFontSize: 16, // a custom root font size, overrides the font-size value of the root element (rem)
-  rootLineHeight: 16, // a custom root line height, overrides the line-height value of the root element (rlh)
-  fontSize: 16, // a custom font size, overrides the font-size value of the element (em)
-  lineHeight: 16, // a custom line height, overrides the line-height value of the element (lh)
-  size: 200, // a custom size, overrides the width value of the element (%)
-}
-
-converter(config, 'px', '2rem 4em 2rlh 4lh 50% 25vw 40vh 5vmin 10vmax')
-// [32, 96, 32, 104, 50, 480, 432, 54, 192]
+converter(
+  { node: document.querySelector('#foobar') },
+  'px',
+  '2rem 4em 2rlh 4lh 50% 25vw 40vh 5vmin 10vmax',
+)
+// [[32, 96, 32, 104, 50, 480, 432, 54, 192]]
 ```
@@ -62,2 +68,39 @@
 
+### Config object
+
+All properties are optional.
+
+```js
+const config = {
+  // used to convert vw, vh, vmin, vmax
+  window: window,
+  // fallback
+  window: {
+    innerWidth: 0,
+    innerHeight: 0,
+  },
+
+  // used to convert rem, rlh
+  document: document,
+  // fallback
+  document: {
+    lineHeight: 16,
+    fontSize: 16,
+  },
+
+  // used to convert em, lh, %
+  node: document.querySelector('#foobar'),
+  // fallback
+  node: {
+    lineHeight: 16,
+    fontSize: 16,
+    width: 0, // must match `property` below
+  },
+
+  // specify the style property to look for in `node`
+  // used to convert %
+  property: 'width',
+}
+```
+
 ## Supported units
@@ -91,11 +134,14 @@
 
-### parse
+### convert
 
-Parses a string and returns a list of [value, unit] pairs.
+Naively converts a numeric value into the desired unit. This function is more granular than `converter`, but it does not handle automatic parsing, calc expressions and multiple conversions. This function is more useful when you need specialized converters.
 
-Type: Parse
+The config object allows you to adjust some parameters used to perform relative units conversions (e.g. `rem` or `%`).
 
 **Parameters**
 
--   `str` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The string to parse.
+-   `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** The config object.
+-   `unit` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The desired unit.
+-   `from` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The base unit.
+-   `value` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** The value to convert.
 
@@ -105,15 +151,27 @@ **Examples**
 ```javascript
-import { parse } from 'fp-units'
+import { convert } from 'fp-units'
 
-parse('1px 3.054e-2em 50% 10')
-// [[1, 'px'], [3.054e-2, 'em'], [50, '%'], [10, '']]
+convert({}, 'rem', 'px', 32)
+// 2
+
+convert({}, 'deg', 'rad', Math.PI)
+// 180
+
+// Note: you can take advantage of automatic currying to have your own conversion API!
+const rad2deg = convert({}, 'deg', 'rad')
+
+rad2deg(Math.PI)
+// 180
+
+rad2deg(Math.PI / 4)
+// 45
 ```
 
-Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number))>>**
+Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 
 
 ### converter
 
-Creates a conversion function. The config allows you to adjust the parameters used to make conversions of relative units like rem or %.
+Smartly converts the provided values into the desired unit. You can convert numbers, strings and calc expressions.
 
-Type: Converter
+Note: if the provided values don't have any unit, it will assume that they are expressed in the canonical unit corresponding to the nature of the desired unit (e.g. `px` if the desired unit is a length).
 
@@ -124,3 +182,3 @@ **Parameters**
 -   `unit` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The desired unit.
--   `str` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** A string of values and units to convert.
+-   `values` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) \| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number))>)** The values and units to convert.
 
@@ -133,33 +191,19 @@ **Examples**
 const to = converter({
-  root: document.documentElement,
-  element: document.querySelector('#foobar'),
+  node: document.querySelector('#foobar'),
 })
 
-to('px', '2rem 4em 2rlh 4lh 50% 25vw 40vh 5vmin 10vmax')
-// [32, 96, 32, 104, 50, 480, 432, 54, 192]
-```
+to('px', '30 2rem 4em 2rlh 4lh 50% 25vw 40vh 5vmin 10vmax')
+// [[30, 32, 96, 32, 104, 50, 480, 432, 54, 192]]
 
-Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>**
+to('px', [30, '2rem 4px', '4em'])
+// [[30], [32, 4], [96]]
 
-### to
+to('rem', 32)
+// [[2]]
 
-Converts CSS units. This function is a shortcut to bypass config (convenient if you don't need to convert relative units).
-
-Type: To
-
-**Parameters**
-
--   `unit` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The desired unit.
--   `str` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** A string of values and units to convert.
-
-**Examples**
-
-```javascript
-import { to } from 'fp-units'
-
-to('px', '100px 2cm 15mm 4q 4in 30pc 24pt')
-// [100, 75.59055, 56.69291, 3.77953, 384, 480, 32]
+to('rem', 'calc(2 * calc(12px + 4px))')
+// [[2]]
 ```
 
-Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>**
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>>** 
 
@@ -166,0 +210,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

679091

increased by525.48%

Number of package files

18

increased by80%

Lines of code

13317

increased by472.28%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

206

increased by27.16%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

17

increased by6.25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcss-tree@^1.0.0-alpha19

• + Addedcss-tree@1.1.3(transitive)

• + Addedmdn-data@2.0.14(transitive)

• + Addedsource-map@0.6.1(transitive)