[Typography] Migrate styles to Emotion (#23841)

docs/pages/api-docs/typography.json

@@ -81,5 +81,5 @@
   "filename": "/packages/material-ui/src/Typography/Typography.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/breadcrumbs/\">Breadcrumbs</a></li>\n<li><a href=\"/components/typography/\">Typography</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/scripts/buildApi.ts

@@ -688,6 +688,50 @@ async function updateStylesDefinition(context: {
     // Do nothing as not every components has an unstyled version
   }
 
+  // If there is no unstyledFile we need to extract this info from the component's definition file
+  if (typesFilename !== unstyledFileName) {
+    try {
+      const typesSource = readFileSync(typesFilename, { encoding: 'utf8' });
+      const typesAST = await babel.parseAsync(typesSource, {
+        configFile: false,
+        filename: typesFilename,
+        presets: [require.resolve('@babel/preset-typescript')],
+      });
+      if (typesAST === null) {
+        throw new Error('No AST returned from babel.');
+      }
+
+      traverse(typesAST, {
+        TSPropertySignature(babelPath) {
+          const { node } = babelPath;
+          const possiblyPropName = (node.key as babel.types.Identifier).name;
+          if (possiblyPropName === 'classes' && node.typeAnnotation !== null) {
+            const members = (node.typeAnnotation.typeAnnotation as babel.types.TSTypeLiteral)
+              .members;
+
+            if (members) {
+              styles.descriptions = styles.descriptions || {};
+              members.forEach((member) => {
+                const className = ((member as babel.types.TSPropertySignature)
+                  .key as babel.types.Identifier).name;
+                styles.classes.push(className);
+                if (member.leadingComments) {
+                  styles.descriptions[className] = trimComment(member.leadingComments[0].value);
+                }
+              });
+            }
+          }
+        },
+      });
+
+      if (styles.classes.length > 0) {
+        styles.name = generateMuiName(path.parse(component.filename).name);
+      }
+    } catch (e) {
+      // Do nothing as not every components has an unstyled version
+    }
+  }
+
   styles.classes = Array.from(new Set(styles.classes));
 }
 

docs/src/modules/components/Link.js

@@ -8,18 +8,18 @@ import MuiLink from '@material-ui/core/Link';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
 
 const NextComposed = React.forwardRef(function NextComposed(props, ref) {
-  const { as, href, ...other } = props;
+  const { linkAs, href, ...other } = props;
 
   return (
-    <NextLink href={href} as={as}>
+    <NextLink href={href} as={linkAs}>
       <a ref={ref} {...other} />
     </NextLink>
   );
 });
 
 NextComposed.propTypes = {
-  as: PropTypes.string,
   href: PropTypes.string,
+  linkAs: PropTypes.string,
 };
 
 // A styled version of the Next.js Link component:
@@ -64,7 +64,7 @@ function Link(props) {
   if (naked) {
     return (
       <NextComposed
-        as={linkAs}
+        linkAs={linkAs}
         className={className}
         href={href}
         ref={innerRef}
@@ -76,7 +76,7 @@ function Link(props) {
 
   return (
     <MuiLink
-      as={linkAs}
+      linkAs={linkAs}
       component={NextComposed}
       className={className}
       href={href}

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -270,6 +270,12 @@ const classes = makeStyles(theme => ({
 }));
 ```
 
+### Core components
+
+As the core components use emotion as a styled engine, the props used by emotion are not intercepted. The prop `as` in the following codesnippet will not be propagated to the `SomeOtherComponent`.
+
+`<MuiComponent component={SomeOtherComponent} as="button" />`
+
 ### AppBar
 
 - [AppBar] Remove z-index when position static and relative

examples/nextjs-with-typescript/src/Link.tsx

@@ -6,16 +6,16 @@ import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
 
 type NextComposedProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> &
-  NextLinkProps;
+  Omit<NextLinkProps, 'as'> & { linkAs?: NextLinkProps['as'] };
 
 const NextComposed = React.forwardRef<HTMLAnchorElement, NextComposedProps>((props, ref) => {
-  const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
+  const { href, linkAs, replace, scroll, passHref, shallow, prefetch, ...other } = props;
 
   return (
     <NextLink
       href={href}
       prefetch={prefetch}
-      as={as}
+      as={linkAs}
       replace={replace}
       scroll={scroll}
       shallow={shallow}

examples/nextjs/src/Link.js

@@ -8,13 +8,13 @@ import MuiLink from '@material-ui/core/Link';
 
 const NextComposed = React.forwardRef(function NextComposed(props, ref) {
   // eslint-disable-next-line react/prop-types
-  const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
+  const { href, linkAs, replace, scroll, passHref, shallow, prefetch, ...other } = props;
 
   return (
     <NextLink
       href={href}
       prefetch={prefetch}
-      as={as}
+      as={linkAs}
       replace={replace}
       scroll={scroll}
       shallow={shallow}
@@ -54,10 +54,10 @@ function Link(props) {
 
 Link.propTypes = {
   activeClassName: PropTypes.string,
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
   href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  linkAs: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   naked: PropTypes.bool,
   onClick: PropTypes.func,
   prefetch: PropTypes.bool,

packages/material-ui/src/CardHeader/CardHeader.test.js

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
 import CardHeader from './CardHeader';
-import Typography from '../Typography';
+import { typographyClasses } from '../Typography';
 
 describe('<CardHeader />', () => {
   const mount = createMount();
   let classes;
-  let typographyClasses;
   const render = createClientRender();
 
   before(() => {
-    typographyClasses = getClasses(<Typography />);
     classes = getClasses(<CardHeader />);
   });
 

packages/material-ui/src/InputAdornment/InputAdornment.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
-import Typography from '../Typography';
+import { typographyClasses } from '../Typography';
 import InputAdornment from './InputAdornment';
 import TextField from '../TextField';
 import FormControl from '../FormControl';
@@ -26,7 +26,6 @@ describe('<InputAdornment />', () => {
 
   it('should wrap text children in a Typography', () => {
     const { container } = render(<InputAdornment position="start">foo</InputAdornment>);
-    const typographyClasses = getClasses(<Typography />);
     const typography = container.querySelector(`.${typographyClasses.root}`);
 
     expect(typography).not.to.equal(null);
@@ -161,7 +160,6 @@ describe('<InputAdornment />', () => {
         foo
       </InputAdornment>,
     );
-    const typographyClasses = getClasses(<Typography />);
 
     expect(container.querySelector(`.${typographyClasses.root}`)).to.equal(null);
   });

packages/material-ui/src/Link/Link.test.js

@@ -10,7 +10,7 @@ import {
   fireEvent,
 } from 'test/utils';
 import Link from './Link';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 
 function focusVisible(element) {
   act(() => {
@@ -24,11 +24,9 @@ describe('<Link />', () => {
   const mount = createMount();
   const render = createClientRender();
   let classes;
-  let typographyClasses;
 
   before(() => {
     classes = getClasses(<Link href="/">Home</Link>);
-    typographyClasses = getClasses(<Typography />);
   });
 
   describeConformance(<Link href="/">Home</Link>, () => ({

packages/material-ui/src/ListItemText/ListItemText.test.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import ListItemText from './ListItemText';
 
 describe('<ListItemText />', () => {
   const mount = createMount();
   const render = createClientRender();
   let classes;
-  let typographyClasses;
 
   before(() => {
     classes = getClasses(<ListItemText />);
-    typographyClasses = getClasses(<Typography />);
   });
 
   describeConformance(<ListItemText />, () => ({

packages/material-ui/src/StepLabel/StepLabel.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { getClasses, createClientRender, createMount, describeConformance } from 'test/utils';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import Stepper from '../Stepper';
 import Step from '../Step';
 import StepIcon from '../StepIcon';
@@ -10,14 +10,12 @@ import StepLabel from './StepLabel';
 describe('<StepLabel />', () => {
   let classes;
   let iconClasses;
-  let typographyClasses;
   const mount = createMount({ strict: true });
   const render = createClientRender();
 
   before(() => {
     classes = getClasses(<StepLabel />);
     iconClasses = getClasses(<StepIcon />);
-    typographyClasses = getClasses(<Typography />);
   });
 
   describeConformance(<StepLabel />, () => ({