jss-default-unit - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

dist/jss-default-unit.js

@@ -64,5 +64,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	var _ignoreProps = __webpack_require__(1);
+	var _defaultUnits = __webpack_require__(1);
 
-	var _ignoreProps2 = _interopRequireDefault(_ignoreProps);
+	var _defaultUnits2 = _interopRequireDefault(_defaultUnits);
 
@@ -110,4 +110,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	function addUnit(prop, value, options) {
-	  if (!_ignoreProps2.default[prop] && typeof value == 'number' && value !== 0) {
-	    value += options.unit;
+	  if (typeof value == 'number' && value !== 0) {
+	    value += options[prop] || _defaultUnits2.default[prop] || '';
 	  }
@@ -124,3 +124,3 @@ return value;
 	function defaultUnit() {
-	  var options = arguments.length <= 0 || arguments[0] === undefined ? { unit: 'px' } : arguments[0];
+	  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
@@ -147,44 +147,100 @@ return function (rule) {
 	});
-	// Don't automatically add unit to these properties.
+	/**
+	 * Generated jss-default-unit CSS property units
+	 * @object
+	 */
 	exports.default = {
-	  // Numeric values.
-	  'animation-iteration-count': true,
-	  'border-image-outset': true,
-	  'border-image-slice': true,
-	  'border-image-width': true,
-	  'box-flex': true,
-	  'box-flex-group': true,
-	  'box-ordinal-group': true,
-	  'column-count': true,
-	  flex: true,
-	  'flex-grow': true,
-	  'flex-positive': true,
-	  'flex-shrink': true,
-	  'flex-negative': true,
-	  'flex-order': true,
-	  'font-weight': true,
-	  'grid-row': true,
-	  'grid-column': true,
-	  'line-clamp': true,
-	  'line-height': true,
-	  opacity: true,
-	  order: true,
-	  orphans: true,
-	  'tab-size': true,
-	  widows: true,
-	  'z-index': true,
-	  zoom: true,
-
-	  // SVG properties
-	  'fill-opacity': true,
-	  'flood-opacity': true,
-	  'stop-opacity': true,
-	  'stroke-dasharray': true,
-	  'stroke-dashoffset': true,
-	  'stroke-miterlimit': true,
-	  'stroke-opacity': true,
-	  'stroke-width': true,
-
-	  // Non-sizes
-	  'animation-duration': true
+	  'animation-delay': 'ms',
+	  'animation-duration': 'ms',
+	  'background-position-x': 'px',
+	  'background-position-y': 'px',
+	  'background-size': 'px',
+	  border: 'px',
+	  'border-bottom': 'px',
+	  'border-bottom-left-radius': 'px',
+	  'border-bottom-right-radius': 'px',
+	  'border-bottom-width': 'px',
+	  'border-left': 'px',
+	  'border-left-width': 'px',
+	  'border-radius': 'px',
+	  'border-right': 'px',
+	  'border-right-width': 'px',
+	  'border-spacing': 'px',
+	  'border-top': 'px',
+	  'border-top-left-radius': 'px',
+	  'border-top-right-radius': 'px',
+	  'border-top-width': 'px',
+	  'border-width': 'px',
+	  'border-after-width': 'px',
+	  'border-before-width': 'px',
+	  'border-end-width': 'px',
+	  'border-horizontal-spacing': 'px',
+	  'border-start-width': 'px',
+	  'border-vertical-spacing': 'px',
+	  bottom: 'px',
+	  'column-gap': 'px',
+	  'column-rule': 'px',
+	  'column-rule-width': 'px',
+	  'column-width': 'px',
+	  'flex-basis': 'px',
+	  'font-size': 'px',
+	  'font-size-delta': 'px',
+	  height: 'px',
+	  left: 'px',
+	  'letter-spacing': 'px',
+	  'logical-height': 'px',
+	  'logical-width': 'px',
+	  margin: 'px',
+	  'margin-after': 'px',
+	  'margin-before': 'px',
+	  'margin-bottom': 'px',
+	  'margin-left': 'px',
+	  'margin-right': 'px',
+	  'margin-top': 'px',
+	  'max-height': 'px',
+	  'max-width': 'px',
+	  'margin-end': 'px',
+	  'margin-start': 'px',
+	  'mask-position-x': 'px',
+	  'mask-position-y': 'px',
+	  'mask-size': 'px',
+	  'max-logical-height': 'px',
+	  'max-logical-width': 'px',
+	  'min-height': 'px',
+	  'min-width': 'px',
+	  'min-logical-height': 'px',
+	  'min-logical-width': 'px',
+	  motion: 'px',
+	  'motion-offset': 'px',
+	  outline: 'px',
+	  'outline-offset': 'px',
+	  'outline-width': 'px',
+	  padding: 'px',
+	  'padding-bottom': 'px',
+	  'padding-left': 'px',
+	  'padding-right': 'px',
+	  'padding-top': 'px',
+	  'padding-after': 'px',
+	  'padding-before': 'px',
+	  'padding-end': 'px',
+	  'padding-start': 'px',
+	  'perspective-origin-x': '%',
+	  'perspective-origin-y': '%',
+	  perspective: 'px',
+	  right: 'px',
+	  'shape-margin': 'px',
+	  size: 'px',
+	  'text-indent': 'px',
+	  'text-stroke': 'px',
+	  'text-stroke-width': 'px',
+	  top: 'px',
+	  'transform-origin': '%',
+	  'transform-origin-x': '%',
+	  'transform-origin-y': '%',
+	  'transform-origin-z': '%',
+	  'transition-delay': 'ms',
+	  'transition-duration': 'ms',
+	  'vertical-align': 'px',
+	  width: 'px',
+	  'word-spacing': 'px'
 	};
@@ -191,0 +247,0 @@

dist/jss-default-unit.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssDefaultUnit=t():e.jssDefaultUnit=t()}(this,function(){return function(e){function t(r){if(o[r])return o[r].exports;var i=o[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t,o){var r=t;switch(t.constructor){case Object:for(var a in t)t[a]=i(a,t[a],o);break;case Array:for(var u=0;u<t.length;u++)t[u]=i(e,t[u],o);break;case Number:r=n(e,t,o)}return r}function n(e,t,o){return f["default"][e]||"number"!=typeof t||0===t||(t+=o.unit),t}function a(){var e=arguments.length<=0||void 0===arguments[0]?{unit:"px"}:arguments[0];return function(t){var o=t.style,r=t.type;if(o&&"regular"===r)for(var n in o)o[n]=i(n,o[n],e)}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=o(1),f=r(u)},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={"animation-iteration-count":!0,"border-image-outset":!0,"border-image-slice":!0,"border-image-width":!0,"box-flex":!0,"box-flex-group":!0,"box-ordinal-group":!0,"column-count":!0,flex:!0,"flex-grow":!0,"flex-positive":!0,"flex-shrink":!0,"flex-negative":!0,"flex-order":!0,"font-weight":!0,"grid-row":!0,"grid-column":!0,"line-clamp":!0,"line-height":!0,opacity:!0,order:!0,orphans:!0,"tab-size":!0,widows:!0,"z-index":!0,zoom:!0,"fill-opacity":!0,"flood-opacity":!0,"stop-opacity":!0,"stroke-dasharray":!0,"stroke-dashoffset":!0,"stroke-miterlimit":!0,"stroke-opacity":!0,"stroke-width":!0,"animation-duration":!0}}])});
+!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports.jssDefaultUnit=r():t.jssDefaultUnit=r()}(this,function(){return function(t){function r(i){if(e[i])return e[i].exports;var o=e[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,r),o.loaded=!0,o.exports}var e={};return r.m=t,r.c=e,r.p="",r(0)}([function(t,r,e){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function o(t,r,e){var i=r;switch(r.constructor){case Object:for(var n in r)r[n]=o(n,r[n],e);break;case Array:for(var x=0;x<r.length;x++)r[x]=o(t,r[x],e);break;case Number:i=p(t,r,e)}return i}function p(t,r,e){return"number"==typeof r&&0!==r&&(r+=e[t]||a["default"][t]||""),r}function n(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return function(r){var e=r.style,i=r.type;if(e&&"regular"===i)for(var p in e)e[p]=o(p,e[p],t)}}Object.defineProperty(r,"__esModule",{value:!0}),r["default"]=n;var x=e(1),a=i(x)},function(t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r["default"]={"animation-delay":"ms","animation-duration":"ms","background-position-x":"px","background-position-y":"px","background-size":"px",border:"px","border-bottom":"px","border-bottom-left-radius":"px","border-bottom-right-radius":"px","border-bottom-width":"px","border-left":"px","border-left-width":"px","border-radius":"px","border-right":"px","border-right-width":"px","border-spacing":"px","border-top":"px","border-top-left-radius":"px","border-top-right-radius":"px","border-top-width":"px","border-width":"px","border-after-width":"px","border-before-width":"px","border-end-width":"px","border-horizontal-spacing":"px","border-start-width":"px","border-vertical-spacing":"px",bottom:"px","column-gap":"px","column-rule":"px","column-rule-width":"px","column-width":"px","flex-basis":"px","font-size":"px","font-size-delta":"px",height:"px",left:"px","letter-spacing":"px","logical-height":"px","logical-width":"px",margin:"px","margin-after":"px","margin-before":"px","margin-bottom":"px","margin-left":"px","margin-right":"px","margin-top":"px","max-height":"px","max-width":"px","margin-end":"px","margin-start":"px","mask-position-x":"px","mask-position-y":"px","mask-size":"px","max-logical-height":"px","max-logical-width":"px","min-height":"px","min-width":"px","min-logical-height":"px","min-logical-width":"px",motion:"px","motion-offset":"px",outline:"px","outline-offset":"px","outline-width":"px",padding:"px","padding-bottom":"px","padding-left":"px","padding-right":"px","padding-top":"px","padding-after":"px","padding-before":"px","padding-end":"px","padding-start":"px","perspective-origin-x":"%","perspective-origin-y":"%",perspective:"px",right:"px","shape-margin":"px",size:"px","text-indent":"px","text-stroke":"px","text-stroke-width":"px",top:"px","transform-origin":"%","transform-origin-x":"%","transform-origin-y":"%","transform-origin-z":"%","transition-delay":"ms","transition-duration":"ms","vertical-align":"px",width:"px","word-spacing":"px"}}])});

history.md

@@ -0,1 +1,7 @@
+## 4.0.0 / 2016-07-26
+
+- Now all values can be expressed without a unit #272
+- Removed option "unit", default units need to be set individually for different props.
+- Properties containing 'origin' (except for mask-origin) now get % as a default unit.
+
 ## 3.0.1 / 2016-07-16
@@ -2,0 +8,0 @@

lib/index.js

@@ -8,5 +8,5 @@ 'use strict';
 
-var _ignoreProps = require('./ignoreProps');
+var _defaultUnits = require('./defaultUnits');
 
-var _ignoreProps2 = _interopRequireDefault(_ignoreProps);
+var _defaultUnits2 = _interopRequireDefault(_defaultUnits);
 
@@ -54,4 +54,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function addUnit(prop, value, options) {
-  if (!_ignoreProps2.default[prop] && typeof value == 'number' && value !== 0) {
-    value += options.unit;
+  if (typeof value == 'number' && value !== 0) {
+    value += options[prop] || _defaultUnits2.default[prop] || '';
   }
@@ -68,3 +68,3 @@ return value;
 function defaultUnit() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? { unit: 'px' } : arguments[0];
+  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
@@ -71,0 +71,0 @@ return function (rule) {

package.json

 {
   "name": "jss-default-unit",
   "description": "JSS plugin that adds default custom unit to numeric values where needed",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

readme.md

 ![JSS logo](https://avatars1.githubusercontent.com/u/9503099?v=3&s=60)
 
-## JSS plugin that adds default custom unit to numeric values where needed
+## JSS plugin that adds units to numeric values
 
-This plugin lets you omit the unit from values of style properties. Default unit is "px", but you can pass anything else instead.
+Provide plain numeric values in your JSS style definitions, and the plugin will insert the apposite units. Defaults to `px` for sizes, `ms` for durations, and `%` for transform origins, and these can be customized easily (see Usage Example).
 
@@ -19,32 +19,36 @@ [Demo](http://jsstyles.github.io/examples/index.html#plugin-jss-default-unit) -
 
-// px is default, lets make default to em
-jss.use(defaultUnit({unit: 'em'}))
+// Optionally customize default units.
+const options = {
+  'line-height': 'rem',
+  'font-size': 'rem'
+}
 
-let sheet = jss.createStyleSheet({
+jss.use(defaultUnit(options))
+
+// Define styles.
+const styles = {
   container: {
-    'font-size': 20,
-    'z-index': 1,
-    'line-height': 1.2
+    'line-height': 3,
+    'font-size': 1.7,
+    'height': 200,
+    'z-index': 1
   }
-})
-```
+}
 
-```javascript
+let sheet = jss.createStyleSheet(styles)
+
 console.log(sheet.toString())
 ```
+
+Generates the following stylesheet:
+
 ```css
-.jss-0-0 {
-  font-size: 20em;
+.container-0-0 {
+  line-height: 3rem;
+  font-size: 1.7rem;
+  height: 200px;
   z-index: 1;
-  line-height: 1.2;
 }
 ```
 
-```javascript
-console.log(sheet.classes)
-```
-```javascript
-{ container: "jss-0-0" }
-```
-
 ## Issues
@@ -51,0 +55,0 @@

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

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

Improved metrics

Total package byte prevSize

23467

increased by25.58%

Lines of code

508

increased by29.59%

Number of lines in readme file

67

increased by6.35%

No dependency changes