Use asap instead of raf

Author: lttb

flow-typed/npm/asap_vx.x.x.js

@@ -0,0 +1,53 @@
+// flow-typed signature: 707dc8ad343bbbc20eb3bda63ab382df
+// flow-typed version: <<STUB>>/asap_v2.0.5/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'asap'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'asap' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'asap/asap' {
+  declare module.exports: any;
+}
+
+declare module 'asap/browser-asap' {
+  declare module.exports: any;
+}
+
+declare module 'asap/browser-raw' {
+  declare module.exports: any;
+}
+
+declare module 'asap/raw' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'asap/asap.js' {
+  declare module.exports: $Exports<'asap/asap'>;
+}
+declare module 'asap/browser-asap.js' {
+  declare module.exports: $Exports<'asap/browser-asap'>;
+}
+declare module 'asap/browser-raw.js' {
+  declare module.exports: $Exports<'asap/browser-raw'>;
+}
+declare module 'asap/raw.js' {
+  declare module.exports: $Exports<'asap/raw'>;
+}

package.json

@@ -38,10 +38,10 @@
   },
   "homepage": "https://github.com/cssinjs/styled-jss#readme",
   "dependencies": {
+    "asap": "^2.0.5",
     "is-react-prop": "^0.0.3",
     "jss": "^7.1.0",
-    "jss-preset-default": "^2.0.0",
-    "raf": "^3.3.0"
+    "jss-preset-default": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^15.5.4",

src/createStyled.js

@@ -1,3 +1,5 @@
+import asap from 'asap'
+
 import styled from './styled'
 
 import type {
@@ -15,6 +17,26 @@ const createStyled = (jss: Function) => (
   let staticSheet
   let dynamicSheet
 
+  let dynamicCounter = 0
+
+  asap(() => {
+    if (dynamicCounter) {
+      dynamicCounter = 0
+      dynamicSheet.attach().link()
+    }
+  })
+
+  const addRule = (name: string, style: ComponentStyleType, data: Object) => {
+    if (data) {
+      dynamicSheet.detach().addRule(name, style)
+      dynamicSheet.update(name, data)
+      dynamicCounter++
+    }
+    else {
+      staticSheet.addRule(name, style)
+    }
+  }
+
   const mountSheets = () => {
     if (!staticSheet) {
       staticSheet = jss.createStyleSheet(baseStyles, {
@@ -40,7 +62,7 @@ const createStyled = (jss: Function) => (
 
     const elementStyle = {...style, ...ownStyle}
 
-    return styled({tagName, baseStyles, elementStyle, mountSheets})
+    return styled({tagName, baseStyles, elementStyle, mountSheets, addRule})
   }, {mountSheets, styles: baseStyles})
 }
 

src/styled.js

@@ -15,10 +15,11 @@ import type {
 type StyledArgs = {
   tagName: string,
   elementStyle: ComponentStyleType,
-  mountSheets: Function
+  mountSheets: Function,
+  addRule: Function
 }
 
-const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
+const styled = ({tagName, elementStyle, mountSheets, addRule}: StyledArgs) => {
   const dynamicStyle = getDynamicStyles(elementStyle)
   const staticTagName = generateTagName(tagName)
 
@@ -43,17 +44,11 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
       Object.assign(this, mountSheets())
 
       if (!this.staticSheet.getRule(staticTagName)) {
-        this.staticSheet.addRule(staticTagName, elementStyle)
+        addRule(staticTagName, elementStyle)
       }
 
       if (dynamicStyle && !this.dynamicSheet.getRule(this.dynamicTagName)) {
-        this.dynamicSheet
-          .detach()
-          .addRule(this.dynamicTagName, dynamicStyle)
-        this.dynamicSheet
-          .update(this.dynamicTagName, this.props)
-          .attach()
-          .link()
+        addRule(this.dynamicTagName, dynamicStyle, this.props)
       }
     }
 

yarn.lock

@@ -152,7 +152,7 @@ arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
-asap@~2.0.3:
+asap@^2.0.5, asap@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"