Use CSSTOM in default unit plugin

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": 9622,
+    "minified": 5037,
+    "gzipped": 1125
   },
   "dist/jss-plugin-syntax-default-unit.min.js": {
-    "bundled": 5560,
-    "minified": 3116,
-    "gzipped": 1037
+    "bundled": 9622,
+    "minified": 5037,
+    "gzipped": 1125
   },
   "dist/jss-plugin-syntax-default-unit.cjs.js": {
-    "bundled": 4908,
-    "minified": 3088,
-    "gzipped": 991
+    "bundled": 8916,
+    "minified": 6412,
+    "gzipped": 1115
   },
   "dist/jss-plugin-syntax-default-unit.esm.js": {
-    "bundled": 4826,
-    "minified": 3019,
-    "gzipped": 938,
+    "bundled": 8834,
+    "minified": 6343,
+    "gzipped": 1067,
     "treeshaked": {
       "rollup": {
-        "code": 2347,
+        "code": 4211,
         "import_statements": 0
       },
       "webpack": {
-        "code": 3309
+        "code": 5173
       }
     }
   }

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
 }

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}

packages/jss/src/index.js

@@ -47,6 +47,12 @@ export type {
   FontFaceRule
 }
 
+/**
+ * Export a constant indicating if this browser has CSSTOM support.
+ * https://developers.google.com/web/updates/2018/03/cssom
+ */
+export const hasCSSTOMSupport = Boolean(window && window.CSS && window.CSS.number)
+
 /**
  * Extracts a styles object with only rules that contain function values.
  */

packages/jss/src/utils/escape.js

@@ -1,5 +1,3 @@
-const CSS = (global.CSS: any)
-
 const env = process.env.NODE_ENV
 
 const escapeRegex = /([[\].#*$><+~=|^:(),"'`])/g

packages/jss/tests/utils.js

@@ -56,10 +56,6 @@ export function computeStyle(className) {
   return styleCopy
 }
 
-// Is true when Typed CSSOM is supported.
-// https://developers.google.com/web/updates/2018/03/cssom
-export const hasCSSTOMSupport = window.CSS && CSS.number
-
 export const createGenerateClassName = () => rule => `${rule.key}-id`
 
 // Make sure tests are isolated.