Inject css.global and css.keyframes SSR

stitchesjs · Sep 10, 2020 · 5d217c4 · 5d217c4
1 parent 2aa55e7
commit 5d217c4
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 119 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -418,7 +418,7 @@ export const createCss = <T extends TConfig>(
     : createServerToString(sheets, config.breakpoints, cssClassnameProvider);
 
   let themeToString = createThemeToString(classPrefix, sheets.__variables__);
-  let keyframesToString = createKeyframesToString(sheets[MAIN_BREAKPOINT_ID]);
+  let keyframesToString = createKeyframesToString(sheets.__keyframes__);
   const compose = (...atoms: IAtom[]): IComposedAtom => {
     const map = new Map<string, IAtom>();
     composeIntoMap(map, atoms);
@@ -649,7 +649,9 @@ export const createCss = <T extends TConfig>(
   cssInstance.getStyles = (cb: any) => {
     // tslint:disable-next-line
     for (let sheet in sheets) {
-      sheets[sheet].cssRules.length = 0;
+      if (sheet !== '__keyframes__') {
+        sheets[sheet].cssRules.length = 0;
+      }
     }
     if (baseTokens) {
       sheets.__variables__.insertRule(baseTokens);
@@ -683,6 +685,7 @@ export const createCss = <T extends TConfig>(
         },
         [
           `/* STITCHES:__variables__ */\n${sheets.__variables__.cssRules.join('\n')}`,
+          `/* STITCHES:__keyframes__ */\n${sheets.__keyframes__.cssRules.join('\n')}`,
           `/* STITCHES */\n${sheets[MAIN_BREAKPOINT_ID].cssRules.join('\n')}`,
         ]
       ),

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -157,7 +157,7 @@ export const createSheets = (env: any, screens: IBreakpoints = {}) => {
 
     return {
       tags,
-      sheets: ['__variables__', MAIN_BREAKPOINT_ID]
+      sheets: ['__variables__', '__keyframes__', MAIN_BREAKPOINT_ID]
         .concat(Object.keys(screens))
         .reduce<{ [key: string]: ISheet }>((aggr, key, index) => {
           let style = existingStyles[index];
@@ -175,7 +175,7 @@ export const createSheets = (env: any, screens: IBreakpoints = {}) => {
 
   return {
     tags,
-    sheets: ['__variables__', MAIN_BREAKPOINT_ID]
+    sheets: ['__variables__', '__keyframes__', MAIN_BREAKPOINT_ID]
       .concat(Object.keys(screens))
       .reduce<{ [key: string]: ISheet }>((aggr, key) => {
         aggr[key] = enhanceSheet({