splits cursor plugin into two separate plugins for zoom and grab, always adds prefix to grab and grabbing

docs/Plugins.md

@@ -3,8 +3,10 @@ Sometimes it is not enough to just prefix a property, but you also need to prefi
 
 ### calc
 Adds support for prefixed `calc` values on any property.
-### cursor
-Adds support for prefixed new `cursor` values `zoom-in`, `zoom-out`, `grab`, `grabbing`.
+### zoomCursor
+Adds support for prefixed new `cursor` values `zoom-in` and `zoom-out`.
+### grabCursor
+Adds support for prefixed new `cursor` values `grab` and `grabbing`.
 
 ### flex
 Adds support for prefixed `display` values using `display: flex` or `display: inline-flex`.

modules/Prefixer.js

@@ -6,7 +6,8 @@ import assign from './utils/assign'
 import prefixProps from './prefixProps'
 
 import calc from './plugins/calc'
-import cursor from './plugins/cursor'
+import zoomCursor from './plugins/zoomCursor'
+import grabCursor from './plugins/grabCursor'
 import flex from './plugins/flex'
 import sizing from './plugins/sizing'
 import gradient from './plugins/gradient'
@@ -17,7 +18,8 @@ import flexboxOld from './plugins/flexboxOld'
 
 const plugins = [
   calc,
-  cursor,
+  zoomCursor,
+  grabCursor,
   sizing,
   gradient,
   transition,

modules/plugins/grabCursor.js

@@ -0,0 +1,23 @@
+import camelToDashCase from '../utils/camelToDashCase'
+
+const values = {
+  'grab': true,
+  'grabbing': true
+}
+
+export default function cursor({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
+  // adds prefixes for firefox, chrome, safari, and opera regardless of version until a reliable brwoser support info can be found (see: https://github.com/rofrischmann/inline-style-prefixer/issues/79)
+  if (
+    property === 'cursor' && values[value] &&
+    (
+    browser === 'firefox' ||
+    browser === 'chrome' ||
+    browser === 'safari' ||
+    browser === 'opera'
+    )
+  ) {
+    return {
+      cursor: css + value + (keepUnprefixed ? ';' + camelToDashCase(property) + ':' + value : '')
+    }
+  }
+}

modules/plugins/cursor.js → modules/plugins/zoomCursor.js

@@ -2,9 +2,7 @@ import camelToDashCase from '../utils/camelToDashCase'
 
 const values = {
   'zoom-in': true,
-  'zoom-out': true,
-  'grab': true,
-  'grabbing': true
+  'zoom-out': true
 }
 
 export default function cursor({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {

test/prefixer-test.js

@@ -150,13 +150,25 @@ describe('Resolving old 2012 flexbox specification', () => {
   })
 })
 
-describe('Resolving special cursor values', () => {
-  it('should add prefixes', () => {
+describe('Resolving zoom cursor values', () => {
+  it('should add prefixes when appropriate', () => {
     const standard = { cursor: 'pointer' }
     const input = { cursor: 'zoom-in' }
     const output = { cursor: '-webkit-zoom-in' }
     expect(new Prefixer({ userAgent: Chrome14 }).prefix(standard)).to.eql(standard)
     expect(new Prefixer({ userAgent: Chrome14 }).prefix(input)).to.eql(output)
+    expect(new Prefixer({ userAgent: Chrome49 }).prefix(input)).to.eql(input)
+  })
+})
+
+describe('Resolving grab cursor values', () => {
+  it('should add prefixes when appropriate', () => {
+    const standard = { cursor: 'pointer' }
+    const input = { cursor: 'grab' }
+    const output = { cursor: '-webkit-grab' }
+    expect(new Prefixer({ userAgent: Chrome14 }).prefix(standard)).to.eql(standard)
+    expect(new Prefixer({ userAgent: Chrome14 }).prefix(input)).to.eql(output)
+    expect(new Prefixer({ userAgent: Chrome49 }).prefix(input)).to.eql(output)
   })
 })