getDanymicStyles #356

docs/js-api.md

@@ -308,6 +308,28 @@ console.log(sheet.toString())
 }
 ```
 
+## Extract dynamic styles
+
+`getDynamicStyles(styles)`
+
+Extracts a styles object with only rules that contain function values. Useful when you want to share a static part between different elements and render only the dynamic styles separate for each element.
+
+```js
+const dynamicStyles = getDynamicStyles({
+  button: {
+    fontSize: 12,
+    color: data => data.color
+  }
+})
+
+// Returns only dynamic values.
+{
+  button: {
+    color: data => data.color
+  }
+}
+```
+
 ## Plugins
 
 See [plugins](./plugins.md) documentation.

src/index.js

@@ -11,6 +11,12 @@ import SheetsRegistry from './SheetsRegistry'
 import RulesContainer from './RulesContainer'
 import sheets from './sheets'
 import type {JssOptions} from './types'
+import getDynamicStyles from './utils/getDynamicStyles'
+
+/**
+ * Extracts a styles object with only rules that contain function values.
+ */
+export {getDynamicStyles}
 
 /**
  * SheetsRegistry for SSR.

src/utils/getDynamicStyles.js

@@ -0,0 +1,24 @@
+const extract = (from) => {
+  let to
+  for (const key in from) {
+    const value = from[key]
+    const type = typeof value
+
+    if (type === 'function') {
+      if (!to) to = {}
+      to[key] = value
+    }
+    else if (type === 'object' && value !== null && !Array.isArray(value)) {
+      if (!to) to = {}
+      const extracted = extract(value)
+      if (extracted) to[key] = extracted
+    }
+  }
+
+  return to
+}
+
+/**
+ * Extracts a styles object with only rules that contain function values.
+ */
+export default (styles: Object): Object => extract(styles)

tests/index.js

@@ -17,3 +17,4 @@ import './integration/sheetsRegistry'
 import './functional/rules'
 import './functional/sheet'
 import './functional/priority'
+import './unit/utils'

tests/unit/utils.js

@@ -0,0 +1,54 @@
+import expect from 'expect.js'
+import getDynamicStyles from '../../src/utils/getDynamicStyles'
+
+describe('Unit: jss', () => {
+  describe('getDynamicStyles', () => {
+    it('should extract dynamic styles', () => {
+      const color = data => data.color
+      const styles = {
+        button: {
+          float: 'left',
+          margin: [5, 10],
+          color,
+          '@media screen': {
+            width: null,
+          },
+          '@media print': {
+            width: undefined,
+            color
+          },
+          '& a': {
+            color: 'red',
+            '& b': {
+              color
+            }
+          },
+        },
+        '@media': {
+          button: {
+            width: 2,
+            color
+          }
+        }
+      }
+      expect(getDynamicStyles(styles)).to.eql({
+        button: {
+          color,
+          '@media print': {
+            color
+          },
+          '& a': {
+            '& b': {
+              color
+            }
+          }
+        },
+        '@media': {
+          button: {
+            color
+          }
+        }
+      })
+    })
+  })
+})