Skip to content

Instantly share code, notes, and snippets.

@RPDeshaies
Created March 10, 2020 13:06
Show Gist options
  • Save RPDeshaies/10e31bd28e0ac43462503cbc0343182c to your computer and use it in GitHub Desktop.
Save RPDeshaies/10e31bd28e0ac43462503cbc0343182c to your computer and use it in GitHub Desktop.
import { css, ObjectInterpolation } from "emotion";
export type IStyles = { [key: string]: ObjectInterpolation<undefined> };
export function useStyles<
TStyleDefinitions extends { [key: string]: ObjectInterpolation<undefined> },
TStyleDefinitionNames extends keyof TStyleDefinitions
>(
styleDefinitions: {
[key in TStyleDefinitionNames]: ObjectInterpolation<undefined>;
},
componentDisplayName: string
): { [key in TStyleDefinitionNames]: string } {
const styleDefinitionNames = Object.keys(styleDefinitions);
const processedClassNames = styleDefinitionNames.reduce(
(result, definitionName) => {
const label = `${componentDisplayName}-${definitionName}`;
const emotionClassHash = css({
...styleDefinitions[definitionName],
label: label
});
return { ...result, [definitionName]: emotionClassHash };
},
{}
) as { [key in TStyleDefinitionNames]: string };
return processedClassNames;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment