cssHard

cssHard

Is a library for keeping track of css classes defined in global.css and using them with typed feedback like this.

 <div className={cssHard('slideInAnimation')} ....
  # or 
 <div className={`${css(stylesheet.randomStyle)} ${cssHard('slideInAnimation')}`}>

Adding values to the cssHard function

when you want make a class for example .slide-in-right you would define it in global.css

.slide-in-right {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.....

then then you would modify and hardcode that value into the type CSSHardCollection as slideInRight and add the classname into the CSSHardCollectionEnum as SLIDE_IN_RIGHT you would then finally proceed to add a case for it in the switch statement in the function below.

/**
 * Both CSSHardCollection & CSSHardCollectionEnum 
 * must be manually configured by developers
 * they refer to the styles/global.css values
 * DO NOT DELETE ANYONE ELSES CODE IN THIS FILE WITHOUT 
   EXPLICIT PERMISSION FROM THEM OR AN ADMIN
 */
type CSSHardCollection = 'slideInAnimation';

enum CSSHardCollectionEnum {
    SLIDE_IN_RIGHT = 'slide-in-right'
}

export default function(cssVar: CSSHardCollection): CSSHardCollectionEnum{
    switch (cssVar) {
        case 'slideInAnimation':
            return CSSHardCollectionEnum.SLIDE_IN_RIGHT;
        default:
            throw new Error("Not a supported CSSHardCollection Value!");
    }
}

This system makes it easy to keep track of classes defined in global css and allow us to use search for deprecated or unused styles and remove them from the development source code. This system also forces you to be more judicious with what you do and do not define in global.css since we want you to use the stylesheet system (currently Aphrodite) to define styles on a component by component basis.