Add CSSFunctions to CSSProperties typings

[quicksnap]

What:

Improves TypeScript support for CSS functions

• Documentation
• Tests
• Ready to be merged
• Added myself to contributors table

[codecov-io]

Codecov Report

Merging #392 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #392   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          10     10           
  Lines         177    177           
  Branches       50     50           
=====================================
  Hits          177    177

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8a21d8b...7fb508a. Read the comment docs.

[kentcdodds]

LGTM
but I don't merge typescript changes 😅

[luke-john]

Thanks for adding support for this (and adding the feature in the first place 👍), should enable some handy patterns.

Would you be able to add a test to /test/glamorous.test.tsx which makes use of this type addition.

Also, from the looks of the PR that landed this feature, the shape is also supported for the glamorous style arguments so we probably need to update StyleFunction in style-arguments.d.ts to include itself in it's return union.

ie.

export interface StyleFunction<Properties, Props> {
  (props: Props):
    | Properties
    | string
    | Array<Properties | string | StyleFunction<Properties, Props>>
    | StyleFunction<Properties, Props>
}

feel free to leave out of scope and I'll setup up a first timer issue for that.

Also re my comment around the CSSFunction location, also feel free to leave as is, if I get some time in the next week I'll look into adding the generic support to type the Props, or someone else will no doubt get onto it :).

Thanks again.

[luke-john]

While this will work well, it might be easier to add support in the glamorous-component.ts file which would also make it simpler to add the typing for the Props argument and help keep the logic of that function in one file.

// glamorous-component.d.ts

export interface CSSFunction<Props> {
    (props: Props): CSSPropertiesRecursive | CSSFunction<Props> 
}

export interface ExtraGlamorousProps<Props> {
  ...
  css?: CSSPropertiesRecursive | CSSFunction<Props>
  ...
}
...
export interface GlamorousComponent<ExternalProps, Props>
  extends React.ComponentClass<ExternalProps & ExtraGlamorousProps<ExternalProps>>,
    GlamorousComponentFunctions<ExternalProps, Props> {}
...
export type GlamorousComponentProps<ExternalProps> = JSX.IntrinsicAttributes &
  JSX.IntrinsicClassAttributes<
    React.Component<ExtraGlamorousProps<ExternalProps> & ExternalProps, React.ComponentState>

[quicksnap]

@luke-john I've added a TypeScript test for this PR.

Let's open separate tickets for the remaining items. If no one picks them up I'll likely take care of them eventually =)

[quicksnap]

Opened #394 for that one.

[quicksnap]

Huh.. I failed the build but I'm not sure why..

[quicksnap]

That same command (npm run validate) passes on my machine.

[kentcdodds]

My guess is there's a transitive dep issue.... May require a kcd-scripts update... I'll look into it when I find time.

[kentcdodds]

Ok, I've updated things and the build seems to be working now. Make sure to pull the latest changes on your branch before addressing the comments from @luke-john 👍 Thanks!

[luke-john]

Thanks again for adding this support.