fix(types): don't lock csstype version

Author: hasparus

packages/css/package.json

@@ -35,7 +35,7 @@
     "access": "public"
   },
   "dependencies": {
-    "csstype": "3.0.10"
+    "csstype": "^3.0.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1"

packages/css/test/errors-and-inference.ts

@@ -7,42 +7,6 @@ const expectSnippet = expecter(`
 `)
 
 describe('Theme', () => {
-  test('shows friendly error only on bad property', () => {
-    expectSnippet(`
-      css({
-        bg: 'salmon',
-        whiteSpace: 'no-works',
-        '> form': {
-          color: 'blue',
-          widows: 'bar',
-          // unknown CSS property is accepted
-          whitePace: 'this-works',
-        },
-      })
-    `).toFail(
-      /Error snippet\.tsx \(\d+,\d+\): Type '"no-works"' is not assignable to type [\s\S]+'./
-    )
-  })
-
-  test('shows friendly error on nested object', () => {
-    expectSnippet(`
-      css({
-        bg: 'salmon',
-        '> form': {
-          color: 'blue',
-          whiteSpace: 'banana',
-        },
-      })
-    `).toFail(
-      new RegExp(
-        `Error snippet\\.tsx \\(\\d+,\\d+\\): Type '{ color: "blue"; whiteSpace: "banana"; }'` +
-          ` is not assignable to type '[\\s\\S]+'.\\n\\s+` +
-          `Types of property 'whiteSpace' are incompatible.\\n\\s+` +
-          `Type '"banana"' is not assignable to type [\\s\\S]+`
-      )
-    )
-  })
-
   test('accepts unknown CSS property without error', () => {
     expect(css({ '> form': { windows: 'baz' } })({})).toStrictEqual({
       '> form': { windows: 'baz' },
@@ -96,9 +60,6 @@ describe('Theme', () => {
     css({ size: (t) => get(t, 'space.3') + get(t, 'sizes.5') })
 
     const parse = (x: string | number | undefined | {}) => parseInt(String(x))
-    css({
-      size: (t) => parse(t.space?.[3]) + parse(t.sizes?.[5]),
-    })
 
     // Current limitation. If you broke this one, that's actually pretty awesome,
     // but TypeScript chapter in the docs needs an update.
@@ -110,30 +71,6 @@ describe('Theme', () => {
   })
 })
 
-// This is not a feature, but the TypeScript chapter in the docs will need an
-// update if this test fails.
-test('inferred type `string` is too wide for `whiteSpace`', () => {
-  expectSnippet(`
-    const style = {
-      whiteSpace: 'pre-line'
-    }
-
-    css(style);
-  `).toFail(
-    /Type '{ whiteSpace: string; }' is not assignable to type 'ThemeUICSSObject'./
-  )
-
-  expectSnippet(`
-    import { ThemeUICSSObject } from './packages/css'
-
-    const style: ThemeUICSSObject = {
-      whiteSpace: 'pre-line'
-    }
-
-    css(style);
-  `).toSucceed()
-})
-
 describe('ColorMode', () => {
   const expectedSnippet = expectSnippet(`
     import { ColorMode } from './packages/css/src'

packages/css/test/past-bugs.ts

@@ -32,3 +32,10 @@ describe('theme scales, get and default object property (#1439)', () => {
     expect(actual).toStrictEqual({ zIndex: 1 })
   })
 })
+
+// https://github.com/system-ui/theme-ui/issues/2520
+it('accepts number as aspect ratio', () => {
+  const actual = css({ aspectRatio: 0.5 })({})
+
+  expect(actual).toStrictEqual({ aspectRatio: 0.5 })
+})

packages/docs/src/pages/guides/typescript.mdx

@@ -127,50 +127,3 @@ const syntaxHighlighting = theme.syntaxHighlighting
 
 _[Try it in TypeScript Playground.](https://www.typescriptlang.org/v2/en/play?#code/JYWwDg9gTgLgBAbzgFQBYFMTrgXzgMyghDgHIYMsBaAV2FIG4AoJ4AOxnSnwEMBjbAFkAngGVhHHgA8AEsADmqADYLUMdvLSZsCJnALR08ojTYATAFxwAzjCgbmOFmfR8lPKNhAQzNJdnJKdFp6RD04dk5ufmwtLDD9fWsJGGk5RRVFdTZ5KxFxSVlVTLUNOPRwpycmPgg2WzgKbStyuABeBJsUtOLVbNzO-XxDYwhTSzIAYgAmWdIAGkqmHGYauobkwvTlPo12xqCAOk3UoozdnLX6+C4iKH2mrGPhGDYe86yNJiA)_
 
-## Common Problems
-
-### Union types are not inferred without explicit annotation
-
-Style objects defined outside of `css` function and `sx` prop need explicit
-annotation to prevent following error.
-
-```tsx
-/** @jsxImportSource theme-ui */
-
-const style = { whiteSpace: 'pre-line' }
-
-// Type '{ whiteSpace: string; }' is not assignable to type 'ThemeUICSSObject'.
-// Type 'string' is not assignable to type '"inherit" | "initial" | "revert" | "unset" | "normal" | "break-spaces"
-return <div sx={style} />
-```
-
-_[Try it on CodeSandbox.](https://codesandbox.io/s/theme-ui-inferrence-too-wide-vkrf5?file=/src/index.tsx&view=editor&previewwindow=tests)_
-
-TypeScript assumes that `whiteSpace` here is a `string`, but the `whiteSpace`
-property in `ThemeUICSSObject` is a union of possible white-space values
-([see on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values))
-or a nested style object.
-
-We can explicitly annotate `style` ensure that it is a correct Theme UI style
-object and that `whiteSpace` is one of appropriate values.
-
-```tsx
-/** @jsxImportSource theme-ui */
-import { ThemeUICSSObject } from 'theme-ui'
-
-const style: ThemeUICSSObject = { whiteSpace: 'pre-line' }
-
-// No error
-return <div sx={style} />
-```
-
-_[Try it on CodeSandbox.](https://codesandbox.io/s/theme-ui-inferrence-too-wide-vkrf5?file=/src/index.tsx&view=editor&previewwindow=tests)_
-
-We could also fix our problem by narrowing the type of `style` with a
-[const assertion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions).
-
-```tsx
-const style = { whiteSpace: 'pre-line' } as const
-```
-
-This is succinct, but error prone, because we won't get TS intellisense support inside of this object.

packages/typography/package.json

@@ -13,7 +13,7 @@
     "@types/modularscale": "^2.0.0",
     "@types/typography": "^0.16.4",
     "compass-vertical-rhythm": "^1.4.5",
-    "csstype": "3.0.10",
+    "csstype": "^3.0.10",
     "modularscale": "^2.0.1",
     "type-fest": "^2.18.0"
   },