diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 00000000..74254dec --- /dev/null +++ b/index.d.ts @@ -0,0 +1,3 @@ +export { extractCss } from './core/update'; +export { styled, setup } from './styled'; +export { css, glob, keyframes } from './css'; diff --git a/src/__tests__/integrations.test.js b/src/__tests__/integrations.test.js index dfb7650d..abbc7a9e 100644 --- a/src/__tests__/integrations.test.js +++ b/src/__tests__/integrations.test.js @@ -103,7 +103,7 @@ 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;}', + '.go3244392539{opacity:0;background:cyan;}', '.go3865451590{color:red;}', '.go3991234422{color:cyan;}', '.go3991234422 .go3865451590{border:1px solid red;}', @@ -111,9 +111,9 @@ describe('integrations', () => { '.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;}', + '.go1162043959{foo:1;color:red;baz:0;}', + '.go98589992{opacity:0;}', + '.go3678641885{opacity:0;baz:0;}', '"' ].join('') ); @@ -162,10 +162,10 @@ describe('integrations', () => { expect(target.innerHTML).toEqual( [ '
', - '
', - '
', - '', - '', + '
', + '
', + '', + '', '
' ].join('') ); @@ -173,10 +173,10 @@ describe('integrations', () => { 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;}', + '.go63716261{color:white;padding:0em;margin:1em;}', + '.go2623058580{color:white;padding:0em;}', + '.go2625119182{color:white;padding:2em;}', + '.go2458456096{color:white;padding:3em;margin:1em;}', '.go1824201605{background:dodgerblue;}', '"' ].join('') @@ -216,9 +216,9 @@ describe('integrations', () => { expect(target.innerHTML).toEqual( [ '
', - '
', - '
', - '', + '
', + '
', + '', '
' ].join(''), `"
"` @@ -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;}', + '.go2623058580{color:white;padding:0em;}', + '.go2625119182{color:white;padding:2em;}', + '.go2458456096{color:white;padding:3em;margin:1em;}', '"' ].join('') ); diff --git a/src/__tests__/styled.test.js b/src/__tests__/styled.test.js index 19bdea46..df8a1563 100644 --- 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('.go2363673541{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('.go2754571358{color:yellow;}'); }); }); diff --git a/src/core/__tests__/hash.test.js b/src/core/__tests__/hash.test.js index b71f5d72..082ee5d1 100644 --- 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,10'); 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,10'); toHash.mockClear(); // Different object hash({ foo: 2 }, 'target'); - expect(toHash).toBeCalledWith('foo2'); + expect(toHash).toBeCalledWith('foo,20'); toHash.mockClear(); // First object should not call .toHash diff --git a/src/core/hash.js b/src/core/hash.js index 6d3b5143..e9663efb 100644 --- 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,7 @@ 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) + 0 : compiled; // Retrieve the className from cache or hash it in place let className =