Use CSSTOM in default unit plugin (#893)

* Added support for using CSSTOM in default unit plugin * Support grid properties in default unit * - Move hasCSSTOMSupport into core - Improve default unit selection * - Move hasCSSTOMSupport into core - Improve default unit selection * Update size-snapshots
cssinjs · Oct 17, 2018 · 2c87a93 · 2c87a93
1 parent 82dbfff
commit 2c87a93
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 163 deletions.
diff --git a/flow-typed/css.js b/flow-typed/css.js
@@ -0,0 +1,8 @@
+interface CSSOM {
+  px(val: number | string): {};
+  percent(val: number | string): {};
+  ms(val: number | string): {};
+  number(val: number | string): {};
+}
+
+declare var CSS: ?CSSOM
diff --git a/packages/jss-plugin-syntax-default-unit/.size-snapshot.json b/packages/jss-plugin-syntax-default-unit/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "dist/jss-plugin-syntax-default-unit.js": {
-    "bundled": 5560,
-    "minified": 3116,
-    "gzipped": 1037
+    "bundled": 5874,
+    "minified": 2738,
+    "gzipped": 1051
   },
   "dist/jss-plugin-syntax-default-unit.min.js": {
-    "bundled": 5560,
-    "minified": 3116,
-    "gzipped": 1037
+    "bundled": 5874,
+    "minified": 2738,
+    "gzipped": 1051
   },
   "dist/jss-plugin-syntax-default-unit.cjs.js": {
-    "bundled": 4908,
-    "minified": 3088,
-    "gzipped": 991
+    "bundled": 5183,
+    "minified": 2843,
+    "gzipped": 1020
   },
   "dist/jss-plugin-syntax-default-unit.esm.js": {
-    "bundled": 4826,
-    "minified": 3019,
-    "gzipped": 938,
+    "bundled": 5103,
+    "minified": 2777,
+    "gzipped": 965,
     "treeshaked": {
       "rollup": {
-        "code": 2347,
-        "import_statements": 0
+        "code": 1871,
+        "import_statements": 39
       },
       "webpack": {
-        "code": 3309
+        "code": 2892
       }
     }
   }

diff --git a/packages/jss-plugin-syntax-default-unit/src/defaultUnits.js b/packages/jss-plugin-syntax-default-unit/src/defaultUnits.js
@@ -1,114 +1,146 @@
 // @flow
+
+import {hasCSSTOMSupport} from 'jss'
+
+const px = hasCSSTOMSupport ? window.CSS.px : 'px'
+const ms = hasCSSTOMSupport ? window.CSS.ms : 'ms'
+const percent = hasCSSTOMSupport ? window.CSS.percent : '%'
+
 /**
  * Generated jss-plugin-syntax-default-unit CSS property units
  *
  * @type object
  */
 export default {
-  'animation-delay': 'ms',
-  'animation-duration': 'ms',
-  'background-position': 'px',
-  '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',
-  'box-shadow': 'px',
-  'text-shadow': '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',
+  // Animation properties
+  'animation-delay': ms,
+  'animation-duration': ms,
+
+  // Background properties
+  'background-position': px,
+  'background-position-x': px,
+  'background-position-y': px,
+  'background-size': px,
+
+  // Border Properties
+  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-top': px,
+  'border-top-left-radius': px,
+  'border-top-right-radius': px,
+  'border-top-width': px,
+  'border-width': px,
+
+  // Margin properties
+  margin: px,
+  'margin-bottom': px,
+  'margin-left': px,
+  'margin-right': px,
+  'margin-top': px,
+
+  // Padding properties
+  padding: px,
+  'padding-bottom': px,
+  'padding-left': px,
+  'padding-right': px,
+  'padding-top': px,
+
+  // Mask properties
+  'mask-position-x': px,
+  'mask-position-y': px,
+  'mask-size': px,
+
+  // Width and height properties
+  height: px,
+  width: px,
+  'min-height': px,
+  'max-height': px,
+  'min-width': px,
+  'max-width': px,
+
+  // Position properties
+  bottom: px,
+  left: px,
+  top: px,
+  right: px,
+
+  // Shadow properties
+  'box-shadow': px,
+  'text-shadow': px,
+
+  // Column properties
+  'column-gap': px,
+  'column-rule': px,
+  'column-rule-width': px,
+  'column-width': px,
+
+  // Font and text properties
+  'font-size': px,
+  'font-size-delta': px,
+  'letter-spacing': px,
+  'text-indent': px,
+  'text-stroke': px,
+  'text-stroke-width': px,
+  'word-spacing': px,
+
+  // Motion properties
+  motion: px,
+  'motion-offset': px,
+
+  // Outline properties
+  outline: px,
+  'outline-offset': px,
+  'outline-width': px,
+
+  // Perspective properties
+  perspective: px,
+  'perspective-origin-x': percent,
+  'perspective-origin-y': percent,
+
+  // Transform properties
+  'transform-origin': percent,
+  'transform-origin-x': percent,
+  'transform-origin-y': percent,
+  'transform-origin-z': percent,
+
+  // Transition properties
+  'transition-delay': ms,
+  'transition-duration': ms,
+
+  // Alignment properties
+  'vertical-align': px,
+  'flex-basis': px,
+
+  // Some random properties
+  'shape-margin': px,
+  size: px,
+
+  // Grid properties
+  grid: px,
+  'grid-gap': px,
+  'grid-row-gap': px,
+  'grid-column-gap': px,
+  'grid-template-rows': px,
+  'grid-template-columns': px,
+  'grid-auto-rows': px,
+  'grid-auto-columns': px,
+
   // Not existing properties.
   // Used to avoid issues with jss-expand integration.
-  'box-shadow-x': 'px',
-  'box-shadow-y': 'px',
-  'box-shadow-blur': 'px',
-  'box-shadow-spread': 'px',
-  'font-line-height': 'px',
-  'text-shadow-x': 'px',
-  'text-shadow-y': 'px',
-  'text-shadow-blur': 'px'
+  'box-shadow-x': px,
+  'box-shadow-y': px,
+  'box-shadow-blur': px,
+  'box-shadow-spread': px,
+  'font-line-height': px,
+  'text-shadow-x': px,
+  'text-shadow-y': px,
+  'text-shadow-blur': px
 }
diff --git a/packages/jss-plugin-syntax-default-unit/src/index.js b/packages/jss-plugin-syntax-default-unit/src/index.js
@@ -29,14 +29,10 @@ const units = addCamelCasedVersion(defaultUnits)
 function iterate(prop, value, options) {
   if (!value) return value
 
-  let convertedValue = value
-
   if (Array.isArray(value)) {
     for (let i = 0; i < value.length; i++) {
       value[i] = iterate(prop, value[i], options)
     }
-  } else if (typeof value === 'number' && value !== 0) {
-    convertedValue = value + (options[prop] || units[prop] || '')
   } else if (typeof value === 'object') {
     if (prop === 'fallbacks') {
       for (const innerProp in value) {
@@ -47,9 +43,21 @@ function iterate(prop, value, options) {
         value[innerProp] = iterate(`${prop}-${innerProp}`, value[innerProp], options)
       }
     }
+  } else if (typeof value === 'number') {
+    if (options[prop]) {
+      return `${value}${options[prop]}`
+    }
+
+    if (units[prop]) {
+      return typeof units[prop] === 'function'
+        ? units[prop](value).toString()
+        : `${value}${units[prop]}`
+    }
+
+    return value.toString()
   }
 
-  return convertedValue
+  return value
 }
 
 export type Options = {[key: string]: string}

diff --git a/packages/jss-preset-default/.size-snapshot.json b/packages/jss-preset-default/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 67177,
-    "minified": 23526,
-    "gzipped": 6976
+    "bundled": 67453,
+    "minified": 23133,
+    "gzipped": 6951
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 66061,
-    "minified": 23006,
-    "gzipped": 6720
+    "bundled": 66337,
+    "minified": 22613,
+    "gzipped": 6696
   },
   "dist/jss-preset-default.cjs.js": {
     "bundled": 1399,