chore: deprecate mdx/Styled (#1461)

* chore: deprecate mdx/Styled

* Add CHANGELOG for making Styled backwards-compatible

* Update CHANGELOG.md

Co-authored-by: Piotr Monwid-Olechnowicz <[email protected]>

* Update packages/mdx/src/index.ts

Co-authored-by: Piotr Monwid-Olechnowicz <[email protected]>

* Stop exporting warnStyled (this is not public API)

* fix: add alias and tests for Styled

* Remove extra CHANGELOG entry

* Prefix warning with package name

* Improve deprecation warning

Co-authored-by: Lachlan Campbell <[email protected]>
Co-authored-by: Piotr Monwid-Olechnowicz <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v0.6.0 UNRELEASED
 
+- Make the rename of `Styled` to `Themed` non-breaking. Add a deprecation warning on `Styled` until a future release. PR #1461
 - Paragraph component's hardcoded responsive style has been removed (issue #1476)
 
 ## v0.6.0-alpha.7 2021-02-15

packages/mdx/src/index.ts

@@ -8,6 +8,8 @@ import {
   HTMLAttributes,
   ElementType,
   ComponentProps,
+  createElement,
+  useEffect,
 } from 'react'
 import styled, { StyledComponent } from '@emotion/styled'
 import { MDXProvider as _MDXProvider, useMDXComponents } from '@mdx-js/react'
@@ -156,12 +158,34 @@ export const Themed: ThemedDiv & ThemedComponentsDict = styled('div')(
   themed('div')
 ) as ThemedDiv & ThemedComponentsDict
 
+/**
+ * @deprecated since 0.6.0.
+ *
+ * `Styled` was renamed to `Themed` to avoid confusion with styled components.
+ */
+export const Styled: ThemedDiv & ThemedComponentsDict = styled('div')(
+  themed('div')
+) as ThemedDiv & ThemedComponentsDict
+
+const warnStyled = (tag: keyof IntrinsicSxElements): FC => (props) => {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[theme-ui] The Styled component from "@theme-ui/mdx" is deprecated and will be removed in a future version. It has been renamed to Themed with the same API.'
+      )
+    }
+  }, [])
+  return createElement(alias(tag), props)
+}
+
 export const components = {} as ThemedComponentsDict
 
 tags.forEach((tag) => {
   // fixme?
   components[tag] = styled(alias(tag))(themed(tag)) as any
   Themed[tag] = components[tag] as any
+
+  Styled[tag] = styled(warnStyled(tag))(themed(tag)) as any
 })
 
 const createComponents = (comps: MDXProviderComponents) => {

packages/mdx/test/index.tsx

@@ -3,10 +3,11 @@ import React from 'react'
 import { mdx } from '@mdx-js/react'
 import { render } from '@testing-library/react'
 import { matchers } from '@emotion/jest'
+import mockConsole from 'jest-mock-console'
 import { ThemeProvider } from '@theme-ui/core'
 import { renderJSON } from '@theme-ui/test-utils'
 
-import { themed, Themed, components, MDXProvider } from '../src'
+import { themed, Themed, Styled, components, MDXProvider } from '../src'
 
 expect.extend(matchers)
 
@@ -191,3 +192,52 @@ test('table columns align', () => {
   expect(tree.getByText('TextCenter')).toHaveStyleRule('text-align', 'center')
   expect(tree.getByText('TextRight')).toHaveStyleRule('text-align', 'right')
 })
+
+test('Warn deprecated Styled', () => {
+  const restore = mockConsole()
+  const tree = render(
+    <ThemeProvider
+      theme={{
+        styles: {
+          h1: {
+            color: 'tomato',
+          },
+        },
+      }}>
+      <MDXProvider>
+        <Styled.inlineCode>styled</Styled.inlineCode>
+      </MDXProvider>
+    </ThemeProvider>
+  )!
+  const code = tree.getByText('styled')
+  expect(code).toMatchInlineSnapshot(`
+  <code
+    class="emotion-0"
+  >
+    styled
+  </code>
+`)
+  expect(console.warn).toHaveBeenCalled()
+  restore()
+})  
+
+test('Deprecated Styled test', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        styles: {
+          h1: {
+            color: 'tomato',
+          },
+        },
+      }}>
+      <MDXProvider>
+        <Styled.h1>
+          H1
+        </Styled.h1>
+      </MDXProvider>
+    </ThemeProvider>
+  )!
+  expect(json.type).toBe('h1')
+  expect(json).toHaveStyleRule('color', 'tomato')
+})

packages/theme-ui/src/index.ts

@@ -19,7 +19,7 @@ export type {
   StylePropertyValue,
 } from '@theme-ui/core'
 export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes'
-export { Themed, components } from '@theme-ui/mdx'
+export { Themed, Styled, components } from '@theme-ui/mdx'
 export { ThemeProvider } from '@theme-ui/theme-provider'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'