diff --git a/packages/css/package.json b/packages/css/package.json
index 4a3f5de63..c2295536f 100644
--- a/packages/css/package.json
+++ b/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"
diff --git a/packages/css/test/errors-and-inference.ts b/packages/css/test/errors-and-inference.ts
index 2fc453bc2..7d33a00d7 100644
--- a/packages/css/test/errors-and-inference.ts
+++ b/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'
diff --git a/packages/css/test/past-bugs.ts b/packages/css/test/past-bugs.ts
index dfed52e38..ada329b71 100644
--- a/packages/css/test/past-bugs.ts
+++ b/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 })
+})
diff --git a/packages/docs/src/pages/guides/typescript.mdx b/packages/docs/src/pages/guides/typescript.mdx
index 468456b33..3cb19fb49 100644
--- a/packages/docs/src/pages/guides/typescript.mdx
+++ b/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
-```
-
-_[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
-```
-
-_[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.
diff --git a/packages/typography/package.json b/packages/typography/package.json
index 7cd4c0d0c..8a1cbf81d 100644
--- a/packages/typography/package.json
+++ b/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"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adb6732bf..6cb32cebb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -446,8 +446,8 @@ importers:
packages/css:
dependencies:
csstype:
- specifier: 3.0.10
- version: 3.0.10
+ specifier: ^3.0.10
+ version: 3.1.3
devDependencies:
'@emotion/react':
specifier: ^11.11.1
@@ -1280,8 +1280,8 @@ importers:
specifier: ^1.4.5
version: 1.4.5
csstype:
- specifier: 3.0.10
- version: 3.0.10
+ specifier: ^3.0.10
+ version: 3.1.3
modularscale:
specifier: ^2.0.1
version: 2.0.1
@@ -5287,9 +5287,6 @@ packages:
resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
engines: {node: '>=8'}
- csstype@3.0.10:
- resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
-
csstype@3.1.2:
resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
@@ -13127,7 +13124,7 @@ snapshots:
'@emotion/memoize': 0.9.0
'@emotion/unitless': 0.10.0
'@emotion/utils': 1.4.1
- csstype: 3.0.10
+ csstype: 3.1.3
'@emotion/sheet@1.4.0': {}
@@ -14939,7 +14936,7 @@ snapshots:
dependencies:
'@types/prop-types': 15.7.5
'@types/scheduler': 0.16.3
- csstype: 3.0.10
+ csstype: 3.1.3
'@types/react@18.3.11':
dependencies:
@@ -17067,8 +17064,6 @@ snapshots:
dependencies:
cssom: 0.3.8
- csstype@3.0.10: {}
-
csstype@3.1.2: {}
csstype@3.1.3: {}