Moved typings into repo, and updated typings to improve type safety. #302
Conversation
|
This is awesome ✨! I'll give this a try tonight by using it a TypeScript project I have. Thanks for taking this on :) |
|
|
||
| export var StyleSheet: StyleSheetStatic; | ||
|
|
||
| type CSSInputTypes = StyleDeclarationValue | false | null | void; |
There was a problem hiding this comment.
I think you can either do | false | void or do | false | null | undefined. I believe void is equivalent to null | undefined.
There was a problem hiding this comment.
You are correct. Nice find. I moved this directly from the other PR.
There was a problem hiding this comment.
I actually had to put null back in. While doing tests null was not explicitly allowed, and failed the css(null) test
typings/index.d.ts
Outdated
| */ | ||
| export type StyleDeclarationMap = Map<keyof CSSProperties, string | number>; | ||
| export type StyleDeclaration<T = {}> = { | ||
| [P in keyof T]: CSSProperties | StyleDeclarationMap |
There was a problem hiding this comment.
I didn't realize that aphrodite now explicitly supports calls like:
const declMap = new Map()
declMap.set("background", "red");
StyleSheet.create({
foo: declMap
})
Does that seem right to you, @lencioni?
There was a problem hiding this comment.
Not sure when this was added, but Map support was added to allow key ordering to be honored. https://github.com/Khan/aphrodite#object-key-ordering
There was a problem hiding this comment.
Yep, this was added mostly to allow developers to ensure the order of styles in older versions of node. We needed it at Airbnb when it was introduced, but since then we have been able to update our node version to a new enough version that preserves key order in objects so we no longer need this feature. In practice, I'm not sure how many people are using it anymore.
typings/index.d.ts
Outdated
| export interface StyleDeclarationValue< | ||
| T extends CSSProperties | StyleDeclarationMap = {} | ||
| > { | ||
| _len: number; |
There was a problem hiding this comment.
Since this is part of the private API, I don't know if it's valuable to export these properties, since this is intentionally not part of the public API.
There was a problem hiding this comment.
Will remove. Do you think there is value in leaving it as something like this:
export type StyleDeclarationValue = object;
...
interface StyleSheetStatic {
/**
* Create style sheet
*/
create<T extends StyleDeclaration<T>>(
styles: T
): {[K in keyof T]: StyleDeclarationValue };
...
type CSSInputTypes = StyleDeclarationValue | false | void;
/**
* Get class names from passed styles
*/
export function css(...styles: CSSInputTypes[]): string;This will allow people to import the return value type for StyleSheet.create incase they are passing the objects around before using css. It doesn't afford a ton of type safety, but it will not leak any private API members.
There was a problem hiding this comment.
That sounds good to me :)
| export var StyleSheetTestUtils: StyleSheetTestUtilsStatic; | ||
|
|
||
| export interface SelectorHandler { | ||
| (selector: string, baseSelector: string, callback: (selector: string) => string): |
There was a problem hiding this comment.
Am I misread this line? This looks like a function with a return type of | string | null (with the leading |) Is this supposed to be just string | null?
There was a problem hiding this comment.
yeah, just string | null prettier adds the leading | for multiline statements like this. I assume to make it more readable. If this is a pattern you think should not be here I can remove. I ran all the d.ts files through prettier before adding them.
|
I'm also unsure whether it's kosher to just link to the GitHub page for glamorous, or if we need to include the full MIT license in that file. |
|
Yeah, I was unsure about the link to glamorous. I followed their lead with it. Their typing file has a link to the react typings since they use that as a base. I also made some changes to the file to better align with Aphrodite. @lencioni any idea on the best way to handle that? |
|
I don't think it would hurt to include the license in the file, but I have no idea if it is necessary. I bet @ljharb would know though. |
|
@dmiller9911 is it possible to have something run in CI that ensures that these types (or as many as possible) are always accurate? |
|
@dmiller9911 I think will be good to merge after the update to remove references to private fields! |
Replaces Khan#258 since the contributor has asked for someone else to take over. * Provides intellisense for propteries in StyleSheet.Create * Provides type safety for fonts * updated to include new minify function and StyleSheetTestUtils.getBufferedStyles * Removed dependency on React.CSSProperties typings by pulling in typings from glamorous, and editing to match Aphrodite.
…ed exports from css-properties. Add license/permission from glamorous typings to be safe. Add tests to verify typing functionality over time.
|
This is great @dmiller9911! Thanks for putting this together and responding gracefully to feedback :) |
Replaces #258 since the contributor has asked for someone else to take over.