Add theme-aware Global component #2385
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| title: '@theme-ui/global' | ||
| --- | ||
|
|
||
| import Readme from '@theme-ui/global/README.md' | ||
|
|
||
| <Readme /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| sx={{ | ||
| button: { | ||
| m: 0, | ||
| bg: 'primary', | ||
| color: 'background', | ||
| border: 0, | ||
| }, | ||
| }} | ||
| /> | ||
| ) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:^" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from 'react' | ||
| import { jsx, type ThemeUIStyleObject } from '@theme-ui/core' | ||
| import { css, type Theme } from '@theme-ui/css' | ||
| import { Global as EmotionGlobal } from '@emotion/react' | ||
|
|
||
| const Global = ({ sx }: { sx: ThemeUIStyleObject }) => | ||
| jsx(EmotionGlobal, { | ||
| styles: (emotionTheme: unknown) => { | ||
| const theme = emotionTheme as Theme | ||
| return css(sx)(theme) | ||
|
There was a problem hiding this comment. I'm kinda wondering if useMemo(() => css(sx)(theme), [sx, theme])here would be an overkill. There was a problem hiding this comment. Oh good call. I wish evaluating perf with hooks like that with were easier…conceptually makes sense to use it at least |
||
| }, | ||
| }) | ||
|
|
||
| export default Global | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| // 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" | ||
| data-s="" | ||
| > | ||
|
|
||
| .css-ck0s41{} | ||
| </style> | ||
| <style | ||
| data-emotion="css" | ||
| data-s="" | ||
| > | ||
|
|
||
| @font-face{font-family:some-name;} | ||
| </style> | ||
| <style | ||
| data-emotion="css" | ||
| data-s="" | ||
| > | ||
|
|
||
| .css-ck0s41 body{font-family:Georgia,serif;margin:0;} | ||
| </style> | ||
| <style | ||
| data-emotion="css" | ||
| data-s="" | ||
| > | ||
|
|
||
| .css-ck0s41 h1{color:salmon;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <h1> | ||
| Hello | ||
| </h1> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * @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('renders global styles', async () => { | ||
| const root = ( | ||
| <ThemeProvider | ||
| theme={{ | ||
| config: { | ||
| useRootStyles: false, | ||
| }, | ||
| fonts: { | ||
| body: 'Georgia,serif', | ||
| }, | ||
| colors: { | ||
| primary: 'salmon', | ||
| }, | ||
| }} | ||
| > | ||
| <Global | ||
| sx={{ | ||
| '@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 style = window.getComputedStyle(document.baseElement.parentElement!) | ||
| // expect(style.fontFamily).toBe('Georgia,serif') | ||
| // expect(style.margin).toBe('0px') | ||
|
|
||
| // const h1 = document.baseElement.querySelector('h1')! | ||
| // const h1Style = global.getComputedStyle(h1) | ||
| // expect(h1Style.fontFamily).toBe('Georgia,serif') | ||
| // expect(h1Style.color).toBe('salmon') | ||
| }) | ||
|
|
||
| test('renders global and component styles', () => { | ||
| const root = ( | ||
| <header> | ||
| <Global | ||
| sx={{ | ||
| html: { | ||
| backgroundColor: 'hotpink', | ||
| }, | ||
| }} | ||
| /> | ||
| <div sx={{ color: 'pink' }} /> | ||
| </header> | ||
| ) | ||
| const { baseElement } = render(root) | ||
| expect(baseElement.parentElement).toMatchSnapshot() | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After running
pnpm buildNext.js dev server doesn't catch that the libraries are built instantly, so I removed.nextdir in the example, restartedpnpm devand the error on this import went away.The error was basically saying we can't import TypeScript files directly, and that's totally fine, because we want to develop examples against prebuilt libraries, but even after rebuilding you gotta clean the cache if you started dev server previously.