Fix fallbacks support in jss-plugin-vendor-prefixer (#1198)

* fix fallbacks support in jss-plugin-vendor-prefixer

* add changelog

* test fallbacks with object

Author: kof

changelog.md

@@ -7,6 +7,7 @@ Since you are interested in what happens next, in case, you work for a for-profi
 ## Bug fixes
 
 - [react-jss] Add fallback for `Number.MIN_SAFE_INTEGER`, because not supported by IE <= 11 ([1197](https://github.com/cssinjs/jss/pull/1197))
+- [jss-plugin-vendor-prefixer] Fix `fallbacks` syntax support regression ([1198](https://github.com/cssinjs/jss/pull/1198))
 
 ## 10.0.0-alpha.26 (2019-9-22)
 

packages/css-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/css-jss.js": {
-    "bundled": 57635,
-    "minified": 20287,
-    "gzipped": 6833
+    "bundled": 57848,
+    "minified": 20363,
+    "gzipped": 6871
   },
   "dist/css-jss.min.js": {
-    "bundled": 56873,
-    "minified": 19825,
-    "gzipped": 6619
+    "bundled": 57086,
+    "minified": 19901,
+    "gzipped": 6656
   },
   "dist/css-jss.cjs.js": {
     "bundled": 2919,

packages/jss-plugin-vendor-prefixer/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-vendor-prefixer.js": {
-    "bundled": 17778,
-    "minified": 5702,
-    "gzipped": 2224
+    "bundled": 17991,
+    "minified": 5778,
+    "gzipped": 2255
   },
   "dist/jss-plugin-vendor-prefixer.min.js": {
-    "bundled": 17778,
-    "minified": 5702,
-    "gzipped": 2224
+    "bundled": 17991,
+    "minified": 5778,
+    "gzipped": 2255
   },
   "dist/jss-plugin-vendor-prefixer.cjs.js": {
-    "bundled": 1375,
-    "minified": 627,
-    "gzipped": 360
+    "bundled": 1574,
+    "minified": 703,
+    "gzipped": 406
   },
   "dist/jss-plugin-vendor-prefixer.esm.js": {
-    "bundled": 1325,
-    "minified": 574,
-    "gzipped": 319,
+    "bundled": 1524,
+    "minified": 650,
+    "gzipped": 366,
     "treeshaked": {
       "rollup": {
         "code": 31,

packages/jss-plugin-vendor-prefixer/src/index.js

@@ -15,12 +15,13 @@ export default function jssVendorPrefixer(): Plugin {
     }
   }
 
-  function onProcessStyle(style, rule) {
-    if (rule.type !== 'style') return style
-
+  function prefixStyle(style) {
     for (const prop in style) {
       const value = style[prop]
-
+      if (prop === 'fallbacks' && Array.isArray(value)) {
+        style[prop] = value.map(prefixStyle)
+        continue
+      }
       let changeProp = false
       const supportedProp = vendor.supportedProperty(prop)
       if (supportedProp && supportedProp !== prop) changeProp = true
@@ -38,6 +39,12 @@ export default function jssVendorPrefixer(): Plugin {
     return style
   }
 
+  function onProcessStyle(style, rule) {
+    if (rule.type !== 'style') return style
+
+    return prefixStyle(style)
+  }
+
   function onChangeValue(value, prop) {
     return vendor.supportedValue(prop, toCssValue(value)) || value
   }

packages/jss-plugin-vendor-prefixer/src/index.test.js

@@ -2,6 +2,7 @@ import expect from 'expect.js'
 import {create} from 'jss'
 import * as cssVendor from 'css-vendor'
 import browser from 'detect-browser'
+import {stripIndent} from 'common-tags'
 import functionPlugin from 'jss-plugin-rule-value-function'
 
 import vendorPrefixer from './index'
@@ -162,4 +163,36 @@ describe('jss-plugin-vendor-prefixer', () => {
       expect(sheet.toString()).to.be(`.a-id {\n  display: ${supportedValue};\n}`)
     })
   })
+
+  describe('prefix fallbacks', () => {
+    it('should prefix array of objects', () => {
+      const sheet = jss.createStyleSheet({
+        a: {
+          display: 'run-in',
+          fallbacks: [{display: 'inline'}]
+        }
+      })
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          display: inline;
+          display: run-in;
+        }
+      `)
+    })
+
+    it('should prefix an object', () => {
+      const sheet = jss.createStyleSheet({
+        a: {
+          display: 'run-in',
+          fallbacks: {display: 'inline'}
+        }
+      })
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          display: inline;
+          display: run-in;
+        }
+      `)
+    })
+  })
 })

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

@@ -1,13 +1,13 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 54879,
-    "minified": 19521,
-    "gzipped": 6486
+    "bundled": 55092,
+    "minified": 19597,
+    "gzipped": 6524
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 54117,
-    "minified": 19059,
-    "gzipped": 6271
+    "bundled": 54330,
+    "minified": 19135,
+    "gzipped": 6310
   },
   "dist/jss-preset-default.cjs.js": {
     "bundled": 1329,

packages/jss-starter-kit/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/jss-starter-kit.js": {
-    "bundled": 70421,
-    "minified": 29561,
-    "gzipped": 9109
+    "bundled": 70634,
+    "minified": 29637,
+    "gzipped": 9145
   },
   "dist/jss-starter-kit.min.js": {
-    "bundled": 69659,
-    "minified": 29099,
-    "gzipped": 8896
+    "bundled": 69872,
+    "minified": 29175,
+    "gzipped": 8929
   },
   "dist/jss-starter-kit.cjs.js": {
     "bundled": 2592,

packages/react-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-jss.js": {
-    "bundled": 169164,
-    "minified": 58306,
-    "gzipped": 19067
+    "bundled": 169377,
+    "minified": 58382,
+    "gzipped": 19100
   },
   "dist/react-jss.min.js": {
-    "bundled": 112488,
-    "minified": 41697,
-    "gzipped": 14145
+    "bundled": 112701,
+    "minified": 41773,
+    "gzipped": 14177
   },
   "dist/react-jss.cjs.js": {
     "bundled": 27027,