first commit

test/development/basic/theme-ui/fixture/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}

test/development/basic/theme-ui/fixture/pages/_app.js

@@ -0,0 +1,13 @@
+// basic usage
+import { ThemeProvider } from 'theme-ui'
+import theme from '../theme'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
+
+export default MyApp

test/development/basic/theme-ui/fixture/pages/index.js

@@ -0,0 +1,14 @@
+export default function Home() {
+  return (
+    <div
+      id="hello"
+      sx={{
+        fontWeight: 'bold',
+        fontSize: 4, // picks up value from `theme.fontSizes[4]`
+        color: 'primary', // picks up value from `theme.colors.primary`
+      }}
+    >
+      Hello
+    </div>
+  )
+}

test/development/basic/theme-ui/fixture/theme.js

@@ -0,0 +1,13 @@
+// example theme.js
+export default {
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: '"Avenir Next", sans-serif',
+    monospace: 'Menlo, monospace',
+  },
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#33e',
+  },
+}

test/development/basic/theme-ui/theme-ui.test.ts

@@ -0,0 +1,17 @@
+import { join } from 'path'
+import { nextTestSetup } from 'e2e-utils'
+
+describe('theme-ui SWC option', () => {
+  const { next } = nextTestSetup({
+    files: join(__dirname, 'fixture'),
+    dependencies: {
+      'theme-ui': '0.12.0',
+    },
+  })
+
+  it('should have theme provided styling', async () => {
+    const browser = await next.browser('/')
+    const color = await browser.elementByCss('#hello').getComputedCss('color')
+    expect(color).toBe('rgb(51, 51, 238)')
+  })
+})