Animation names are being suffixed with className when no animation is defined

[iMoses-Apiiro]

Environment

• Linaria version: 3.0.0-beta.15
• Bundler (+ version): webpack 5.69.1
• Node.js version: 16.15.0
• OS: Ubuntu

Description

Animation names are being suffixed with the generated className even if no animation is defined with that name.

This causes a condition in which it's impossible to use globally defined animations, as linaria will mess up the names.

Reproducible Demo

export const LogoSpinner = styled(SvgLogo)`
  animation: rotate-3d 3s infinite;
`;
/** Outputs:
 .ld2jrmk {
    animation: rotate-3d-ld2jrmk 3s infinite;
  }
 */

making it impossible to use a globally defined @keyframe by the name of rotate-3d

Expected behavior: only apply suffix if an animation exists.

P.S. I guess there's another hidden bug here, animations can't be used when extending components because the different suffixes will cause the names not to match

[Anber]

It looks like an issue from stylis. As a workaround, you can redefine preprocessor in your config.

[nathanredblur]

Suffering the same problem... @Anber could you provide more details about this workaround ?

[nathanredblur]

I found a workaround

const SkeletonItem = styled.div`
  --animation: pulse;
  animation: var(--animation) 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
`;

but... I'm getting some many headaches with linaria...