[Shave bytes] Stringify object using Object.entries instead of separa…

…ted function
cristianbote · Jan 13, 2022 · 92fdb00 · 92fdb00
1 parent 92c6fa9
commit 92fdb00
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 39 deletions.
diff --git a/src/__tests__/integrations.test.js b/src/__tests__/integrations.test.js
@@ -103,17 +103,17 @@ describe('integrations', () => {
                 '"',
                 ' ', // Empty white space that holds the textNode that the styles are appended
                 '@keyframes go384228713{0%{opacity:0;}99%{opacity:1;color:dodgerblue;}}',
-                '.go1127809067{opacity:0;background:cyan;}',
+                '.go2626112847{opacity:0;background:cyan;}',
                 '.go3865451590{color:red;}',
                 '.go3991234422{color:cyan;}',
                 '.go3991234422 .go3865451590{border:1px solid red;}',
                 '.go1925576363{color:blue;}',
                 '.go3206651468{color:green;}',
                 '.go4276997079{color:orange;}',
                 '.go2069586824{opacity:0;animation:go384228713 500ms ease-in-out;}',
-                '.go631307347{foo:1;color:red;baz:0;}',
-                '.go3865943372{opacity:0;}',
-                '.go1162430001{opacity:0;baz:0;}',
+                '.go2648019963{foo:1;color:red;baz:0;}',
+                '.go3913223576{opacity:0;}',
+                '.go3863620777{opacity:0;baz:0;}',
                 '"'
             ].join('')
         );
@@ -162,21 +162,21 @@ describe('integrations', () => {
         expect(target.innerHTML).toEqual(
             [
                 '<div>',
-                '<div class="go103173764"></div>',
-                '<div class="go103194166"></div>',
-                '<span class="go2081835032"></span>',
-                '<button class="go1969245729 go1824201605"></button>',
+                '<div class="go748886164"></div>',
+                '<div class="go748906566"></div>',
+                '<span class="go2235611440"></span>',
+                '<button class="go468399569 go1824201605"></button>',
                 '</div>'
             ].join('')
         );
 
         expect(extractCss()).toMatchInlineSnapshot(
             [
                 '"',
-                '.go1969245729{color:white;padding:0em;margin:1em;}',
-                '.go103173764{color:white;padding:0em;}',
-                '.go103194166{color:white;padding:2em;}',
-                '.go2081835032{color:white;padding:3em;margin:1em;}',
+                '.go468399569{color:white;padding:0em;margin:1em;}',
+                '.go748886164{color:white;padding:0em;}',
+                '.go748906566{color:white;padding:2em;}',
+                '.go2235611440{color:white;padding:3em;margin:1em;}',
                 '.go1824201605{background:dodgerblue;}',
                 '"'
             ].join('')
@@ -216,9 +216,9 @@ describe('integrations', () => {
         expect(target.innerHTML).toEqual(
             [
                 '<div>',
-                '<div class="go103173764"></div>',
-                '<div class="go103194166"></div>',
-                '<span class="go2081835032"></span>',
+                '<div class="go748886164"></div>',
+                '<div class="go748906566"></div>',
+                '<span class="go2235611440"></span>',
                 '</div>'
             ].join(''),
             `"<div><div class=\\"go103173764\\"></div><div class=\\"go103194166\\"></div><span class=\\"go2081835032\\"></span></div>"`
@@ -227,9 +227,9 @@ describe('integrations', () => {
         expect(extractCss()).toMatchInlineSnapshot(
             [
                 '"',
-                '.go103173764{color:white;padding:0em;}',
-                '.go103194166{color:white;padding:2em;}',
-                '.go2081835032{color:white;padding:3em;margin:1em;}',
+                '.go748886164{color:white;padding:0em;}',
+                '.go748906566{color:white;padding:2em;}',
+                '.go2235611440{color:white;padding:3em;margin:1em;}',
                 '"'
             ].join('')
         );

diff --git a/src/__tests__/styled.test.js b/src/__tests__/styled.test.js
@@ -66,7 +66,7 @@ describe('styled', () => {
             className: 'go',
             color: 'red'
         });
-        expect(extractCss()).toEqual('.go3433634237{color:red;}');
+        expect(extractCss()).toEqual('.go3127686001{color:red;}');
     });
 
     it('change tag via "as" prop', () => {
@@ -154,6 +154,6 @@ describe('styled', () => {
         let vnode = Tag({ draw: true });
 
         expect(vnode).toMatchVNode('tag', { className: 'go', draw: true });
-        expect(extractCss()).toEqual('.go2986228274{color:yellow;}');
+        expect(extractCss()).toEqual('.go452517270{color:yellow;}');
     });
 });
diff --git a/src/core/__tests__/hash.test.js b/src/core/__tests__/hash.test.js
@@ -86,7 +86,7 @@ describe('hash', () => {
 
         const res = hash({ baz: 1 }, 'target');
 
-        expect(toHash).toBeCalledWith('baz1');
+        expect(toHash).toBeCalledWith('baz,1');
         expect(astish).not.toBeCalled();
         expect(parse).toBeCalledWith({ baz: 1 }, '.' + className);
         expect(update).toBeCalledWith('parse()', 'target', undefined);
@@ -100,12 +100,12 @@ describe('hash', () => {
 
         // Since it's not yet cached
         hash({ cacheObject: 1 }, 'target');
-        expect(toHash).toBeCalledWith('cacheObject1');
+        expect(toHash).toBeCalledWith('cacheObject,1');
         toHash.mockClear();
 
         // Different object
         hash({ foo: 2 }, 'target');
-        expect(toHash).toBeCalledWith('foo2');
+        expect(toHash).toBeCalledWith('foo,2');
         toHash.mockClear();
 
         // First object should not call .toHash

diff --git a/src/core/hash.js b/src/core/hash.js
@@ -8,21 +8,6 @@ import { parse } from './parse';
  */
 let cache = {};
 
-/**
- * Stringifies a object structure
- * @param {Object} data
- * @returns {String}
- */
-let stringify = (data) => {
-    if (typeof data == 'object') {
-        let out = '';
-        for (let p in data) out += p + stringify(data[p]);
-        return out;
-    } else {
-        return data;
-    }
-};
-
 /**
  * Generates the needed className
  * @param {String|Object} compiled
@@ -34,7 +19,8 @@ let stringify = (data) => {
  */
 export let hash = (compiled, sheet, global, append, keyframes) => {
     // Get a string representation of the object or the value that is called 'compiled'
-    let stringifiedCompiled = stringify(compiled);
+    let stringifiedCompiled =
+        typeof compiled == 'object' ? Object.entries(compiled) + '' : compiled;
 
     // Retrieve the className from cache or hash it in place
     let className =