continuation

hupe1980 · Jun 22, 2019 · db12bb3 · db12bb3
1 parent ee5cc16
commit db12bb3
Show file tree

Hide file tree

Showing 39 changed files with 249 additions and 1,474 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,4 +15,4 @@ module.exports = {
       },
     },
   ],
-}
+};
diff --git a/.gitignore b/.gitignore
@@ -63,4 +63,5 @@ typings/
 # Lib folder
 lib
 
-.DS_Store
+.DS_Store
+
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   semi: true,
-  singleQuote: true,
+  singleQuote: false,
   tabWidth: 2,
   trailingComma: "all",
 };
diff --git a/README.md b/README.md
@@ -1,21 +1,9 @@
 # gatsby-plugin-material-ui
 
-> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for
-> [@material-ui/styles](https://github.com/mui-org/material-ui) with
-> built-in server-side rendering support.
+> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui/styles](https://github.com/mui-org/material-ui) with built-in server-side rendering support.
 
 This is the plugin for Material-UI v4. The plugin for v3 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v1.2.5).
 
-## Install
-
-`npm install --save gatsby-plugin-material-ui @material-ui/styles`
-
 ## Documentation
 
-[The documentation](/gatsby-plugin-material-ui/README.md)
-
-## Examples
-
-You can find an official integration example of this plugin [on Material-UI side](https://github.com/mui-org/material-ui/tree/master/examples/gatsby), then you can pick one of the [Page Layout Examples](https://material-ui.com/getting-started/page-layout-examples/).
-
-If you want to save time with a more opinionated solution. You can start with [a premade theme](https://github.com/hupe1980/gatsby-theme-material-ui).
+[Read the documentation](/gatsby-plugin-material-ui/README.md).
diff --git a/e2e-tests/development-runtime/cypress/support/commands.js b/e2e-tests/development-runtime/cypress/support/commands.js
@@ -1,4 +1,4 @@
-import 'cypress-testing-library/add-commands';
+import "cypress-testing-library/add-commands";
 
 Cypress.Commands.add(`lifecycleCallCount`, action =>
   cy

diff --git a/e2e-tests/development-runtime/cypress/support/index.js b/e2e-tests/development-runtime/cypress/support/index.js
@@ -1,2 +1,2 @@
-import 'gatsby-cypress';
-import './commands';
+import "gatsby-cypress";
+import "./commands";
diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js
@@ -3,13 +3,10 @@ module.exports = {
     `gatsby-plugin-top-layout`,
     {
       resolve: `gatsby-plugin-material-ui`,
-      // If you want to use styled components you should change the injection order.
       options: {
-        pathToStylesProvider: `src/utils/styles-provider-props`,
+        pathToStylesProvider: `src/styles-provider-props`,
       },
     },
-    // If you want to use styled components you should add the plugin here.
-    `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
   ],
   siteMetadata: {

diff --git a/e2e-tests/development-runtime/package.json b/e2e-tests/development-runtime/package.json
@@ -6,13 +6,10 @@
     "@material-ui/core": "latest",
     "@material-ui/styles": "latest",
     "gatsby": "latest",
-    "gatsby-plugin-material-ui": "^2.0.1",
     "gatsby-plugin-react-helmet": "latest",
-    "gatsby-plugin-styled-components": "^3.0.7",
     "react": "latest",
     "react-dom": "latest",
-    "react-helmet": "latest",
-    "styled-components": "^4.3.1"
+    "react-helmet": "latest"
   },
   "license": "MIT",
   "scripts": {

diff --git a/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js b/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import TopLayout from './top-layout';
+import React from "react";
+import TopLayout from "./top-layout";
 
 export const wrapRootElement = ({ element }) => {
   return <TopLayout>{element}</TopLayout>;

diff --git a/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js b/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import TopLayout from './top-layout';
+import React from "react";
+import TopLayout from "./top-layout";
 
 export const wrapRootElement = ({ element }) => {
   return <TopLayout>{element}</TopLayout>;

diff --git a/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js b/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js
@@ -1,11 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/styles';
-import theme from '../../src/theme';
+import React from "react";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { ThemeProvider } from "@material-ui/styles";
+import theme from "../../src/theme";
+
+let injectFirstNode;
 
 export default function TopLayout(props) {
+  if (typeof window !== `undefined` && !injectFirstNode) {
+    const head = document.head;
+    injectFirstNode = document.createComment(`mui-inject-first`);
+    head.insertBefore(injectFirstNode, head.firstChild);
+  }
+
   return (
     <>
       <Helmet>

diff --git a/e2e-tests/development-runtime/src/components/link.js b/e2e-tests/development-runtime/src/components/link.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import MuiLink from '@material-ui/core/Link';
-import { Link as GastsbyLink } from 'gatsby';
+import React from "react";
+import MuiLink from "@material-ui/core/Link";
+import { Link as GastsbyLink } from "gatsby";
 
 function Link(props) {
   return <MuiLink component={GastsbyLink} {...props} />;

diff --git a/e2e-tests/development-runtime/src/components/pro-tip.js b/e2e-tests/development-runtime/src/components/pro-tip.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Link from "@material-ui/core/Link";
+import SvgIcon from "@material-ui/core/SvgIcon";
+import Typography from "@material-ui/core/Typography";
 
 function LightBulbIcon(props) {
   return (

diff --git a/e2e-tests/development-runtime/src/pages/about.js b/e2e-tests/development-runtime/src/pages/about.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import MuiLink from '@material-ui/core/Link';
+import React from "react";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import MuiLink from "@material-ui/core/Link";
 
-import ProTip from '../components/pro-tip';
-import Link from '../components/link';
+import ProTip from "../components/pro-tip";
+import Link from "../components/link";
 
 function MadeWithLove() {
   return (

diff --git a/e2e-tests/development-runtime/src/pages/index.js b/e2e-tests/development-runtime/src/pages/index.js
@@ -1,29 +1,21 @@
-import React from 'react';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import MuiLink from '@material-ui/core/Link';
-import styled from 'styled-components';
+import React from "react";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import MuiLink from "@material-ui/core/Link";
 
-import ProTip from '../components/pro-tip';
-import Link from '../components/link';
-
-const StyledH2 = styled(Typography)`
-  color: red;
-`;
+import ProTip from "../components/pro-tip";
+import Link from "../components/link";
 
 function MadeWithLove() {
   return (
-    <>
-      <Typography variant="body2" color="textSecondary" align="center">
-        `Built with love by the `
-        <MuiLink color="inherit" href="https://material-ui.com/">
-          Material-UI
-        </MuiLink>
-        {` team.`}
-      </Typography>
-      <StyledH2 color="textSecondary">StyledH2, should be red</StyledH2>
-    </>
+    <Typography variant="body2" color="textSecondary" align="center">
+      {`Built with love by the `}
+      <MuiLink color="inherit" href="https://material-ui.com/">
+        Material-UI
+      </MuiLink>
+      {` team.`}
+    </Typography>
   );
 }
 

diff --git a/e2e-tests/development-runtime/src/styles-provider-props.js b/e2e-tests/development-runtime/src/styles-provider-props.js
@@ -0,0 +1,8 @@
+import { jssPreset } from "@material-ui/styles";
+import { create } from "jss";
+
+const stylesProviderProps = {
+  jss: create({ ...jssPreset(), insertionPoint: `mui-inject-first` }),
+};
+
+export default stylesProviderProps;
diff --git a/e2e-tests/development-runtime/src/theme.js b/e2e-tests/development-runtime/src/theme.js
@@ -1,5 +1,5 @@
-import red from '@material-ui/core/colors/red';
-import { createMuiTheme } from '@material-ui/core/styles';
+import red from "@material-ui/core/colors/red";
+import { createMuiTheme } from "@material-ui/core/styles";
 
 // A custom theme for this app
 const theme = createMuiTheme({

diff --git a/e2e-tests/development-runtime/src/utils/styles-provider-props.js b/e2e-tests/development-runtime/src/utils/styles-provider-props.js
diff --git a/e2e-tests/production-runtime/cypress/support/commands.js b/e2e-tests/production-runtime/cypress/support/commands.js
@@ -1,4 +1,4 @@
-import 'cypress-testing-library/add-commands';
+import "cypress-testing-library/add-commands";
 
 Cypress.Commands.add(`lifecycleCallCount`, action =>
   cy

diff --git a/e2e-tests/production-runtime/cypress/support/index.js b/e2e-tests/production-runtime/cypress/support/index.js
@@ -1,2 +1,2 @@
-import 'gatsby-cypress';
-import './commands';
+import "gatsby-cypress";
+import "./commands";
diff --git a/e2e-tests/production-runtime/gatsby-config.js b/e2e-tests/production-runtime/gatsby-config.js
@@ -3,15 +3,10 @@ module.exports = {
     `gatsby-plugin-top-layout`,
     {
       resolve: `gatsby-plugin-material-ui`,
-      // If you want to use styled components you should change the injection order.
       options: {
-        stylesProvider: {
-          //   injectFirst: true,
-        },
+        pathToStylesProvider: `src/styles-provider-props`,
       },
     },
-    // If you want to use styled components you should add the plugin here.
-    `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
   ],
   siteMetadata: {

diff --git a/e2e-tests/production-runtime/package.json b/e2e-tests/production-runtime/package.json
@@ -6,12 +6,11 @@
     "@material-ui/core": "latest",
     "@material-ui/styles": "latest",
     "gatsby": "latest",
-    "gatsby-plugin-material-ui": "^2.0.1",
     "gatsby-plugin-react-helmet": "latest",
     "react": "latest",
     "react-dom": "latest",
     "react-helmet": "latest",
-    "cross-env": "^5.2.0"
+    "cross-env": "latest"
   },
   "license": "MIT",
   "scripts": {

diff --git a/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js b/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import TopLayout from './top-layout';
+import React from "react";
+import TopLayout from "./top-layout";
 
 export const wrapRootElement = ({ element }) => {
   return <TopLayout>{element}</TopLayout>;

diff --git a/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js b/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import TopLayout from './top-layout';
+import React from "react";
+import TopLayout from "./top-layout";
 
 export const wrapRootElement = ({ element }) => {
   return <TopLayout>{element}</TopLayout>;

diff --git a/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/top-layout.js b/e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/top-layout.js
@@ -1,11 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/styles';
-import theme from '../../src/theme';
+import React from "react";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { ThemeProvider } from "@material-ui/styles";
+import theme from "../../src/theme";
+
+let injectFirstNode;
 
 export default function TopLayout(props) {
+  if (typeof window !== `undefined` && !injectFirstNode) {
+    const head = document.head;
+    injectFirstNode = document.createComment(`mui-inject-first`);
+    head.insertBefore(injectFirstNode, head.firstChild);
+  }
+
   return (
     <>
       <Helmet>

diff --git a/e2e-tests/production-runtime/src/components/link.js b/e2e-tests/production-runtime/src/components/link.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import MuiLink from '@material-ui/core/Link';
-import { Link as GastsbyLink } from 'gatsby';
+import React from "react";
+import MuiLink from "@material-ui/core/Link";
+import { Link as GastsbyLink } from "gatsby";
 
 function Link(props) {
   return <MuiLink component={GastsbyLink} {...props} />;

diff --git a/e2e-tests/production-runtime/src/components/pro-tip.js b/e2e-tests/production-runtime/src/components/pro-tip.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Link from "@material-ui/core/Link";
+import SvgIcon from "@material-ui/core/SvgIcon";
+import Typography from "@material-ui/core/Typography";
 
 function LightBulbIcon(props) {
   return (

diff --git a/e2e-tests/production-runtime/src/pages/about.js b/e2e-tests/production-runtime/src/pages/about.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import MuiLink from '@material-ui/core/Link';
+import React from "react";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import MuiLink from "@material-ui/core/Link";
 
-import ProTip from '../components/pro-tip';
-import Link from '../components/link';
+import ProTip from "../components/pro-tip";
+import Link from "../components/link";
 
 function MadeWithLove() {
   return (

diff --git a/e2e-tests/production-runtime/src/pages/index.js b/e2e-tests/production-runtime/src/pages/index.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import MuiLink from '@material-ui/core/Link';
+import React from "react";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import MuiLink from "@material-ui/core/Link";
 
-import ProTip from '../components/pro-tip';
-import Link from '../components/link';
+import ProTip from "../components/pro-tip";
+import Link from "../components/link";
 
 function MadeWithLove() {
   return (