Merge pull request #2385 from system-ui/2207-global-component

hasparus · web-flow · commit f9c7f93f5e3b · 2023-01-22T19:27:13.000+01:00
Add theme-aware Global component
diff --git a/examples/next/components/Header.tsx b/examples/next/components/Header.tsx
@@ -2,9 +2,11 @@ import { Button, useColorMode } from 'theme-ui'
 
 const Header = () => {
   const [colorMode, setColorMode] = useColorMode()
+
   return (
     <header>
       <Button
+        suppressHydrationWarning
         onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
       >
         Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -16,6 +16,7 @@
     "@mdx-js/loader": "^2.1.2",
     "@mdx-js/react": "^2.1.2",
     "@next/mdx": "^12.0.7",
+    "@theme-ui/css": "workspace:^",
     "next": "^12.1.0",
     "react": "^18",
     "react-dom": "^18",
diff --git a/examples/next/pages/index.tsx b/examples/next/pages/index.tsx
@@ -1,12 +1,14 @@
 import Head from 'next/head'
 import About from '../components/about.mdx'
+import { Global } from 'theme-ui'
 
 export default function Page() {
   return (
     <>
       <Head>
         <title>Next.js Theme UI</title>
       </Head>
+      <Global styles={{ h1: { color: 'salmon !important' } }} />
       <About />
     </>
   )
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -26,6 +26,7 @@
     "@theme-ui/core": "workspace:^",
     "@theme-ui/components": "workspace:^",
     "@theme-ui/css": "workspace:^",
+    "@theme-ui/global": "workspace:^",
     "@theme-ui/match-media": "workspace:^",
     "@theme-ui/mdx": "workspace:^",
     "@theme-ui/presets": "workspace:^",
diff --git a/packages/docs/src/pages/guides/global-styles.mdx b/packages/docs/src/pages/guides/global-styles.mdx
@@ -4,34 +4,34 @@ title: 'Global Styles'
 
 # Global Styles
 
-Use the Emotion `Global` component to add global CSS with theme-based values.
+Theme UI offers a `Global` component (that wraps Emotion’s) for adding global
+CSS with theme-based values.
 
-By default, the `ThemeProvider` component will apply styles in `theme.styles.root` to the `<html>` element.
-It will also apply `color` and `background-color` styles based on `theme.colors.text` and `theme.colors.background` respectively.
+By default (or, unless the
+[`useRootStyles` configuration option](/theming#configuration-flags)is
+disabled), the `ThemeProvider` component will apply styles in
+`theme.styles.root` to the `<html>` element. It will also apply `color` and
+`background-color` styles based on `theme.colors.text` and
+`theme.colors.background` respectively.
 
 <Note>
   Generally, you should try to avoid adding CSS to global scope. Many styles can
   be safely encapsulated into a component without the need for global styles.
 </Note>
 
 ```jsx
-import { Global } from '@emotion/react'
+import { Global } from 'theme-ui'
 
 export default (props) => (
   <Global
-    styles={(theme) => ({
-      '*': {
-        boxSizing: 'border-box',
+    styles={{
+      button: {
+        m: 0,
+        bg: 'primary',
+        color: 'background',
+        border: 0,
       },
-    })}
+    }}
   />
 )
 ```
-
-<Note>
-
-  If you are upgrading from a version of theme-ui older that v0.6.0, be aware the import
-  package has changed from `@emotion/core` to `@emotion/react`. For more information see
-  the [Migration Notes for 0.6](https://theme-ui.com/migrating/#breaking-changes).
-
-</Note>
diff --git a/packages/docs/src/pages/packages/global.mdx b/packages/docs/src/pages/packages/global.mdx
@@ -0,0 +1,7 @@
+---
+title: '@theme-ui/global'
+---
+
+import Readme from '@theme-ui/global/README.md'
+
+<Readme />
diff --git a/packages/docs/src/sidebar.mdx b/packages/docs/src/sidebar.mdx
@@ -58,6 +58,7 @@
   - [@theme-ui/core](/packages/core)
   - [@theme-ui/components](/packages/components)
   - [@theme-ui/mdx](/packages/mdx)
+  - [@theme-ui/global](/packages/global)
   - [@theme-ui/presets](/packages/presets)
   - [@theme-ui/prism](/packages/prism)
   - [@theme-ui/color](/packages/color)
diff --git a/packages/docs/static/card.svg b/packages/docs/static/card.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" style="color:white;max-width:100%;height:auto"><rect width="1280" height="720" fill="black"></rect><g transform="translate(512 232)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="256" height="256" style="font-family:Inter, sans-serif;font-size:12px;letter-spacing:0.1em;fill:currentcolor;color:inherit"><defs><style type="text/css">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" style="display:block;color:white;width:1280px;height:720px"><rect width="1280" height="720" fill="black"></rect><g transform="translate(512 232)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="256" height="256" style="font-family:Inter, sans-serif;font-size:12px;letter-spacing:0.1em;fill:currentcolor;color:inherit;pointer-events:none"><defs><style type="text/css">
 <![CDATA[
 @font-face {
   font-family: 'Inter';
diff --git a/packages/docs/static/logo.svg b/packages/docs/static/logo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="256" height="256" style="font-family:Inter, sans-serif;font-size:12px;letter-spacing:0.1em;fill:currentcolor;color:inherit"><defs><style type="text/css">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="256" height="256" style="font-family:Inter, sans-serif;font-size:12px;letter-spacing:0.1em;fill:currentcolor;color:inherit;pointer-events:none"><defs><style type="text/css">
 <![CDATA[
 @font-face {
   font-family: 'Inter';
diff --git a/packages/global/README.md b/packages/global/README.md
@@ -0,0 +1,27 @@
+# @theme-ui/global
+
+Wrapper around the Emotion `Global` component, made Theme UI theme-aware.
+
+**Note:** _This package is included in the main `theme-ui` package and a
+separate installation is not required unless you’re using `@theme-ui/core`._
+
+```sh
+npm i @theme-ui/global @theme-ui/core @emotion/react
+```
+
+```jsx
+import Global from '@theme-ui/global'
+
+export default (props) => (
+  <Global
+    styles={{
+      button: {
+        m: 0,
+        bg: 'primary',
+        color: 'background',
+        border: 0,
+      },
+    }}
+  />
+)
+```
diff --git a/packages/global/package.json b/packages/global/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@theme-ui/global",
+  "version": "0.15.4",
+  "repository": "system-ui/theme-ui",
+  "main": "dist/theme-ui-global.cjs.js",
+  "module": "dist/theme-ui-global.esm.js",
+  "source": "src/index.tsx",
+  "author": "Lachlan Campbell",
+  "license": "MIT",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@theme-ui/core": "workspace:^",
+    "@theme-ui/css": "workspace:^"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@types/react": "^18",
+    "@theme-ui/test-utils": "workspace:^"
+  }
+}
diff --git a/packages/global/src/index.tsx b/packages/global/src/index.tsx
@@ -0,0 +1,16 @@
+import { jsx, type ThemeUIStyleObject } from '@theme-ui/core'
+import { css, type Theme } from '@theme-ui/css'
+import { Global as EmotionGlobal } from '@emotion/react'
+
+export interface GlobalProps {
+  styles: ThemeUIStyleObject
+}
+const Global = ({ styles }: GlobalProps): JSX.Element =>
+  jsx(EmotionGlobal, {
+    styles: (emotionTheme: unknown) => {
+      const theme = emotionTheme as Theme
+      return css(styles)(theme)
+    },
+  })
+
+export default Global
diff --git a/packages/global/test/__snapshots__/index.tsx.snap b/packages/global/test/__snapshots__/index.tsx.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders global and component styles 1`] = `
+.emotion-0 {
+  color: pink;
+}
+
+<html>
+  <head>
+    <style
+      data-emotion="css"
+      data-s=""
+    >
+      
+      .css-2cx43c{}
+    </style>
+    <style
+      data-emotion="css"
+      data-s=""
+    >
+      
+      .css-2cx43c html{background-color:hotpink;}
+    </style>
+    <style
+      data-emotion="css"
+      data-s=""
+    >
+      
+      .emotion-0{color:pink;}
+    </style>
+  </head>
+  <body>
+    <div>
+      <header>
+        <div
+          class="emotion-0"
+        />
+      </header>
+    </div>
+  </body>
+</html>
+`;
+
+exports[`renders global styles 1`] = `
+<html>
+  <head>
+    <style
+      data-emotion="css-global"
+      data-s=""
+    >
+      
+      @font-face{font-family:some-name;}
+    </style>
+    <style
+      data-emotion="css-global"
+      data-s=""
+    >
+      
+      body{font-family:Georgia,serif;margin:0;}
+    </style>
+    <style
+      data-emotion="css-global"
+      data-s=""
+    >
+      
+      h1{color:salmon;}
+    </style>
+  </head>
+  <body>
+    <div>
+      <h1>
+        Hello
+      </h1>
+    </div>
+  </body>
+</html>
+`;
diff --git a/packages/global/test/index.tsx b/packages/global/test/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * @jest-environment jsdom
+ * @jsx jsx
+ */
+
+import { jsx } from '@theme-ui/core'
+import { cleanup } from '@testing-library/react'
+import { render } from '@theme-ui/test-utils'
+import { matchers } from '@emotion/jest'
+
+import { ThemeProvider } from '@theme-ui/core'
+import Global from '../src'
+
+expect.extend(matchers)
+
+beforeEach(() => {
+  document.head.innerHTML = ''
+  jest.resetAllMocks()
+})
+
+afterEach(cleanup)
+
+test.only('renders global styles', async () => {
+  const root = (
+    <ThemeProvider
+      theme={{
+        config: {
+          useRootStyles: false,
+        },
+        fonts: {
+          body: 'Georgia,serif',
+        },
+        colors: {
+          primary: 'salmon',
+        },
+      }}
+    >
+      <Global
+        styles={{
+          '@font-face': {
+            fontFamily: 'some-name',
+          },
+          body: {
+            fontFamily: 'body',
+            margin: 0,
+          },
+          h1: {
+            color: 'primary',
+          },
+        }}
+      />
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+
+  const document = render(root)
+  expect(document.baseElement.parentElement).toMatchSnapshot()
+
+  const bodyStyle = global.getComputedStyle(document.baseElement)
+  expect(bodyStyle.fontFamily).toBe('Georgia,serif')
+  expect(bodyStyle.margin).toBe('0px')
+
+  const h1 = document.baseElement.querySelector('h1')!
+  expect(global.getComputedStyle(h1).color).toBe('salmon')
+})
+
+test('renders global and component styles', () => {
+  const root = (
+    <header>
+      <Global
+        styles={{
+          html: {
+            backgroundColor: 'hotpink',
+          },
+        }}
+      />
+      <div sx={{ color: 'pink' }} />
+    </header>
+  )
+  const { baseElement } = render(root)
+  expect(baseElement.parentElement).toMatchSnapshot()
+})
diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, Theme, ThemeStyles } from 'theme-ui'
+import { jsx, ThemeProvider, Theme, ThemeStyles, Global } from 'theme-ui'
 import { MDXProvider, MDXProviderComponents } from '@mdx-js/react'
 import React, {
   useState,
@@ -11,7 +11,6 @@ import React, {
   ReactComponentElement,
   ReactElement,
 } from 'react'
-import { Global } from '@emotion/react'
 import merge from 'deepmerge'
 
 const createNestedLinks = (
diff --git a/packages/theme-ui/package.json b/packages/theme-ui/package.json
@@ -16,6 +16,7 @@
     "@theme-ui/components": "workspace:^",
     "@theme-ui/core": "workspace:^",
     "@theme-ui/css": "workspace:^",
+    "@theme-ui/global": "workspace:^",
     "@theme-ui/theme-provider": "workspace:^"
   },
   "peerDependencies": {
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
@@ -29,6 +29,7 @@ export type {
 } from '@theme-ui/core'
 export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes'
 export { ThemeProvider } from '@theme-ui/theme-provider'
+export { default as Global } from '@theme-ui/global'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
