Library supports generation of invalid `react-pdf` styles

[chrissantamaria]

It seems like strings such as block are supported and will generate styles like { display: 'block' } despite these not being supported by react-pdf. This might lead to confusion for consumers as well as accidental style incompatibilities like in #5.

One way to fix this would be to import the Style type directly from @react-pdf/types to replace the current StyleSheet type, enforcing that all styles in definition maps like exactUtilities or utilityPatterns are valid. This doesn't catch all possible errors (such as those from dynamically generated classes), but it should be a good starting point.

Full tsc output with basic approach implemented

``` src/index.ts(8,12): error TS2322: Type '"block"' is not assignable to type '"none" | "flex"'. src/index.ts(9,21): error TS2322: Type '"inline-block"' is not assignable to type '"none" | "flex"'. src/index.ts(10,13): error TS2322: Type '"inline"' is not assignable to type '"none" | "flex"'. src/index.ts(12,20): error TS2322: Type '"inline-flex"' is not assignable to type '"none" | "flex"'. src/index.ts(19,22): error TS2322: Type '"auto"' is not assignable to type '"hidden"'. src/index.ts(21,22): error TS2322: Type '"clip"' is not assignable to type '"hidden"'. src/index.ts(22,25): error TS2322: Type '"visible"' is not assignable to type '"hidden"'. src/index.ts(23,24): error TS2322: Type '"scroll"' is not assignable to type '"hidden"'. src/index.ts(24,24): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(25,24): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(26,26): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(27,26): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(28,24): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(29,24): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(30,27): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(31,27): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(32,26): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(33,26): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'? src/index.ts(34,13): error TS2322: Type '"static"' is not assignable to type '"absolute" | "relative"'. src/index.ts(35,12): error TS2322: Type '"fixed"' is not assignable to type '"absolute" | "relative"'. src/index.ts(65,23): error TS2322: Type '"space-evenly"' is not assignable to type '"flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around"'. src/index.ts(84,16): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'? src/index.ts(85,15): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'? src/index.ts(91,21): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'? src/index.ts(92,21): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'? src/index.ts(96,20): error TS2322: Type '"none"' is not assignable to type '"capitalize" | "lowercase" | "uppercase"'. src/index.ts(100,5): error TS2322: Type '{ overflow: "hidden"; textOverflow: "ellipsis"; whiteSpace: string; }' is not assignable to type 'Style'. Object literal may only specify known properties, and 'whiteSpace' does not exist in type 'Style'. src/index.ts(103,18): error TS2322: Type '"clip"' is not assignable to type '"ellipsis"'. src/index.ts(112,22): error TS2322: Type '"double"' is not assignable to type '"dashed" | "dotted" | "solid"'. src/index.ts(113,22): error TS2322: Type '"hidden"' is not assignable to type '"dashed" | "dotted" | "solid"'. src/index.ts(114,20): error TS2322: Type '"none"' is not assignable to type '"dashed" | "dotted" | "solid"'. src/index.ts(132,3): error TS2820: Type '"order"' is not assignable to type 'keyof Style | [keyof Style, keyof Style | (keyof Style)[]]'. Did you mean '"border"'? ```

If this seems like a reasonable approach I'm happy to open a PR with my local changes.

[aanckar]

Sounds good to me - please do!

[aanckar]

I've actually started to implement this myself now in a separate branch, will hopefully release this (and some other improvements) soon.

[aanckar]

This should be fixed now in v2.0.0