How should I use addFunctionSerializer when using test?

[black7375]

Hello, I love Vanilla Extract, and I'm trying to create a plugin to make it a little easier to use.

One of the features I want to create is anonymous keyframing of griffel.

• https://griffel.js.org/react/api/make-styles/#keyframes-animations

Here's the sample code

import { keyframes, type StyleRule } from "@vanilla-extract/css";

type KeyframeArgs = Parameters<typeof keyframes>[0];
type MyStyleRule = Omit<StyleRule, "animationName"> & {
  animationName: KeyframeArgs;
};

export function myStyle(rules: MyStyleRule): StyleRule {
  const { animationName, ...otherRules } = rules;

  const anonymousName = keyframes(animationName, "test");

  return {
    ...otherRules,
    animationName: anonymousName
  } satisfies StyleRule;
}

if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;

  it("Anonymous AtRules", () => {
    const rules: MyStyleRule = {
      animationName: {
        from: {
          opacity: 0
        },
        "50%": {
          opacity: 0.3
        },
        to: {
          opacity: 1
        }
      }
    };

    expect(myStyle(rules)).toStrictEqual({
      animationName: "animationName_test"
    });
  });
}

When I run the test, I get an error.

Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
 ❯ Module.getFileScope ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.esm.js:30:11
     29|   return fileScopes[0];
     30| }
     31| function getAndIncrementRefCounter() {
       |         ^
     32|   return refCounter++;
     33| }
 ❯ generateIdentifier ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js:178:29
 ❯ Module.keyframes ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js:431:44
 ❯ myStyle src/transform-object/keyframe.ts:11:25
 ❯ src/transform-object/keyframe.ts:37:12

Can I use addFunctionSerializer to solve it?

[askoufis]

The issue here is likely that your file doesn't end in .css.ts. The call to keyframes within myStyle flags to Vanilla Extract that styles were created in this file, but it won't work if the file doesn't end in .css.ts. You could try changing the file name and seeing if that works, though I haven't tried running a vitest test inside a .css.ts file before, so it might not work for some other reason.

addFunctionSerializer doesn't really apply to this use case. Making a custom function for use at build-time that wraps Vanilla Extract API should work just fine, assuming it's in a .css.ts file.

[black7375]

Thank you for your response.
Unfortunately, I'm getting the same error.

I'm guessing there's something else going on.
Is there anything I can do to help solve this?

FAIL  src/transform-object/keyframe.css.ts > Anonymous AtRules
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
 ❯ Module.getFileScope ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.esm.js:30:11
     29|   return fileScopes[0];
     30| }
     31| function getAndIncrementRefCounter() {
       |         ^
     32|   return refCounter++;
     33| }
 ❯ generateIdentifier ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js:178:29
 ❯ Module.keyframes ../../node_modules/.store/@vanilla-extract-css-npm-1.13.0-29643550b5/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js:431:44
 ❯ myStyle src/transform-object/keyframe.css.ts:11:25
 ❯ src/transform-object/keyframe.css.ts:37:12

[askoufis]

Calling setFileScope before myStyle seems to fix it, though it doesn't seem to actually do anything with the filescope you provide. The plugin usually handles this in regular code, but I think due to that way tests are executed this doesn't occur, so you have to do it manually.

import { setFileScope } from "@vanilla-extract/css/fileScope";

if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;

  it("Anonymous AtRules", () => {
    const rules: MyStyleRule = {
      animationName: {
        from: {
          opacity: 0
        },
        "50%": {
          opacity: 0.3
        },
        to: {
          opacity: 1
        }
      }
    };

    setFileScope('foo');

    expect(myStyle(rules)).toStrictEqual({
      animationName: "animationName_test"
    });
  });
}

An even simpler option would be to just mock keyframes, since you just want to test the logic from myStyle.

[black7375]

Awesome!! Thank you so much.
This was a huge help!!!