[default-unit] Allow options to pass function transforms in (#1292)

* [default-unit] Allow options to pass function transforms in

* [default-unit] Add function option example to docs

Author: jkjustjoshing

docs/jss-plugin-default-unit.md

@@ -32,7 +32,8 @@ import defaultUnit from 'jss-plugin-default-unit'
 
 const options = {
   'line-height': 'rem',
-  'font-size': 'rem'
+  'font-size': 'rem',
+  width: val => `${val / 2}px`
 }
 
 jss.use(defaultUnit(options))
@@ -42,6 +43,7 @@ const styles = {
     'line-height': 3,
     'font-size': 1.7,
     height: 200,
+    width: 200,
     'z-index': 1
   }
 }
@@ -54,6 +56,7 @@ Compiles to:
   line-height: 3rem;
   font-size: 1.7rem;
   height: 200px;
+  width: 100px;
   z-index: 1;
 }
 ```

packages/css-jss/.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "dist/css-jss.js": {
-    "bundled": 58732,
-    "minified": 20779,
-    "gzipped": 7027
+    "bundled": 58673,
+    "minified": 20770,
+    "gzipped": 7025
   },
   "dist/css-jss.min.js": {
-    "bundled": 57681,
-    "minified": 20185,
+    "bundled": 57622,
+    "minified": 20176,
     "gzipped": 6756
   },
   "dist/css-jss.cjs.js": {

packages/jss-plugin-default-unit/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-default-unit.js": {
-    "bundled": 5701,
-    "minified": 2736,
-    "gzipped": 1054
+    "bundled": 5642,
+    "minified": 2727,
+    "gzipped": 1055
   },
   "dist/jss-plugin-default-unit.min.js": {
-    "bundled": 5701,
-    "minified": 2736,
-    "gzipped": 1054
+    "bundled": 5642,
+    "minified": 2727,
+    "gzipped": 1055
   },
   "dist/jss-plugin-default-unit.cjs.js": {
-    "bundled": 5003,
-    "minified": 2837,
-    "gzipped": 1019
+    "bundled": 4948,
+    "minified": 2816,
+    "gzipped": 1021
   },
   "dist/jss-plugin-default-unit.esm.js": {
-    "bundled": 4923,
-    "minified": 2771,
-    "gzipped": 963,
+    "bundled": 4868,
+    "minified": 2750,
+    "gzipped": 965,
     "treeshaked": {
       "rollup": {
         "code": 1865,

packages/jss-plugin-default-unit/src/index.js

@@ -2,7 +2,7 @@
 import type {Plugin} from 'jss'
 import defaultUnits from './defaultUnits'
 
-export type Options = {[key: string]: string}
+export type Options = {[key: string]: string | ((val: number) => string)}
 
 /**
  * Clones the object and adds a camel cased property version.
@@ -41,14 +41,10 @@ function iterate(prop: string, value: any, options: Options) {
       }
     }
   } else if (typeof value === 'number') {
-    if (options[prop]) {
-      return `${value}${options[prop]}`
-    }
+    const unit = options[prop] || units[prop]
 
-    if (units[prop]) {
-      return typeof units[prop] === 'function'
-        ? units[prop](value).toString()
-        : `${value}${units[prop]}`
+    if (unit) {
+      return typeof unit === 'function' ? unit(value).toString() : `${value}${unit}`
     }
 
     return value.toString()

packages/jss-plugin-default-unit/src/index.test.js

@@ -16,7 +16,7 @@ describe('jss-plugin-default-unit', () => {
   let jss
 
   beforeEach(() => {
-    jss = create(settings).use(defaultUnit({'min-width': 'pc'}))
+    jss = create(settings).use(defaultUnit({'min-width': 'pc', 'max-width': val => `${val / 2}px`}))
   })
 
   describe('unitless values', () => {
@@ -195,7 +195,8 @@ describe('jss-plugin-default-unit', () => {
     beforeEach(() => {
       sheet = jss.createStyleSheet({
         a: {
-          'min-width': 20
+          'min-width': 20,
+          'max-width': 20
         }
       })
     })
@@ -205,7 +206,7 @@ describe('jss-plugin-default-unit', () => {
     })
 
     it('should generate correct CSS', () => {
-      expect(sheet.toString()).to.be('.a-id {\n  min-width: 20pc;\n}')
+      expect(sheet.toString()).to.be('.a-id {\n  min-width: 20pc;\n  max-width: 10px;\n}')
     })
   })
 

packages/jss-preset-default/.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 55976,
-    "minified": 20013,
-    "gzipped": 6678
+    "bundled": 55917,
+    "minified": 20004,
+    "gzipped": 6675
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 54925,
-    "minified": 19419,
+    "bundled": 54866,
+    "minified": 19410,
     "gzipped": 6405
   },
   "dist/jss-preset-default.cjs.js": {

packages/jss-starter-kit/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/jss-starter-kit.js": {
-    "bundled": 71518,
-    "minified": 30055,
-    "gzipped": 9301
+    "bundled": 71459,
+    "minified": 30046,
+    "gzipped": 9300
   },
   "dist/jss-starter-kit.min.js": {
-    "bundled": 70467,
-    "minified": 29459,
-    "gzipped": 9031
+    "bundled": 70408,
+    "minified": 29450,
+    "gzipped": 9033
   },
   "dist/jss-starter-kit.cjs.js": {
     "bundled": 2592,

packages/react-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-jss.js": {
-    "bundled": 169027,
-    "minified": 58353,
-    "gzipped": 19101
+    "bundled": 168968,
+    "minified": 58341,
+    "gzipped": 19097
   },
   "dist/react-jss.min.js": {
-    "bundled": 112062,
-    "minified": 41612,
-    "gzipped": 14132
+    "bundled": 112003,
+    "minified": 41600,
+    "gzipped": 14133
   },
   "dist/react-jss.cjs.js": {
     "bundled": 25875,