[Typography] Migrate styles to emotion

docs/pages/api-docs/typography.md

@@ -81,11 +81,8 @@ Any other props supplied will be provided to the root element (native element).
 
 You can override the style of the component thanks to one of these customization points:
 
-- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
-- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
-- With a theme and an [`overrides` property](/customization/globals/#css).
-
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Typography/Typography.js) for more detail.
+- With a [global class name](/guides/interoperability/#global-css).
+- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme.
 
 ## Demos
 

docs/scripts/buildApi.ts

@@ -313,6 +313,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));
 }
 
@@ -488,6 +532,10 @@ async function buildDocs(options: {
     }
   }
 
+  if (componentObject.filename.indexOf('Typography') > -1) {
+    console.log(styles);
+  }
+
   let reactAPI: ReactApi;
   try {
     reactAPI = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {

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}

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 />, () => ({