Strict mode and review CSS Types

[peduarte]

Taking over from #116

This PR adds a strict mode feature, originally proposed by @fgnass

Strict mode is false by default.

I also did a review of the CSS Types, which closes #48. For example, this allows numbers in margin properties, since internally we convert them to px.

---

Important note

When strict: true shorthands have a stricter syntax:

AFAIK its not possible to type strings that can contain multiple values.

Unless, somehow, we create all the possible combinations of all tokens? (sounds like a terrible, terrible idea)

Say you have 4 space tokens: $1, $2, $3, $4

And you wanna add margin on all sides, you can do:
margin: "$2" // this passes validation, because its a single value in a string and its a token

Now you wanna set margin top/bottom and margin left/right
margin: "$2 $4" // As far as TS is concerned, this is still a single string so it cant offer you autocomplete

The only way would be to construct all the possible strings:

"$1"
"$2"
"$3"
"$4"
"$1 $1"
"$1 $2"
"$1 $3"
"$1 $4"
"$1 $1 $1"
"$1 $1 $2"
"$1 $1 $3"
"$1 $1 $4"
"$1 $1 $1 $1"
"$1 $1 $1 $2"
"$1 $1 $1 $3"
"$1 $1 $1 $4"
"$2 $1"
"$2 $2"
"$2 $3"
"$2 $4"
etc....

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d8033f6:

Sandbox	Source
Stitches CI: Next.js	Configuration
Stitches CI: CRA	Configuration

[drewbourne]

If I understand it correctly this new TypeScript feature may allow for typing the shorthands: microsoft/TypeScript#40336

[peduarte]

@drewbourne i thought so too, but after speaking briefly with @benoitgrelard it doesn't seem like it.

But we could be wrong.

If that feature works for us, that would be amazing!

[benoitgrelard]

At first glance I didn't think so, but yeah I could be totally wrong.
I'm not sure I understand it enough to be completely honest!

On a second look, it does seem that TS would be able to infer parts of a string (the Split example they give is quite telling for example: type T41 = Split<'foo.bar.baz', '.'>; // ['foo', 'bar', 'baz'])

I need to take a deeper read…
Do we know if this is released or when it is due to be released?

[peduarte]

@benoitgrelard I think it's now in v4.1.0-dev.20200911 https://www.npmjs.com/package/typescript/v/4.1.0-dev.20200911

[dirtyrolf]

Yes, the current typescript@next version supports this!

[peduarte]

@dirtyrolf daaamn that is slick! Thanks for looking into it!