fix: creating keyframes inside defineVars (#315)

* Docs: Fix code example typo (#290) * Handle `keyframe` within `defineVars` * Add test * Format * Fix grammar * Update stylex-validation-define-vars-test.js --------- Co-authored-by: k14lb3 <[email protected]>
facebook · Jan 7, 2024 · 80ef282 · 80ef282
1 parent 68efd8d
commit 80ef282
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 8 deletions.
diff --git a/apps/docs/docs/api/javascript/createTheme.mdx b/apps/docs/docs/api/javascript/createTheme.mdx
@@ -25,7 +25,7 @@ function createTheme(
 
 ```ts
 import * as stylex from '@stylexjs/stylex';
-import {colors} from './vars.stylex.js';
+import { colors } from './vars.stylex.js';
 
 const theme = stylex.createTheme(colors, {
   accentColor: 'red',

diff --git a/apps/docs/docs/api/javascript/defineVars.mdx b/apps/docs/docs/api/javascript/defineVars.mdx
@@ -25,7 +25,7 @@ You must define your variables as named exports in a `.stylex.js` (or
 ```tsx title="vars.stylex.js"
 import * as stylex from '@stylexjs/stylex';
 
-const colors = stylex.defineVars({
+export const colors = stylex.defineVars({
   accent: 'blue',
   background: 'white',
   line: 'gray',
@@ -38,7 +38,7 @@ You can then import and use these variables in any `stylex.create` call.
 
 ```tsx
 import * as stylex from '@stylexjs/stylex';
-import {colors} from './vars.stylex.js';
+import { colors } from './vars.stylex.js';
 
 const styles = stylex.create({
   container: {

diff --git a/packages/babel-plugin/__tests__/stylex-validation-define-vars-test.js b/packages/babel-plugin/__tests__/stylex-validation-define-vars-test.js
@@ -101,7 +101,7 @@ describe('@stylexjs/babel-plugin', () => {
 
     /* Values */
 
-    test('values must be static number or string in stylex.defineVars()', () => {
+    test('values must be static number or string, or keyframes in stylex.defineVars()', () => {
       // number
       expect(() => {
         transform(`
@@ -120,6 +120,18 @@ describe('@stylexjs/babel-plugin', () => {
           });
         `);
       }).not.toThrow();
+      // keyframes
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          export const styles = stylex.defineVars({
+            fadeIn: stylex.keyframes({
+              '0%': { opacity: 0 },
+              '100%': { opacity: 1}
+            }),
+          });
+        `);
+      }).not.toThrow();
       // not static
       expect(() => {
         transform(`

diff --git a/packages/babel-plugin/src/visitors/stylex-define-vars.js b/packages/babel-plugin/src/visitors/stylex-define-vars.js
@@ -15,6 +15,8 @@ import {
   defineVars as stylexDefineVars,
   messages,
   utils,
+  keyframes as stylexKeyframes,
+  type InjectableStyle,
 } from '@stylexjs/shared';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { evaluate, type FunctionConfig } from '../utils/evaluate-path';
@@ -71,8 +73,34 @@ export default function transformStyleXDefineVars(
     > = callExpressionPath.get('arguments');
     const firstArg = args[0];
 
+    const injectedKeyframes: { [animationName: string]: InjectableStyle } = {};
+
+    // eslint-disable-next-line no-inner-declarations
+    function keyframes<
+      Obj: {
+        +[key: string]: { +[k: string]: string | number },
+      },
+    >(animation: Obj): string {
+      const [animationName, injectedStyle] = stylexKeyframes(
+        animation,
+        state.options,
+      );
+      injectedKeyframes[animationName] = injectedStyle;
+      return animationName;
+    }
+
     const identifiers: FunctionConfig['identifiers'] = {};
     const memberExpressions: FunctionConfig['memberExpressions'] = {};
+    state.stylexKeyframesImport.forEach((name) => {
+      identifiers[name] = { fn: keyframes };
+    });
+    state.stylexImport.forEach((name) => {
+      if (memberExpressions[name] === undefined) {
+        memberExpressions[name] = {};
+      }
+
+      memberExpressions[name].keyframes = { fn: keyframes };
+    });
 
     const { confident, value } = evaluate(firstArg, state, {
       identifiers,
@@ -92,10 +120,18 @@ export default function transformStyleXDefineVars(
 
     const exportName = varId.name;
 
-    const [variablesObj, injectedStyles] = stylexDefineVars(value, {
-      ...state.options,
-      themeName: utils.genFileBasedIdentifier({ fileName, exportName }),
-    });
+    const [variablesObj, injectedStylesSansKeyframes] = stylexDefineVars(
+      value,
+      {
+        ...state.options,
+        themeName: utils.genFileBasedIdentifier({ fileName, exportName }),
+      },
+    );
+
+    const injectedStyles = {
+      ...injectedKeyframes,
+      ...injectedStylesSansKeyframes,
+    };
 
     // This should be a transformed variables object
     callExpressionPath.replaceWith(convertObjectToAST(variablesObj));