Keyframe support

[ayroblu]

Is your feature request related to a problem? Please describe.
Hey just wondering if you support keyframes as they're transformed by css-modules too.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

import React from 'react';
import styles from './MyComp.module.css';

const MyComp: React.FC = () => {
  return (
    //                                           Error here \/\/\/\/
    <div style={{animation: `3s linear 1s infinite running ${styles.fadeIn}`}} />
  );
}

Describe the solution you'd like
Support keyframe syntax

Describe alternatives you've considered
// ts-ignore ?

or:

import React from 'react';
import styles from './MyComp.module.css';

const MyComp: React.FC = () => {
  return (
    <div style={{animation: `3s linear 1s infinite running ${(styles as any).fadeIn}`}} />
  );
}

[mrmckeb]

Hi @ayroblu, sorry for the slow response.

In this example, are you trying to import fadeIn to a TypeScript file?

I'd be open to a PR to resolve this if you'd be interested in taking a look?

[ayroblu]

Sorry yes, example usage would be:

import React from 'react';
import styles from './MyComp.module.css';

const MyComp: React.FC = () => {
  return (
    <div style={{animation: `3s linear 1s infinite running ${styles.fadeIn}`}} />
  );
}

current workaround is:

import React from 'react';
import styles from './MyComp.module.css';

const MyComp: React.FC = () => {
  return (
    <div style={{animation: `3s linear 1s infinite running ${(styles as any).fadeIn}`}} />
  );
}

Sorry forgot to add this!

[mrmckeb]

Thanks, I'm glad you have a workaround for now.

I'm not sure how best to implement this, but if you'd like to take a look, I definitely think we can add this feature.

[ayroblu]

Sure, when I had a look at the code, I was unsure where the parsing and extracting happens, any pointers?

[mrmckeb]

Hi @ayroblu, sorry for the slow response.

The parsing happens here, which may already return this information:
https://github.com/mrmckeb/typescript-plugin-css-modules/blob/develop/src/helpers/getClasses.ts

Once you have that info, you need to add it to the generated .d.ts file:
https://github.com/mrmckeb/typescript-plugin-css-modules/blob/develop/src/helpers/createExports.ts