Use CSSTOM in default unit plugin

packages/jss-plugin-syntax-default-unit/src/defaultUnits.js

@@ -1,7 +1,10 @@
 // @flow
 
-const hasCSSTOMSupport = window.CSS && window.CSS.number
-const getDefaultUnit = (cssomFN, fallback) => (hasCSSTOMSupport ? cssomFN : fallback)
+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
@@ -10,155 +13,134 @@ const getDefaultUnit = (cssomFN, fallback) => (hasCSSTOMSupport ? cssomFN : fall
  */
 export default {
   // Animation properties
-  'animation-delay': getDefaultUnit(window.CSS.ms, 'ms'),
-  'animation-duration': getDefaultUnit(window.CSS.ms, 'ms'),
+  'animation-delay': ms,
+  'animation-duration': ms,
 
   // Background properties
-  'background-position': getDefaultUnit(window.CSS.px, 'px'),
-  'background-position-x': getDefaultUnit(window.CSS.px, 'px'),
-  'background-position-y': getDefaultUnit(window.CSS.px, 'px'),
-  'background-size': getDefaultUnit(window.CSS.px, 'px'),
+  'background-position': px,
+  'background-position-x': px,
+  'background-position-y': px,
+  'background-size': px,
 
   // Border Properties
-  border: getDefaultUnit(window.CSS.px, 'px'),
-  'border-bottom': getDefaultUnit(window.CSS.px, 'px'),
-  'border-bottom-left-radius': getDefaultUnit(window.CSS.px, 'px'),
-  'border-bottom-right-radius': getDefaultUnit(window.CSS.px, 'px'),
-  'border-bottom-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-left': getDefaultUnit(window.CSS.px, 'px'),
-  'border-left-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-radius': getDefaultUnit(window.CSS.px, 'px'),
-  'border-right': getDefaultUnit(window.CSS.px, 'px'),
-  'border-right-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-spacing': getDefaultUnit(window.CSS.px, 'px'),
-  'border-top': getDefaultUnit(window.CSS.px, 'px'),
-  'border-top-left-radius': getDefaultUnit(window.CSS.px, 'px'),
-  'border-top-right-radius': getDefaultUnit(window.CSS.px, 'px'),
-  'border-top-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-after-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-before-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-end-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-horizontal-spacing': getDefaultUnit(window.CSS.px, 'px'),
-  'border-start-width': getDefaultUnit(window.CSS.px, 'px'),
-  'border-vertical-spacing': getDefaultUnit(window.CSS.px, '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-top': px,
+  'border-top-left-radius': px,
+  'border-top-right-radius': px,
+  'border-top-width': px,
+  'border-width': px,
 
   // Margin properties
-  margin: getDefaultUnit(window.CSS.px, 'px'),
-  'margin-after': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-before': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-bottom': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-left': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-right': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-top': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-end': getDefaultUnit(window.CSS.px, 'px'),
-  'margin-start': getDefaultUnit(window.CSS.px, 'px'),
+  margin: px,
+  'margin-bottom': px,
+  'margin-left': px,
+  'margin-right': px,
+  'margin-top': px,
 
   // Padding properties
-  padding: getDefaultUnit(window.CSS.px, 'px'),
-  'padding-bottom': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-left': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-right': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-top': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-after': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-before': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-end': getDefaultUnit(window.CSS.px, 'px'),
-  'padding-start': getDefaultUnit(window.CSS.px, 'px'),
+  padding: px,
+  'padding-bottom': px,
+  'padding-left': px,
+  'padding-right': px,
+  'padding-top': px,
 
   // Mask properties
-  'mask-position-x': getDefaultUnit(window.CSS.px, 'px'),
-  'mask-position-y': getDefaultUnit(window.CSS.px, 'px'),
-  'mask-size': getDefaultUnit(window.CSS.px, 'px'),
+  'mask-position-x': px,
+  'mask-position-y': px,
+  'mask-size': px,
 
   // Width and height properties
-  'min-logical-height': getDefaultUnit(window.CSS.px, 'px'),
-  'max-logical-height': getDefaultUnit(window.CSS.px, 'px'),
-  'min-logical-width': getDefaultUnit(window.CSS.px, 'px'),
-  'max-logical-width': getDefaultUnit(window.CSS.px, 'px'),
-  'min-height': getDefaultUnit(window.CSS.px, 'px'),
-  'max-height': getDefaultUnit(window.CSS.px, 'px'),
-  'min-width': getDefaultUnit(window.CSS.px, 'px'),
-  'max-width': getDefaultUnit(window.CSS.px, 'px'),
-  height: getDefaultUnit(window.CSS.px, 'px'),
-  width: getDefaultUnit(window.CSS.px, 'px'),
-  'logical-height': getDefaultUnit(window.CSS.px, 'px'),
-  'logical-width': getDefaultUnit(window.CSS.px, 'px'),
+  height: px,
+  width: px,
+  'min-height': px,
+  'max-height': px,
+  'min-width': px,
+  'max-width': px,
 
   // Position properties
-  bottom: getDefaultUnit(window.CSS.px, 'px'),
-  left: getDefaultUnit(window.CSS.px, 'px'),
-  top: getDefaultUnit(window.CSS.px, 'px'),
-  right: getDefaultUnit(window.CSS.px, 'px'),
+  bottom: px,
+  left: px,
+  top: px,
+  right: px,
 
   // Shadow properties
-  'box-shadow': getDefaultUnit(window.CSS.px, 'px'),
-  'text-shadow': getDefaultUnit(window.CSS.px, 'px'),
+  'box-shadow': px,
+  'text-shadow': px,
 
   // Column properties
-  'column-gap': getDefaultUnit(window.CSS.px, 'px'),
-  'column-rule': getDefaultUnit(window.CSS.px, 'px'),
-  'column-rule-width': getDefaultUnit(window.CSS.px, 'px'),
-  'column-width': getDefaultUnit(window.CSS.px, 'px'),
+  'column-gap': px,
+  'column-rule': px,
+  'column-rule-width': px,
+  'column-width': px,
 
   // Font and text properties
-  'font-size': getDefaultUnit(window.CSS.px, 'px'),
-  'font-size-delta': getDefaultUnit(window.CSS.px, 'px'),
-  'letter-spacing': getDefaultUnit(window.CSS.px, 'px'),
-  'text-indent': getDefaultUnit(window.CSS.px, 'px'),
-  'text-stroke': getDefaultUnit(window.CSS.px, 'px'),
-  'text-stroke-width': getDefaultUnit(window.CSS.px, 'px'),
-  'word-spacing': getDefaultUnit(window.CSS.px, 'px'),
+  '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: getDefaultUnit(window.CSS.px, 'px'),
-  'motion-offset': getDefaultUnit(window.CSS.px, 'px'),
+  motion: px,
+  'motion-offset': px,
 
   // Outline properties
-  outline: getDefaultUnit(window.CSS.px, 'px'),
-  'outline-offset': getDefaultUnit(window.CSS.px, 'px'),
-  'outline-width': getDefaultUnit(window.CSS.px, 'px'),
+  outline: px,
+  'outline-offset': px,
+  'outline-width': px,
 
   // Perspective properties
-  perspective: getDefaultUnit(window.CSS.px, 'px'),
-  'perspective-origin-x': getDefaultUnit(window.CSS.percent, '%'),
-  'perspective-origin-y': getDefaultUnit(window.CSS.percent, '%'),
+  perspective: px,
+  'perspective-origin-x': percent,
+  'perspective-origin-y': percent,
 
   // Transform properties
-  'transform-origin': getDefaultUnit(window.CSS.percent, '%'),
-  'transform-origin-x': getDefaultUnit(window.CSS.percent, '%'),
-  'transform-origin-y': getDefaultUnit(window.CSS.percent, '%'),
-  'transform-origin-z': getDefaultUnit(window.CSS.percent, '%'),
+  'transform-origin': percent,
+  'transform-origin-x': percent,
+  'transform-origin-y': percent,
+  'transform-origin-z': percent,
 
   // Transition properties
-  'transition-delay': getDefaultUnit(window.CSS.ms, 'ms'),
-  'transition-duration': getDefaultUnit(window.CSS.ms, 'ms'),
+  'transition-delay': ms,
+  'transition-duration': ms,
 
   // Alignment properties
-  'vertical-align': getDefaultUnit(window.CSS.px, 'px'),
-  'flex-basis': getDefaultUnit(window.CSS.px, 'px'),
+  'vertical-align': px,
+  'flex-basis': px,
 
   // Some random properties
-  'shape-margin': getDefaultUnit(window.CSS.px, 'px'),
-  size: getDefaultUnit(window.CSS.px, 'px'),
+  'shape-margin': px,
+  size: px,
 
   // Grid properties
-  grid: getDefaultUnit(window.CSS.px, 'px'),
-  'grid-gap': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-row-gap': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-column-gap': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-template-rows': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-template-columns': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-auto-rows': getDefaultUnit(window.CSS.px, 'px'),
-  'grid-auto-columns': getDefaultUnit(window.CSS.px, 'px'),
+  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': getDefaultUnit(window.CSS.px, 'px'),
-  'box-shadow-y': getDefaultUnit(window.CSS.px, 'px'),
-  'box-shadow-blur': getDefaultUnit(window.CSS.px, 'px'),
-  'box-shadow-spread': getDefaultUnit(window.CSS.px, 'px'),
-  'font-line-height': getDefaultUnit(window.CSS.px, 'px'),
-  'text-shadow-x': getDefaultUnit(window.CSS.px, 'px'),
-  'text-shadow-y': getDefaultUnit(window.CSS.px, 'px'),
-  'text-shadow-blur': getDefaultUnit(window.CSS.px, '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-rule-value-function/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-rule-value-function.js": {
-    "bundled": 2141,
-    "minified": 824,
-    "gzipped": 469
+    "bundled": 2061,
+    "minified": 735,
+    "gzipped": 428
   },
   "dist/jss-plugin-syntax-rule-value-function.min.js": {
-    "bundled": 2141,
-    "minified": 824,
-    "gzipped": 469
+    "bundled": 2061,
+    "minified": 735,
+    "gzipped": 428
   },
   "dist/jss-plugin-syntax-rule-value-function.cjs.js": {
-    "bundled": 1742,
-    "minified": 734,
-    "gzipped": 408
+    "bundled": 1672,
+    "minified": 631,
+    "gzipped": 366
   },
   "dist/jss-plugin-syntax-rule-value-function.esm.js": {
-    "bundled": 1670,
-    "minified": 675,
-    "gzipped": 360,
+    "bundled": 1594,
+    "minified": 567,
+    "gzipped": 319,
     "treeshaked": {
       "rollup": {
         "code": 12,

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

@@ -1,13 +1,13 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 71258,
-    "minified": 25515,
-    "gzipped": 7099
+    "bundled": 67177,
+    "minified": 23526,
+    "gzipped": 6976
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 70142,
-    "minified": 24995,
-    "gzipped": 6845
+    "bundled": 66061,
+    "minified": 23006,
+    "gzipped": 6720
   },
   "dist/jss-preset-default.cjs.js": {
     "bundled": 1399,

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 51612,
-    "minified": 19375,
-    "gzipped": 5843
+    "bundled": 54282,
+    "minified": 20204,
+    "gzipped": 6078
   },
   "dist/jss.min.js": {
-    "bundled": 50736,
-    "minified": 18762,
-    "gzipped": 5526
+    "bundled": 53406,
+    "minified": 19591,
+    "gzipped": 5761
   },
   "dist/jss.cjs.js": {
-    "bundled": 45471,
-    "minified": 19747,
-    "gzipped": 5564
+    "bundled": 48005,
+    "minified": 20648,
+    "gzipped": 5820
   },
   "dist/jss.esm.js": {
-    "bundled": 45014,
-    "minified": 19375,
-    "gzipped": 5471,
+    "bundled": 47548,
+    "minified": 20276,
+    "gzipped": 5735,
     "treeshaked": {
       "rollup": {
-        "code": 16540,
+        "code": 17369,
         "import_statements": 189
       },
       "webpack": {
-        "code": 17880
+        "code": 18709
       }
     }
   }

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.