Merge pull request #202 from cometkim/gh-200

fix: Close keyframe block on getStyles
stitchesjs · Sep 10, 2020 · f599fa4 · f599fa4
2 parents ca1a11c + 451e6e2
commit f599fa4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -623,6 +623,7 @@ export const createCss = <T extends TConfig>(
         tokens
       )};`;
     });
+    cssRule += `}`;
 
     const hash = hashString(cssRule);
     // Check if an atom exist with the same hash and return it if so

diff --git a/packages/core/tests/index.test.ts b/packages/core/tests/index.test.ts
@@ -891,10 +891,10 @@ describe('createCss: mixed(SSR & Client)', () => {
     }) as any;
 
     expect(keyFrame._cssRuleString).toBe(
-      '@keyframes dmyJCr {0% {background-color: red;}100% {background-color: green;}'
+      '@keyframes keYeiS {0% {background-color: red;}100% {background-color: green;}}'
     );
 
-    expect(keyFrame.toString()).toMatchInlineSnapshot(`"dmyJCr"`);
+    expect(keyFrame.toString()).toMatchInlineSnapshot(`"keYeiS"`);
   });
 
   test('should support utils inside keyframes', () => {
@@ -915,10 +915,10 @@ describe('createCss: mixed(SSR & Client)', () => {
     }) as any;
 
     expect(keyFrame._cssRuleString).toBe(
-      '@keyframes bFeLcH {0% {margin-left: 1px;margin-right: 1px;}100% {margin-left: 10px;margin-right: 10px;}'
+      '@keyframes jxILgC {0% {margin-left: 1px;margin-right: 1px;}100% {margin-left: 10px;margin-right: 10px;}}'
     );
 
-    expect(keyFrame.toString()).toMatchInlineSnapshot(`"bFeLcH"`);
+    expect(keyFrame.toString()).toMatchInlineSnapshot(`"jxILgC"`);
   });
 
   test('should support specificity props inside keyframes', () => {
@@ -929,10 +929,10 @@ describe('createCss: mixed(SSR & Client)', () => {
     }) as any;
 
     expect(keyFrame._cssRuleString).toMatchInlineSnapshot(
-      `"@keyframes bivLJn {0% {padding-top: 1px;padding-right: 1px;padding-bottom: 1px;padding-left: 1px;}100% {padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}"`
+      `"@keyframes hOBUdi {0% {padding-top: 1px;padding-right: 1px;padding-bottom: 1px;padding-left: 1px;}100% {padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}}"`
     );
 
-    expect(keyFrame.toString()).toMatchInlineSnapshot(`"bivLJn"`);
+    expect(keyFrame.toString()).toMatchInlineSnapshot(`"hOBUdi"`);
   });
   test('should allow keyframes atom to be used as a direct object value', () => {
     const css = createCss({}, null);
@@ -943,14 +943,14 @@ describe('createCss: mixed(SSR & Client)', () => {
     let atom: any;
     const { styles } = css.getStyles(() => {
       expect(() => (atom = css({ animationName: keyFrame }))).not.toThrow();
-      expect(atom.toString()).toMatchInlineSnapshot(`"_gDSlRG"`);
+      expect(atom.toString()).toMatchInlineSnapshot(`"_iGYUIN"`);
       return '';
     });
     expect(styles.length).toBe(2);
     expect(styles[1].trim()).toMatchInlineSnapshot(`
       "/* STITCHES */
-      ./*X*/_gDSlRG/*X*/{animation-name:dmyJCr;}
-      @keyframes dmyJCr {0% {background-color: red;}100% {background-color: green;}"
+      ./*X*/_iGYUIN/*X*/{animation-name:keYeiS;}
+      @keyframes keYeiS {0% {background-color: red;}100% {background-color: green;}}"
     `);
   });
   test('should inject styles for animations into sheet', () => {
@@ -961,14 +961,14 @@ describe('createCss: mixed(SSR & Client)', () => {
     }) as any;
     const atom = css({ animationName: keyFrame }) as any;
     const { styles } = css.getStyles(() => {
-      expect(atom.toString()).toMatchInlineSnapshot(`"_gDSlRG"`);
+      expect(atom.toString()).toMatchInlineSnapshot(`"_iGYUIN"`);
       return '';
     });
     expect(styles.length).toBe(2);
     expect(styles[1].trim()).toMatchInlineSnapshot(`
       "/* STITCHES */
-      ./*X*/_gDSlRG/*X*/{animation-name:dmyJCr;}
-      @keyframes dmyJCr {0% {background-color: red;}100% {background-color: green;}"
+      ./*X*/_iGYUIN/*X*/{animation-name:keYeiS;}
+      @keyframes keYeiS {0% {background-color: red;}100% {background-color: green;}}"
     `);
   });
   test('should handle margin shorthand', () => {

diff --git a/packages/core/tests/ssr-only.test.ts b/packages/core/tests/ssr-only.test.ts
@@ -3,7 +3,7 @@
  */
 import { createCss } from '../src';
 describe('createCss: SSR', () => {
-  test.only('should regenerate styles when server side rendered', () => {
+  test('should regenerate styles when server side rendered', () => {
     const css = createCss({}, null);
     const atoms = css({ color: 'red' }) as any;
     // this acts like a request on the server
-Original file line number
+Diff line change
@@ Expand Up / @@ -623,6 +623,7 @@ export const createCss = <T extends TConfig>( @@
             tokens
           )};`;
         });
+        cssRule += `}`;
         const hash = hashString(cssRule);
         // Check if an atom exist with the same hash and return it if so
@@ Expand Down @@