Add default units to logical properties (#1415)

* Add default units to logical properties

Closes #1414

* Add logical-properties test

Author: atlanteh

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

@@ -38,21 +38,49 @@ export default {
   'border-top-right-radius': px,
   'border-top-width': px,
   'border-width': px,
-
+  'border-block': px,
+  'border-block-end': px,
+  'border-block-end-width': px,
+  'border-block-start': px,
+  'border-block-start-width': px,
+  'border-block-width': px,
+  'border-inline': px,
+  'border-inline-end': px,
+  'border-inline-end-width': px,
+  'border-inline-start': px,
+  'border-inline-start-width': px,
+  'border-inline-width': px,
+  'border-start-start-radius': px,
+  'border-start-end-radius': px,
+  'border-end-start-radius': px,
+  'border-end-end-radius': px,
+  
   // Margin properties
   margin: px,
   'margin-bottom': px,
   'margin-left': px,
   'margin-right': px,
   'margin-top': px,
-
+  'margin-block': px,
+  'margin-block-end': px,
+  'margin-block-start': px,
+  'margin-inline': px,
+  'margin-inline-end': px,
+  'margin-inline-start': px,
+  
   // Padding properties
   padding: px,
   'padding-bottom': px,
   'padding-left': px,
   'padding-right': px,
   'padding-top': px,
-
+  'padding-block': px,
+  'padding-block-end': px,
+  'padding-block-start': px,
+  'padding-inline': px,
+  'padding-inline-end': px,
+  'padding-inline-start': px,
+  
   // Mask properties
   'mask-position-x': px,
   'mask-position-y': px,
@@ -71,7 +99,14 @@ export default {
   left: px,
   top: px,
   right: px,
-
+  'inset': px,
+  'inset-block': px,
+  'inset-block-end': px,
+  'inset-block-start': px,
+  'inset-inline': px,
+  'inset-inline-end': px,
+  'inset-inline-start': px,
+  
   // Shadow properties
   'box-shadow': px,
   'text-shadow': px,

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

@@ -438,4 +438,24 @@ describe('jss-plugin-default-unit', () => {
       `)
     })
   })
+
+  describe('logical properties with px units', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        a: {
+          'margin-inline-start': 10
+        }
+      })
+    })
+
+    it('should add rule', () => {
+      expect(sheet.getRule('a')).to.not.be(undefined)
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be('.a-id {\n  margin-inline-start: 10px;\n}')
+    })
+  })
 })