[test] Introduce prettier into CI pipeline (#12564)

* [test] add prettier to CircleCI

A file can be formatted without knowledge about other files.
For this reason we only check the format for files which were
changed compared to master. A broken format that was merged into
master will not be picked up by CI until the file was changed
again. This can be a good thing since this will not trigger CI
errors in unrelated builds and since we are only talking about
code style this a manageable tradeoff especially because formatting
can be very expensive.

* [core] run prettier

* [test] use prettier:check instead of implicit run via eslint

.circleci/config.yml

@@ -48,6 +48,21 @@ jobs:
     steps:
       - checkout
       - *restore_repo
+      - run:
+          name: Check if yarn prettier was run
+          command: |
+            # Files changed on this branch
+            CHANGED_FILES=$(git diff --name-only master...)
+            # Files that should have been formatted while working on this branch
+            FORMATTED_FILES=$(yarn --silent prettier:files | grep "$CHANGED_FILES")
+            # if we run prettier unconditionally prettier will exit with non-zero
+            # because no file path was given
+            if [ $FORMATTED_FILES ]; then
+              echo "changes, let's check if they are formatted"
+              yarn prettier:ci "$FORMATTED_FILES"
+            else
+              echo "no changes"
+            fi
       - run:
           name: Lint
           command: yarn lint

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     ecmaVersion: 7,
     sourceType: 'module',
   },
-  plugins: ['babel', 'import', 'jsx-a11y', 'mocha', 'flowtype', 'material-ui', 'prettier'],
+  plugins: ['babel', 'import', 'jsx-a11y', 'mocha', 'flowtype', 'material-ui'],
   settings: {
     'import/resolver': {
       webpack: {
@@ -104,8 +104,6 @@ module.exports = {
     'flowtype/type-id-match': 'off',
     'flowtype/use-flow-type': 'error',
 
-    'prettier/prettier': 'error',
-
     'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.

package.json

@@ -34,7 +34,10 @@
     "docs:deploy": "git push material-ui-docs master:latest",
     "lint": "eslint . --cache && echo \"eslint: no lint errors\"",
     "lint:fix": "eslint . --cache --fix && echo \"eslint: no lint errors\"",
-    "prettier": "find . -name \"*.js\" -o -name \"*.d.ts\" -o -name \"*.tsx\" | grep -v -f .eslintignore | xargs prettier --write",
+    "prettier": "yarn --silent prettier:files | xargs prettier --write",
+    "prettier:files": "find . -name \"*.js\" -o -name \"*.d.ts\" -o -name \"*.tsx\" | grep -v -f .eslintignore",
+    "prettier:check": "yarn --silent prettier:files | xargs prettier --list-different",
+    "prettier:ci": "prettier --list-different",
     "size": "size-limit",
     "size:why": "size-limit --why packages/material-ui/build/index.js",
     "size:overhead:why": "size-limit --why ./test/size/overhead.js",
@@ -98,7 +101,6 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-material-ui": "file:packages/eslint-plugin-material-ui",
     "eslint-plugin-mocha": "^5.0.0",
-    "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-spellcheck": "^0.0.10",
     "fg-loadcss": "^2.0.1",

packages/material-ui/src/ButtonBase/TouchRipple.d.ts

@@ -2,9 +2,12 @@ import * as React from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { StandardProps } from '..';
 
-export type TouchRippleProps = StandardProps<TransitionGroup.TransitionGroupProps, TouchRippleClassKey> & {
+export type TouchRippleProps = StandardProps<
+  TransitionGroup.TransitionGroupProps,
+  TouchRippleClassKey
+> & {
   center?: boolean;
-}
+};
 
 export type TouchRippleClassKey =
   | 'root'

packages/material-ui/src/index.d.ts

@@ -6,10 +6,9 @@ export type AnyComponent<P = any> =
   | (new (props: P) => React.Component)
   | ((props: P & { children?: React.ReactNode }) => React.ReactElement<P> | null);
 
-export type PropsOf<C extends AnyComponent> =
-  C extends new (props: infer P) => React.Component ? P :
-  C extends (props: infer P) => React.ReactElement<any> | null ? P :
-  never;
+export type PropsOf<C extends AnyComponent> = C extends new (props: infer P) => React.Component
+  ? P
+  : C extends (props: infer P) => React.ReactElement<any> | null ? P : never;
 
 /**
  * All standard components exposed by `material-ui` are `StyledComponents` with

packages/material-ui/src/styles/withStyles.d.ts

@@ -38,13 +38,14 @@ export interface WithStylesOptions<ClassKey extends string = string>
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
-export type WithStyles<T extends string | StyleRules | StyleRulesCallback = string, IncludeTheme extends boolean | undefined = undefined> =
-  (IncludeTheme extends true ? WithTheme : Partial<WithTheme>)
-  & {
-    classes: ClassNameMap<
-      T extends string
-        ? T
-        : T extends StyleRulesCallback<infer K> ? K : T extends StyleRules<infer K> ? K : never
+export type WithStyles<
+  T extends string | StyleRules | StyleRulesCallback = string,
+  IncludeTheme extends boolean | undefined = undefined
+> = (IncludeTheme extends true ? WithTheme : Partial<WithTheme>) & {
+  classes: ClassNameMap<
+    T extends string
+      ? T
+      : T extends StyleRulesCallback<infer K> ? K : T extends StyleRules<infer K> ? K : never
   >;
 };
 
@@ -53,7 +54,10 @@ export interface StyledComponentProps<ClassKey extends string = string> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withStyles<ClassKey extends string, Options extends WithStylesOptions<ClassKey>>(
+export default function withStyles<
+  ClassKey extends string,
+  Options extends WithStylesOptions<ClassKey>
+>(
   style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
   options?: Options,
 ): {

packages/material-ui/test/typescript/styles.spec.tsx

@@ -178,23 +178,27 @@ const AllTheComposition = withTheme()(
 <AllTheComposition />;
 
 {
-  const Foo = withTheme()(class extends React.Component<WithTheme> {
-    render() {
-      return null;
-    }
-  });
+  const Foo = withTheme()(
+    class extends React.Component<WithTheme> {
+      render() {
+        return null;
+      }
+    },
+  );
 
-  <Foo />
+  <Foo />;
 }
 
 declare const themed: boolean;
 {
   // Test that withTheme: true guarantees the presence of the theme
-  const Foo = withStyles({}, { withTheme: true })(class extends React.Component<WithTheme> {
-    render() {
-      return <div style={{ margin: this.props.theme.spacing.unit }} />;
-    }
-  });
+  const Foo = withStyles({}, { withTheme: true })(
+    class extends React.Component<WithTheme> {
+      render() {
+        return <div style={{ margin: this.props.theme.spacing.unit }} />;
+      }
+    },
+  );
   <Foo />;
 
   const Bar = withStyles({}, { withTheme: true })(({ theme }) => (

yarn.lock

@@ -4346,13 +4346,6 @@ eslint-plugin-mocha@^5.0.0:
   dependencies:
     ramda "^0.25.0"
 
-eslint-plugin-prettier@^2.3.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.2.tgz#71998c60aedfa2141f7bfcbf9d1c459bf98b4fad"
-  dependencies:
-    fast-diff "^1.1.1"
-    jest-docblock "^21.0.0"
-
 eslint-plugin-react@^7.4.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.0.tgz#b3124af974c4da978e62a57ea49a7bc26f11e76d"
@@ -4673,10 +4666,6 @@ fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
-fast-diff@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
-
 fast-glob@^2.0.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf"
@@ -6115,10 +6104,6 @@ jest-diff@^23.2.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.2.0"
 
-jest-docblock@^21.0.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
-
 jest-get-type@^22.1.0:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"