perf: use directive key for caching

tw-in-js · Jan 22, 2021 · 24e4b00 · 24e4b00
1 parent cf37f6d
commit 24e4b00
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -317,11 +317,11 @@ The implementation is tested for speed alongside several popular CSS-in-JS solut
 ### CSS Function w/ template literal
 
 ```
-twind (tw) x 276,789 ops/sec ±0.34% (94 runs sampled)
-twind (apply) x 111,319 ops/sec ±0.50% (94 runs sampled)
-twind (css) x 102,938 ops/sec ±0.32% (93 runs sampled)
-goober@2.0.18 x 141,827 ops/sec ±0.44% (96 runs sampled)
-emotion@11.1.3 x 227,533 ops/sec ±0.46% (98 runs sampled)
+twind (tw)                  x 262,054 ops/sec ±1.15% (89 runs sampled)
+twind (apply)               x 118,972 ops/sec ±1.16% (89 runs sampled)
+twind (css)                 x 110,865 ops/sec ±0.91% (95 runs sampled)
+goober@2.0.18               x 143,256 ops/sec ±0.49% (97 runs sampled)
+emotion@11.1.3              x 228,671 ops/sec ±0.34% (93 runs sampled)
 ```
 
 ### Styled component w/ template literal

diff --git a/benchmarks/css.ts b/benchmarks/css.ts
@@ -58,9 +58,9 @@ function objectStyles(): Promise<void> {
   })
 
   console.log('# Object Styles')
-  console.log('twind (inline static):', tw(styles))
+  console.log('twind (static):', tw(styles))
   console.log(
-    'twind (inline dynamic):',
+    'twind (dynamic):',
     tw(() => styles()),
   )
   console.log('twind (css):', tw(css(styles())))
@@ -70,8 +70,8 @@ function objectStyles(): Promise<void> {
 
   return new Promise((resolve, reject) => {
     new Benchmark.Suite('Object Styles')
-      .add('twind (inline static)', () => tw(styles))
-      .add('twind (inline dynamic)', () => tw(() => styles()))
+      .add('twind (static)', () => tw(styles))
+      .add('twind (dynamic)', () => tw(() => styles()))
       .add('twind (css)', () => tw(css(styles())))
       .add(`otion@${otionVersion}`, () => otion(styles()))
       .add(`goober@${gooberVersion}`, () => goober(styles()))

diff --git a/src/__tests__/api.test.ts b/src/__tests__/api.test.ts
@@ -586,9 +586,9 @@ test('no arguments', ({ tw }) => {
 test('theme helper', ({ sheet, tw }) => {
   assert.is(
     tw(() => ({ color: theme('colors', 'red.500') })),
-    'tw-zq2gjv',
+    'tw-1xw1vyh',
   )
-  assert.equal(sheet.target, ['.tw-zq2gjv{color:#ef4444}'])
+  assert.equal(sheet.target, ['.tw-1xw1vyh{color:#ef4444}'])
 })
 
 test('inline rule (css object)', ({ sheet, tw }) => {
@@ -654,7 +654,7 @@ test('inline rule nested', ({ sheet, tw }) => {
       },
       'font-bold',
     ),
-    'text-center sm:hover:underline sm:focus:tw-xqkwh8 lg:text-lg lg:focus:underline font-bold',
+    'text-center sm:hover:underline sm:focus:tw-lbtuhn lg:text-lg lg:focus:underline font-bold',
   )
 
   assert.equal(sheet.target, [
@@ -663,7 +663,7 @@ test('inline rule nested', ({ sheet, tw }) => {
     '@media (min-width: 640px){.sm\\:hover\\:underline:hover{text-decoration:underline}}',
     '@media (min-width: 1024px){.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}',
     '@media (min-width: 1024px){.lg\\:focus\\:underline:focus{text-decoration:underline}}',
-    '@media (min-width: 640px){.sm\\:focus\\:tw-xqkwh8:focus{color:#ef4444}}',
+    '@media (min-width: 640px){.sm\\:focus\\:tw-lbtuhn:focus{color:#ef4444}}',
   ])
 })
 

diff --git a/src/__tests__/apply.test.ts b/src/__tests__/apply.test.ts
@@ -275,7 +275,7 @@ test('use :global', ({ tw, sheet }) => {
     },
   })
 
-  assert.is(tw(style), 'tw-uib79w')
+  assert.is(tw(style), 'tw-pjwfov')
 
   assert.equal(sheet.target, [
     'html{--tw-17cwy6m:1;background-color:#111827;background-color:rgba(17,24,39,var(--tw-17cwy6m));--tw-dxr4o8:1;color:#fff;color:rgba(255,255,255,var(--tw-dxr4o8))}',

diff --git a/src/twind/directive.ts b/src/twind/directive.ts
@@ -58,7 +58,7 @@ export const directive = <Data, T extends CSSRules | string | Falsy>(
       // Allow twind to generate a unique id for this directive
       // twind uses JSON.stringify which returns undefined for functions like this directive
       // providing a toJSON function allows to include this directive in the id generation
-      value: () => data,
+      value: () => key || data,
     })
 
     if (cache) {