Merge branch 'master' of https://github.com/Popmotion/popmotion

Popmotion · Dec 6, 2018 · 7efed42 · 7efed42
2 parents 1dd52f0 + 09f5626
commit 7efed42
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 51 deletions.
diff --git a/packages/stylefire/src/css/_tests/build-styles.ts b/packages/stylefire/src/css/_tests/build-styles.ts
@@ -1,4 +1,4 @@
-import { buildStyleProperty, buildStyleString } from '../build-styles';
+import { buildStyleProperty, createStyleBuilder } from '../build-styles';
 
 describe('buildStyleProperty', () => {
   it('Should correctly parse Stylefire style objects into React-style objects', () => {
@@ -49,24 +49,17 @@ describe('buildStyleProperty', () => {
   });
 });
 
-describe('buildStyleString', () => {
-  it('Should take style objects and convert changed values into style strings', () => {
-    const styleString = buildStyleString();
+describe('createStyleBuilder', () => {
+  it('Should return styles using reusable data structures', () => {
+    const buildStyles = createStyleBuilder();
 
-    expect(styleString({ x: 100 })).toEqual(
-      ';transform:translateX(100px) translateZ(0)'
-    );
-    expect(styleString({ x: 100 })).toEqual('');
-    expect(styleString({ x: 100 })).toEqual('');
-    expect(styleString({ x: 0 })).toEqual(';transform:none');
-    expect(styleString({ x: 0 })).toEqual('');
-    expect(
-      styleString({ scale: 1, x: 100, opacity: 0.5, originX: 100, originY: 50 })
-    ).toEqual(
-      ';transform:translateX(100px) scale(1) translateZ(0);opacity:0.5;transform-origin:100% 50% 0'
-    );
-    expect(styleString({ opacity: 1, backgroundColor: '#fff' })).toEqual(
-      ';transform:none;opacity:1;background-color:#fff'
-    );
+    expect(buildStyles({ x: 100 })).toEqual({
+      transform: 'translateX(100px) translateZ(0)'
+    });
+
+    const a = buildStyles({ x: 200 });
+    const b = buildStyles({ x: 300 });
+
+    expect(a).toBe(b);
   });
 });
diff --git a/packages/stylefire/src/css/build-styles.ts b/packages/stylefire/src/css/build-styles.ts
@@ -1,11 +1,11 @@
 import { State } from '../styler/types';
 import getValueType from './value-types';
+import prefixer from './prefixer';
 import {
   sortTransformProps,
   isTransformProp,
   isTransformOriginProp
 } from './transform-props';
-import prefixer from './prefixer';
 import {
   SCROLL_LEFT,
   SCROLL_TOP,
@@ -25,9 +25,6 @@ export const aliasMap: AliasMap = {
   scrollY: SCROLL_TOP
 };
 
-const styleRule = (key: string, value: string | number) =>
-  `;${prefixer(key, true)}:${value}`;
-
 /**
  * Build style property
  *
@@ -78,7 +75,7 @@ const buildStyleProperty = (
       transformOrigin[key] = valueAsType;
       hasTransformOrigin = true;
     } else if (!blacklist.has(key)) {
-      styles[key] = valueAsType;
+      styles[prefixer(key, true)] = valueAsType;
     }
   }
 
@@ -113,47 +110,29 @@ const buildStyleProperty = (
   return styles;
 };
 
-const buildStyleString = (enableHardwareAcceleration: boolean = true) => {
-  /**
-   * We create our states as ping-pong data structures, rather than creating
-   * new ones every frame.
-   */
-  let next: State = {};
-  let prev: State = {};
-
+const createStyleBuilder = (enableHardwareAcceleration: boolean = true) => {
   /**
    * Because we expect this function to run multiple times a frame
    * we create and hold these data structures as mutative states.
    */
+  const styles: State = {};
   const transform: State = {};
   const transformOrigin: State = {};
   const transformKeys: string[] = [];
 
   return (state: State) => {
-    let style = '';
-
     transformKeys.length = 0;
-    next = buildStyleProperty(
+    buildStyleProperty(
       state,
       enableHardwareAcceleration,
-      next,
+      styles,
       transform,
       transformOrigin,
       transformKeys
     );
 
-    for (const key in next) {
-      const value = next[key];
-
-      if (value !== prev[key]) {
-        style += styleRule(key, value);
-      }
-    }
-
-    [next, prev] = [prev, next];
-
-    return style;
+    return styles;
   };
 };
 
-export { buildStyleProperty, buildStyleString };
+export { buildStyleProperty, createStyleBuilder };
diff --git a/packages/stylefire/src/css/index.ts b/packages/stylefire/src/css/index.ts
@@ -3,7 +3,7 @@ import { Styler } from '../styler/types';
 import prefixer from './prefixer';
 import { isTransformProp } from './transform-props';
 import getValueType from './value-types';
-import { buildStyleString, aliasMap } from './build-styles';
+import { createStyleBuilder, aliasMap } from './build-styles';
 import { SCROLL_LEFT, SCROLL_TOP, scrollKeys } from './scroll-keys';
 
 type Props = {
@@ -32,7 +32,7 @@ const cssStyler = createStyler({
   },
   onRender: (state, { element, buildStyles }, changedValues) => {
     // Style values
-    element.style.cssText += buildStyles(state);
+    Object.assign(element.style, buildStyles(state));
 
     // Scroll values
     if (changedValues.indexOf(SCROLL_LEFT) !== -1)
@@ -47,7 +47,7 @@ const cssStyler = createStyler({
 export default (element: HTMLElement, props?: Props): Styler =>
   cssStyler({
     element,
-    buildStyles: buildStyleString(),
+    buildStyles: createStyleBuilder(),
     preparseOutput: true,
     ...props
   });