Merge pull request #1867 from system-ui/peer-deps

Move Emotion and MDX packages to peerDeps

Author: hasparus

.eslintrc.js

@@ -20,8 +20,23 @@ module.exports = {
     ],
     '@typescript-eslint/no-redeclare': 'off',
 
+    // Ensure peerDependencies and dependencies are properly configured
+    'import/no-extraneous-dependencies': 'error',
+
     // TypeScript checks this
     'no-undef': 'off',
     'no-lone-blocks': 'off',
   },
+  overrides: [
+    {
+      files: [
+        'packages/**/test/**/*.{ts,tsx,js,jsx}',
+        'packages/e2e/**/*.{ts,tsx}',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'react/jsx-pascal-case': 'off',
+      },
+    },
+  ],
 }

.github/workflows/ci.yml

@@ -25,6 +25,9 @@ jobs:
           install-command:
             yarn --ignore-optional --pure-lockfile --non-interactive
 
+      - name: Run linter
+        run: yarn lint --quiet
+
       - name: Run tests and collect coverage
         run: yarn test --coverage
 

examples/codesandbox-starter/package.json

@@ -1,20 +1,20 @@
 {
   "name": "theme-ui-starter",
-  "private": "true",
-  "version": "0.4.0-rc.0",
+  "private": true,
+  "version": "0.1.0",
   "description": "A sandbox configured with Theme UI, including the `base` theme.",
   "main": "index.html",
   "scripts": {
     "start": "parcel index.html --open",
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.1",
+    "@emotion/react": "^11",
     "@mdx-js/react": "^1.6.22",
-    "@theme-ui/presets": "^0.4.0-rc.0",
+    "@theme-ui/presets": "latest",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",

examples/create-react-app/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "mdx.macro": "^0.2.8",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "theme-ui": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

examples/custom-pragma/package.json

@@ -17,6 +17,6 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/dark-mode/package.json

@@ -17,6 +17,6 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/gatsby-plugin/package.json

@@ -15,10 +15,10 @@
     "@mdx-js/react": "^1.6.22",
     "gatsby": "^2.6.3",
     "gatsby-plugin-mdx": "^1.6.0",
-    "gatsby-plugin-theme-ui": "^0.4.0-rc.0",
+    "gatsby-plugin-theme-ui": "latest",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@testing-library/react": "^9.1.3",

examples/gatsby/package.json

@@ -17,7 +17,7 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@types/react": "^16.9.55",

examples/next/package.json

@@ -12,7 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@mdx-js/loader": "^1.6.16",
+    "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^11.1.2",
     "next": "^11.1.3",
     "react": "^17.0.2",

examples/prism/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "prism-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "1.0.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -19,6 +19,6 @@
     "prismjs": "^1.16.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/typography/package.json

@@ -19,7 +19,7 @@
     "lodash.merge": "^4.6.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0",
+    "theme-ui": "latest",
     "theme-ui-typography": "^0.1.7",
     "typography-theme-fairy-gates": "^0.16.19"
   }

package.json

@@ -7,6 +7,7 @@
     "dev:docs": "yarn workspace docs start",
     "clean": "lerna run clean && rimraf packages/*/{dist,rts2_cache*}",
     "format": "prettier --write \"**/*.{ts,js,json}\" \"**/*.md\"  \"**/*.mdx\"",
+    "lint": "eslint --ext .ts,.tsx,.js \"packages/**/*.{ts,tsx,js}\"",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json",
@@ -71,7 +72,10 @@
     "ts-jest": "^27.0.7",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
-    "typescript": "^4.5.2"
+    "typescript": "^4",
+    "@mdx-js/react": "^1 || ^2",
+    "@types/mdx-js__react": "^1 || ^2",
+    "@emotion/react": "^11"
   },
   "husky": {
     "hooks": {

packages/color-modes/package.json

@@ -14,13 +14,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.6.0",
     "@theme-ui/core": "0.12.0",
     "@theme-ui/css": "0.12.0",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "devDependencies": {
     "react": "^17.0.1"

packages/color-modes/src/index.tsx

@@ -21,7 +21,7 @@ import {
   NestedScale,
   css,
 } from '@theme-ui/css'
-import { Global, Interpolation } from '@emotion/react'
+import { Global } from '@emotion/react'
 
 import {
   toCustomProperties,

packages/components/README.md

@@ -2,10 +2,11 @@
 
 Primitive layout, typographic, and other components for use with Theme UI.
 
-**Note:** _This package is included in the main `theme-ui` package and a separate installation is not required._
+**Note:** _This package is included in the main `theme-ui` package and a
+separate installation is not required._
 
 ```sh
-npm i @theme-ui/components
+npm i @theme-ui/components @emotion/react @emotion/styled
 ```
 
 https://theme-ui.com/components

packages/components/package.json

@@ -7,16 +7,16 @@
   "sideEffects": false,
   "scripts": {},
   "dependencies": {
-    "@emotion/react": "^11.6.0",
-    "@emotion/styled": "^11.6.0",
     "@styled-system/color": "^5.1.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2",
     "@theme-ui/css": "0.12.0",
     "@types/styled-system": "^5.1.13"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11"
   },
   "publishConfig": {
     "access": "public"

packages/core/README.md

@@ -5,7 +5,7 @@
 `@theme-ui/core` provides minimal React support for lightweight usage.
 
 ```sh
-npm i @theme-ui/core
+npm i @theme-ui/core @emotion/react
 ```
 
 ## Usage

packages/core/package.json

@@ -14,13 +14,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.6.0",
     "@theme-ui/css": "0.12.0",
     "@theme-ui/parse-props": "0.12.0",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "preconstruct": {
     "entrypoints": [

packages/css/README.md

@@ -6,7 +6,7 @@
 you write style objects with responsive, theme-aware ergonomic shortcuts.
 
 ```sh
-npm i @theme-ui/css
+npm i @theme-ui/css @emotion/react
 ```
 
 ## Usage

packages/css/package.json

@@ -13,9 +13,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.6.0",
     "csstype": "^3.0.10"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts",

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

@@ -35,7 +35,7 @@ describe('Theme', () => {
       })
     `).toFail(
       new RegExp(
-        `Error snippet\.tsx \\(\\d+,\\d+\\): Type '{ color: "blue"; whiteSpace: "banana"; }'` +
+        `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]+`

packages/css/test/index.ts

@@ -1,4 +1,4 @@
-import { css, NestedScale, NestedScaleDict, Theme, ThemeUIExtendedCSSProperties } from '../src'
+import { css, NestedScaleDict, Theme } from '../src'
 
 const theme: Theme = {
   colors: {
@@ -735,17 +735,21 @@ test('omits empty values', () => {
 })
 
 test('borderTopWidth accepts number', () => {
-  expect(css({
-    borderTopWidth: 7,
-  })(theme)).toEqual({
+  expect(
+    css({
+      borderTopWidth: 7,
+    })(theme)
+  ).toEqual({
     borderTopWidth: 7,
   })
 
-  expect(css({
-    borderTopWidth: 1,
-  })({
-    borderWidths: ['10px', '20px']
-  })).toEqual({
+  expect(
+    css({
+      borderTopWidth: 1,
+    })({
+      borderWidths: ['10px', '20px'],
+    })
+  ).toEqual({
     borderTopWidth: '20px',
   })
 })

packages/gatsby-plugin-theme-ui/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0",
-    "theme-ui": "^0.11"
+    "theme-ui": "^0.11",
+    "react": "^16 || ^17"
   },
   "keywords": [
     "gatsby",

packages/mdx/package.json

@@ -7,17 +7,17 @@
   "sideEffects": false,
   "scripts": {},
   "dependencies": {
-    "@emotion/react": "^11.6.0",
-    "@emotion/styled": "^11.6.0",
-    "@mdx-js/react": "^1.6.22",
     "@theme-ui/core": "0.12.0",
     "@theme-ui/css": "0.12.0"
   },
   "devDependencies": {
     "react": "^17.0.1"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mdx-js/react": "^1 || ^2"
   },
   "author": "Brent Jackson",
   "repository": "system-ui/theme-ui",

packages/parse-props/package.json

@@ -18,11 +18,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.6.0",
     "@theme-ui/css": "0.12.0"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

packages/sidenav/package.json

@@ -10,19 +10,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "deepmerge": "^4.0.0",
+    "theme-ui": "0.10.0"
+  },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@mdx-js/react": "^1 || ^2",
+    "@types/mdx-js__react": "^1 || ^2"
   },
   "devDependencies": {
     "react": "^17.0.1"
   },
-  "dependencies": {
-    "@emotion/react": "^11.6.0",
-    "@mdx-js/react": "^1.6.22",
-    "@types/mdx-js__react": "^1.5.5",
-    "deepmerge": "^4.2.2",
-    "theme-ui": "0.12.0"
-  },
   "keywords": [
     "theme-ui",
     "mdx",