",
"license": "MIT",
- "repository": "system-ui/theme-ui",
- "devDependencies": {
- "react": "^18.1.0"
- }
+ "repository": "system-ui/theme-ui"
}
diff --git a/packages/core/jsx-dev-runtime/package.json b/packages/core/jsx-dev-runtime/package.json
index cbc073d53..57096abfd 100644
--- a/packages/core/jsx-dev-runtime/package.json
+++ b/packages/core/jsx-dev-runtime/package.json
@@ -5,8 +5,10 @@
"module": "dist/theme-ui-core-jsx-dev-runtime.esm.js",
"types": "dist/theme-ui-core-jsx-dev-runtime.cjs.d.ts",
"dependencies": {
- "@emotion/react": "*",
- "@theme-ui/parse-props": "*",
- "react": "*"
+ "@emotion/react": "^11",
+ "react": "^18"
+ },
+ "devDependencies": {
+ "@types/react": "^18"
}
}
diff --git a/packages/core/jsx-runtime/package.json b/packages/core/jsx-runtime/package.json
index 097bcf852..11872a4a5 100644
--- a/packages/core/jsx-runtime/package.json
+++ b/packages/core/jsx-runtime/package.json
@@ -5,8 +5,10 @@
"module": "dist/theme-ui-core-jsx-runtime.esm.js",
"types": "dist/theme-ui-core-jsx-runtime.cjs.d.ts",
"dependencies": {
- "@emotion/react": "*",
- "@theme-ui/parse-props": "*",
- "react": "*"
+ "@emotion/react": "^11",
+ "react": "^18"
+ },
+ "devDependencies": {
+ "@types/react": "^18"
}
}
diff --git a/packages/core/package.json b/packages/core/package.json
index 41b84c3a0..3edbff5d7 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@theme-ui/core",
- "version": "0.14.7",
+ "version": "0.15.0-rc.1",
"source": "src/index.ts",
"main": "dist/theme-ui-core.cjs.js",
"module": "dist/theme-ui-core.esm.js",
@@ -14,14 +14,18 @@
"access": "public"
},
"dependencies": {
- "@theme-ui/css": "0.14.7",
- "@theme-ui/parse-props": "0.14.7",
+ "@theme-ui/css": "workspace:^",
"deepmerge": "^4.2.2"
},
"peerDependencies": {
"@emotion/react": "^11",
"react": ">=18"
},
+ "devDependencies": {
+ "@types/react": "^18",
+ "@babel/core": "^7",
+ "@theme-ui/test-utils": "workspace:^"
+ },
"preconstruct": {
"entrypoints": [
"index.ts",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c3c9e7e23..d20909db2 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -6,7 +6,7 @@ import { Theme } from '@theme-ui/css'
import * as React from 'react'
import deepmerge from 'deepmerge'
import packageInfo from '@emotion/react/package.json'
-import parseProps from '@theme-ui/parse-props'
+import { parseProps } from './parseProps'
import { ThemeUIJSX } from './jsx-namespace'
export type { ThemeUIJSX } from './jsx-namespace'
diff --git a/packages/core/src/jsx-dev-runtime.ts b/packages/core/src/jsx-dev-runtime.ts
index 3b5c6eaa8..25ac7236c 100644
--- a/packages/core/src/jsx-dev-runtime.ts
+++ b/packages/core/src/jsx-dev-runtime.ts
@@ -1,13 +1,14 @@
// @ts-ignore
import { jsxDEV as emotionJsxDEV } from '@emotion/react/jsx-dev-runtime'
-import parseProps from '@theme-ui/parse-props'
import { ThemeUIJSX } from './jsx-namespace'
+import { parseProps } from './parseProps'
+import type { ElementType } from 'react'
export { Fragment } from 'react'
export type { ThemeUIJSX as JSX } from './jsx-namespace'
export const jsxDEV = (
- type: React.ElementType
,
+ type: ElementType
,
props: P,
key: string | undefined,
isStaticChildren: boolean,
diff --git a/packages/core/src/jsx-runtime.ts b/packages/core/src/jsx-runtime.ts
index 1fa70af9d..d974d8386 100644
--- a/packages/core/src/jsx-runtime.ts
+++ b/packages/core/src/jsx-runtime.ts
@@ -4,20 +4,21 @@ import {
// @ts-ignore
jsxs as emotionJsxs,
} from '@emotion/react/jsx-runtime'
-import parseProps from '@theme-ui/parse-props'
import { ThemeUIJSX } from './jsx-namespace'
+import { parseProps } from './parseProps'
+import type { ElementType } from 'react'
export { Fragment } from 'react'
export type { ThemeUIJSX as JSX } from './jsx-namespace'
export const jsx =
(
- type: React.ElementType
,
+ type: ElementType
,
props: P,
key?: string
): ThemeUIJSX.Element => emotionJsx(type, parseProps(props), key)
export const jsxs =
(
- type: React.ElementType
,
+ type: ElementType
,
props: P,
key?: string
): ThemeUIJSX.Element => emotionJsxs(type, parseProps(props), key)
diff --git a/packages/parse-props/src/index.ts b/packages/core/src/parseProps.tsx
similarity index 70%
rename from packages/parse-props/src/index.ts
rename to packages/core/src/parseProps.tsx
index fa03902c8..a9ae69ef7 100644
--- a/packages/parse-props/src/index.ts
+++ b/packages/core/src/parseProps.tsx
@@ -1,4 +1,3 @@
-import { Interpolation } from '@emotion/react'
import { css } from '@theme-ui/css'
const getCSS = (props: any) => (theme: any) => {
@@ -7,15 +6,16 @@ const getCSS = (props: any) => (theme: any) => {
return [styles, raw]
}
-const parseProps = (props: any) => {
+export function parseProps(props: any) {
if (!props || (!props.sx && !props.css)) return props
- const next: typeof props & { css: Interpolation } = {}
+
+ const next: Record = {}
+
for (let key in props) {
if (key === 'sx') continue
next[key] = props[key]
}
+
next.css = getCSS(props)
return next
}
-
-export default parseProps
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 5d4792a8e..2484ee901 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,8 +1,6 @@
import { Interpolation } from '@emotion/react'
import { ThemeUIStyleObject, Theme as ThemeUITheme } from '@theme-ui/css'
-import { ThemeUIJSX } from './jsx-namespace'
-
export interface SxProp {
/**
* The sx prop lets you style elements inline, using values from your
@@ -18,35 +16,3 @@ export interface SxProp {
*/
css?: Interpolation
}
-
-export interface IntrinsicSxElements {
- p: ThemeUIJSX.IntrinsicElements['p']
- b: ThemeUIJSX.IntrinsicElements['b']
- i: ThemeUIJSX.IntrinsicElements['i']
- a: ThemeUIJSX.IntrinsicElements['a']
- h1: ThemeUIJSX.IntrinsicElements['h1']
- h2: ThemeUIJSX.IntrinsicElements['h2']
- h3: ThemeUIJSX.IntrinsicElements['h3']
- h4: ThemeUIJSX.IntrinsicElements['h4']
- h5: ThemeUIJSX.IntrinsicElements['h5']
- h6: ThemeUIJSX.IntrinsicElements['h6']
- img: ThemeUIJSX.IntrinsicElements['img']
- pre: ThemeUIJSX.IntrinsicElements['pre']
- code: ThemeUIJSX.IntrinsicElements['code']
- ol: ThemeUIJSX.IntrinsicElements['ol']
- ul: ThemeUIJSX.IntrinsicElements['ul']
- li: ThemeUIJSX.IntrinsicElements['li']
- blockquote: ThemeUIJSX.IntrinsicElements['blockquote']
- hr: ThemeUIJSX.IntrinsicElements['hr']
- table: ThemeUIJSX.IntrinsicElements['table']
- tr: ThemeUIJSX.IntrinsicElements['tr']
- th: ThemeUIJSX.IntrinsicElements['th']
- td: ThemeUIJSX.IntrinsicElements['td']
- em: ThemeUIJSX.IntrinsicElements['em']
- strong: ThemeUIJSX.IntrinsicElements['strong']
- div: ThemeUIJSX.IntrinsicElements['div']
- del: ThemeUIJSX.IntrinsicElements['div']
- inlineCode: ThemeUIJSX.IntrinsicElements['div']
- thematicBreak: ThemeUIJSX.IntrinsicElements['div']
- root: ThemeUIJSX.IntrinsicElements['div']
-}
diff --git a/packages/core/test/index.tsx b/packages/core/test/index.tsx
index 528011761..56bfecb1d 100644
--- a/packages/core/test/index.tsx
+++ b/packages/core/test/index.tsx
@@ -31,7 +31,7 @@ describe('ThemeProvider', () => {
test('warns when multiple versions of emotion are installed', () => {
const restore = mockConsole()
- const json = renderJSON(
+ const _ = renderJSON(
<__ThemeUIContext.Provider
value={{
__EMOTION_VERSION__: '9.0.0',
@@ -282,12 +282,13 @@ describe('merge', () => {
test('does not attempt to merge React components', () => {
const h1 = React.forwardRef((props, ref) => (
+ // eslint-disable-next-line jsx-a11y/heading-has-content
`).toSucceed()
- // Theme UI theme can be injected to @emotion/react module in userspace
- expectSnippet(
- `
- import { Theme as ThemeUITheme } from '@theme-ui/css'
+ // TODO: uncomment this some day
+ // // Theme UI theme can be injected to @emotion/react module in userspace
+ // expectSnippet(
+ // `
+ // import { Theme as ThemeUITheme } from './packages/css'
- declare module '@emotion/react' {
- export interface Theme extends ThemeUITheme {}
- }
+ // declare module '@emotion/react' {
+ // export interface Theme extends ThemeUITheme {}
+ // }
- {
- const _t = t;
- return {}
- }}
- />`
- ).toInfer('_t', 'Theme')
+ //
{
+ // const _t = t;
+ // return {}
+ // }}
+ // />`
+ // ).toInfer('_t', 'Theme')
expectSnippet(
`import { css } from '@emotion/react'
diff --git a/packages/css/package.json b/packages/css/package.json
index 26594884f..579ac7dec 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
{
"name": "@theme-ui/css",
- "version": "0.14.7",
+ "version": "0.15.0-rc.1",
"source": "src/index.ts",
"main": "dist/theme-ui-css.cjs.js",
"module": "dist/theme-ui-css.esm.js",
@@ -18,6 +18,11 @@
"peerDependencies": {
"@emotion/react": "^11"
},
+ "devDependencies": {
+ "@types/react": "^18",
+ "@babel/core": "^7",
+ "@theme-ui/test-utils": "workspace:^"
+ },
"preconstruct": {
"entrypoints": [
"index.ts",
diff --git a/packages/css/test/errors-and-inference.ts b/packages/css/test/errors-and-inference.ts
index 0e9be3dad..6c4915db2 100644
--- a/packages/css/test/errors-and-inference.ts
+++ b/packages/css/test/errors-and-inference.ts
@@ -51,7 +51,7 @@ describe('Theme', () => {
test('infers Theme argument in computed style function', () => {
expectSnippet(`
- import { get } from 'theme-ui'
+ import { get } from './packages/css'
css({
p: t => {
@@ -64,13 +64,13 @@ describe('Theme', () => {
test('accepts additional properties by declaration merging', () => {
expectSnippet(`
- import { Theme } from 'theme-ui';
+ import { Theme } from './packages/css';
interface MySyntaxHighlightingTheme {
foreground: string
}
- declare module 'theme-ui' {
+ declare module './packages/css' {
interface Theme {
syntaxHighlighting?: MySyntaxHighlightingTheme
}
@@ -87,7 +87,7 @@ describe('Theme', () => {
})
test('works as described in the docs', () => {
- const theme: Theme = {
+ const _theme: Theme = {
colors: { background: 'white', text: 'black', primary: '#07f' },
space: [0, 8, 16, 32, 64, 128, 256],
sizes: [0, 8, 16, 32, 64, 128, 256],
@@ -124,7 +124,7 @@ test('inferred type `string` is too wide for `whiteSpace`', () => {
)
expectSnippet(`
- import { ThemeUICSSObject } from 'theme-ui'
+ import { ThemeUICSSObject } from './packages/css'
const style: ThemeUICSSObject = {
whiteSpace: 'pre-line'
diff --git a/packages/css/test/utils.ts b/packages/css/test/utils.ts
index 0c401b988..714241aeb 100644
--- a/packages/css/test/utils.ts
+++ b/packages/css/test/utils.ts
@@ -23,7 +23,7 @@ describe(makeTheme, () => {
})
it('is exposed from entrypoint /utils and validates Theme type', () => {
- expecter('import { makeTheme } from "@theme-ui/css/utils"')(
+ expecter('import { makeTheme } from "./packages/css/utils"')(
'const t = makeTheme("banana")'
).toFail(/Type '"banana"' has no properties in common with type 'Theme'./)
})
diff --git a/packages/custom-properties/README.md b/packages/custom-properties/README.md
index 89787b057..bb4bd0449 100644
--- a/packages/custom-properties/README.md
+++ b/packages/custom-properties/README.md
@@ -7,7 +7,7 @@ https://theme-ui.com
## Installation
```
-yarn add @theme-ui/custom-properties
+npm i @theme-ui/custom-properties
```
## Usage
diff --git a/packages/custom-properties/package.json b/packages/custom-properties/package.json
index 92181acd4..e340779d0 100644
--- a/packages/custom-properties/package.json
+++ b/packages/custom-properties/package.json
@@ -1,7 +1,7 @@
{
"name": "@theme-ui/custom-properties",
"description": "Generate CSS custom properties for use with Theme UI",
- "version": "0.14.7",
+ "version": "0.15.0-rc.1",
"source": "src/index.ts",
"main": "dist/theme-ui-custom-properties.cjs.js",
"module": "dist/theme-ui-custom-properties.esm.js",
@@ -16,7 +16,7 @@
"pluralize": "^8.0.0"
},
"devDependencies": {
- "@theme-ui/css": "0.14.7",
+ "@theme-ui/css": "0.15.0-rc.1",
"@types/pluralize": "^0.0.29"
},
"gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
diff --git a/packages/custom-properties/test/__snapshots__/test.js.snap b/packages/custom-properties/test/__snapshots__/test.mjs.snap
similarity index 100%
rename from packages/custom-properties/test/__snapshots__/test.js.snap
rename to packages/custom-properties/test/__snapshots__/test.mjs.snap
diff --git a/packages/custom-properties/test/test.js b/packages/custom-properties/test/test.mjs
similarity index 89%
rename from packages/custom-properties/test/test.js
rename to packages/custom-properties/test/test.mjs
index 5f3523257..7e37ea1ac 100644
--- a/packages/custom-properties/test/test.js
+++ b/packages/custom-properties/test/test.mjs
@@ -1,6 +1,11 @@
-import toCustomProperties from '../src'
+// @ts-check
+import themeUICustomProperties from '..'
import mockConsole from 'jest-mock-console'
+const toCustomProperties = /** @type {{ default: import('..').default }} */ (
+ /** @type {any} */ (themeUICustomProperties)
+).default
+
const theme = {
colors: {
text: '#000',
diff --git a/packages/docs/gatsby-config.js b/packages/docs/gatsby-config.js
index 84bf27784..a0127ea0f 100644
--- a/packages/docs/gatsby-config.js
+++ b/packages/docs/gatsby-config.js
@@ -1,11 +1,11 @@
const remarkSlug = require('remark-slug')
-const remarkPlugins = [remarkSlug]
module.exports = {
siteMetadata: {
siteUrl: 'https://theme-ui.com',
},
plugins: [
+ 'gatsby-plugin-pnpm',
'gatsby-plugin-theme-ui',
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
@@ -13,7 +13,7 @@ module.exports = {
resolve: 'gatsby-plugin-mdx',
options: {
extensions: ['.mdx', '.md'],
- remarkPlugins,
+ remarkPlugins: [remarkSlug],
},
},
{
@@ -29,4 +29,14 @@ module.exports = {
DEV_SSR: true,
DEV_WEBPACK_CACHE: true,
},
+ // https://www.gatsbyjs.com/docs/reference/release-notes/v4.7/#trailingslash-option
+ trailingSlash: 'never', // We currently have duplicate Algolia results. This __may__ fix them.
+}
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+ actions.setWebpackConfig({
+ resolve: {
+ modules: [gatsbyNodeModules, 'node_modules'],
+ },
+ })
}
diff --git a/packages/docs/gatsby-node.js b/packages/docs/gatsby-node.js
index b01c19394..9980252f4 100644
--- a/packages/docs/gatsby-node.js
+++ b/packages/docs/gatsby-node.js
@@ -1,4 +1,6 @@
const presets = require('@theme-ui/presets')
+const fs = require('fs')
+const path = require('path')
const Preset = require.resolve('./src/templates/preset')
@@ -25,3 +27,14 @@ module.exports.createPages = ({ actions }) => {
})
})
}
+
+module.exports.onCreateWebpackConfig = ({ actions }) => {
+ actions.setWebpackConfig({
+ resolve: {
+ modules: [
+ path.resolve(fs.realpathSync('node_modules/gatsby'), '..'),
+ 'node_modules',
+ ],
+ },
+ })
+}
diff --git a/packages/docs/jsconfig.json b/packages/docs/jsconfig.json
index ddc42a044..03f5d0ed7 100644
--- a/packages/docs/jsconfig.json
+++ b/packages/docs/jsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
- "jsx": "preserve"
+ "jsx": "preserve",
+ "resolveJsonModule": true
},
"exclude": [".cache", "node_modules", "public"],
"include": ["**/*.js", "./declarations.d.ts"]
diff --git a/packages/docs/package.json b/packages/docs/package.json
index adf3e5706..cb955bec0 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,13 +1,14 @@
{
"private": true,
"name": "docs",
- "version": "0.14.7",
+ "version": "0.15.0-rc.1",
"main": "dist/docs.cjs.js",
"author": "Brent Jackson
",
"license": "MIT",
"repository": "system-ui/theme-ui",
"scripts": {
"start": "gatsby develop",
+ "dev": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
@@ -17,28 +18,33 @@
"icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
},
"dependencies": {
- "@emotion/react": "^11.9.0",
- "@mdx-js/mdx": "^1.6.22",
- "@mdx-js/react": "^1.6.22",
- "@theme-ui/color": "0.14.7",
- "@theme-ui/components": "0.14.7",
- "@theme-ui/css": "0.14.7",
- "@theme-ui/editor": "0.14.7",
- "@theme-ui/match-media": "0.14.7",
- "@theme-ui/presets": "0.14.7",
- "@theme-ui/prism": "0.14.7",
- "@theme-ui/sidenav": "0.14.7",
- "@theme-ui/style-guide": "0.14.7",
- "@theme-ui/typography": "0.14.7",
+ "@babel/helper-string-parser": "^7.18.10",
+ "@emotion/react": "^11",
+ "@mdx-js/mdx": "^1",
+ "@mdx-js/react": "^1",
+ "@theme-ui/color": "workspace:^",
+ "@theme-ui/core": "workspace:^",
+ "@theme-ui/components": "workspace:^",
+ "@theme-ui/css": "workspace:^",
+ "@theme-ui/match-media": "workspace:^",
+ "@theme-ui/mdx": "workspace:^",
+ "@theme-ui/presets": "workspace:^",
+ "@theme-ui/prism": "workspace:^",
+ "@theme-ui/sidenav": "workspace:^",
+ "@theme-ui/style-guide": "workspace:^",
+ "@theme-ui/tachyons": "workspace:^",
+ "@theme-ui/tailwind": "workspace:^",
+ "@theme-ui/typography": "workspace:^",
"copy-to-clipboard": "^3.2.0",
- "eslint-config-react-app": "^6.0.0",
- "gatsby": "^4.20.0",
+ "gatsby": "^4.21.0",
"gatsby-plugin-catch-links": "^4.2.0",
"gatsby-plugin-compile-es6-packages": "^2.1.1",
- "gatsby-plugin-mdx": "3.2.0",
+ "gatsby-plugin-mdx": "^3",
+ "gatsby-plugin-pnpm": "^1.2.10",
"gatsby-plugin-react-helmet": "^5.2.0",
- "gatsby-plugin-theme-ui": "0.14.7",
- "gatsby-theme-style-guide": "0.14.7",
+ "gatsby-plugin-theme-ui": "workspace:^",
+ "gatsby-theme-style-guide": "workspace:^",
+ "is-absolute-url": "^4.0.1",
"lodash.merge": "^4.6.1",
"lodash.omit": "^4.5.0",
"prismjs": "^1.16.0",
@@ -48,7 +54,7 @@
"react-live": "^2.1.2",
"remark-slug": "^6",
"stringify-object": "^3",
- "theme-ui": "0.14.7",
+ "theme-ui": "workspace:^",
"typography-theme-alton": "^0.16.19",
"typography-theme-anonymous": "^0.15.10",
"typography-theme-bootstrap": "^0.16.19",
@@ -86,12 +92,19 @@
"typography-theme-wordpress-2015": "^0.16.19",
"typography-theme-wordpress-2016": "^0.16.19",
"typography-theme-wordpress-kubrick": "^0.16.19",
- "typography-theme-zacklive": "^1.0.2"
+ "typography-theme-zacklive": "^1.0.2",
+ "@types/react": "^18"
},
"devDependencies": {
- "@babel/register": "^7.8.6"
+ "@babel/core": "^7",
+ "@babel/register": "^7.8.6",
+ "babel-eslint": "^10",
+ "eslint": "^8",
+ "typescript": "^4"
},
- "resolutions": {
- "@emotion/react": "11.9.0"
+ "pnpm": {
+ "overrides": {
+ "@mdx-js/react": "^1"
+ }
}
}
diff --git a/packages/docs/src/components/code.js b/packages/docs/src/components/code.js
index c6b0dffaf..029e6166b 100644
--- a/packages/docs/src/components/code.js
+++ b/packages/docs/src/components/code.js
@@ -1,5 +1,7 @@
+// @ts-check
/** @jsx jsx */
-import { jsx, Themed, Text } from 'theme-ui'
+import { jsx, Text } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
import Prism from '@theme-ui/prism'
import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live'
import * as themeUI from 'theme-ui'
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
index 1d6a61462..924b55b58 100644
--- a/packages/docs/src/components/layout.js
+++ b/packages/docs/src/components/layout.js
@@ -1,7 +1,7 @@
/** @jsx jsx */
import { Fragment } from 'react'
import { jsx, useColorMode } from 'theme-ui'
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, Suspense, useTransition } from 'react'
import { Flex, Box } from '@theme-ui/components'
import { AccordionNav } from '@theme-ui/sidenav'
import { Link } from 'gatsby'
@@ -90,26 +90,26 @@ export default function DocsLayout(props) {
Theme UI
-
-
-
- GitHub
-
- setMode(nextColorMode)}
- >
- {getModeName(mode)}
-
+
+
+
+
+ GitHub
+
+ setMode(nextColorMode)}
+ >
+ {getModeName(mode)}
+
+
-
+
)}
+