Merge pull request #208 from modulz/global-style-keyframes-injection

Global style keyframes injection
stitchesjs · Sep 10, 2020 · bef0c97 · bef0c97
2 parents f599fa4 + 5d217c4
commit bef0c97
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 130 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);
@@ -596,16 +596,19 @@ export const createCss = <T extends TConfig>(
   };
 
   cssInstance.global = (definitions: any) => {
+    const atoms: IAtom[] = [];
     processStyleObject(definitions, config, (prop, value, path) => {
       const { nestingPath, breakpoint, inlineMediaQueries } = resolveBreakpointAndSelectorAndInlineMedia(path, config);
       if (!nestingPath.length) {
-        throw new Error('Global styles need to be nested');
+        throw new Error('Global styles need to be nested within a selector');
       }
       // Create a global atom and call toString() on it directly to inject it
       // as global atoms don't generate class names of their own
-      createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries, true).toString();
+      atoms.push(createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries, true));
     });
+    return () => compose(...atoms).toString();
   };
+
   cssInstance.keyframes = (definition: any): IKeyframesAtom => {
     let cssRule = '';
     let currentTimeProp = '';
@@ -646,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);
@@ -680,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/types.ts b/packages/core/src/types.ts
@@ -273,7 +273,7 @@ export interface TCss<T extends TConfig> {
     result: any;
   };
   keyframes: (definition: Record<string, TFlatCSS<T> & TFlatUtils<T>>) => string;
-  global: (definition: Record<string, TCssProperties<T>>) => string;
+  global: (definition: Record<string, TCssProperties<T>>) => () => string;
   theme: (
     theme: Partial<
       {

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({