diff --git a/babel.config.js b/babel.config.js index 30bfea34532466..48a2fe609da736 100644 --- a/babel.config.js +++ b/babel.config.js @@ -35,6 +35,7 @@ const defaultAlias = { }; const productionPlugins = [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], '@babel/plugin-transform-react-constant-elements', 'babel-plugin-transform-dev-warning', ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }], @@ -49,6 +50,7 @@ const productionPlugins = [ module.exports = { presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']), plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], [ 'babel-plugin-macros', { @@ -85,6 +87,7 @@ module.exports = { }, development: { plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], [ 'babel-plugin-module-resolver', { @@ -110,6 +113,7 @@ module.exports = { test: { sourceMaps: 'both', plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], [ 'babel-plugin-module-resolver', { diff --git a/docs/babel.config.js b/docs/babel.config.js index 1c3513f83bc45a..4d941411506746 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -21,8 +21,8 @@ const alias = { '@material-ui/styles': '../packages/material-ui-styles/src', '@material-ui/styled-engine-sc': '../packages/material-ui-styled-engine-sc/src', // Swap the comments on the next two lines for using the styled-components as style engine - '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src', - // '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src', + // '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src', + '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src', '@material-ui/system': '../packages/material-ui-system/src', '@material-ui/utils': '../packages/material-ui-utils/src', docs: './', @@ -40,6 +40,7 @@ module.exports = { ['next/babel', { 'transform-runtime': { corejs: 2, version: transformRuntimeVersion } }], ], plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], [ 'babel-plugin-macros', { @@ -65,11 +66,37 @@ module.exports = { env: { production: { plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], '@babel/plugin-transform-react-constant-elements', 'babel-plugin-transform-dev-warning', ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }], ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }], ], }, + development: { + plugins: [ + ['styled-components', { ssr: true, displayName: true, preprocess: false }], + [ + 'babel-plugin-macros', + { + muiError: { + errorCodesPath, + }, + }, + ], + 'babel-plugin-optimize-clsx', + // for IE 11 support + '@babel/plugin-transform-object-assign', + 'babel-plugin-preval', + [ + 'babel-plugin-module-resolver', + { + alias, + transformFunctions: ['require', 'require.context'], + resolvePath, + }, + ], + ], + }, }, }; diff --git a/docs/package.json b/docs/package.json index 8c986a813553b6..ee4e0754cafdf2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -60,6 +60,7 @@ "babel-plugin-optimize-clsx": "^2.4.1", "babel-plugin-preval": "^2.0.0", "babel-plugin-react-remove-properties": "^0.3.0", + "styled-components": "^1.11.1", "babel-plugin-transform-dev-warning": "^0.1.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "clean-css": "^4.1.11", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 30e48c87480aae..d6920fc8ec38cd 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -311,9 +311,7 @@ function AppWrapper(props) { // Remove the server-side injected CSS. const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles) { - jssStyles.parentElement.removeChild(jssStyles); - } + if (jssStyles && jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles); }, []); const activePage = findActivePage(pages, router.pathname); diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 6c0bca93176b99..a84950355b3e38 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -1,6 +1,6 @@ import React from 'react'; -import { ServerStyleSheets } from '@material-ui/styles'; -import { ServerStyleSheet } from 'styled-components'; +import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'; +import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/core/styles'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { LANGUAGES_SSR } from 'docs/src/modules/constants'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; @@ -119,44 +119,32 @@ MyDocument.getInitialProps = async (ctx) => { // 4. page.render // Render app and page and get the context of the page with collected side effects. - const materialSheets = new ServerStyleSheets(); - const styledComponentsSheet = new ServerStyleSheet(); + const styledComponentSheet = new StyledComponentSheets(); + const materialUiSheets = new MaterialUiServerStyleSheets(); const originalRenderPage = ctx.renderPage; - try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => - styledComponentsSheet.collectStyles(materialSheets.collect()), + styledComponentSheet.collectStyles(materialUiSheets.collect()), }); const initialProps = await Document.getInitialProps(ctx); - let css = materialSheets.toString(); - // It might be undefined, e.g. after an error. - if (css && process.env.NODE_ENV === 'production') { - const result1 = await prefixer.process(css, { from: undefined }); - css = result1.css; - css = cleanCSS.minify(css).styles; - } - return { ...initialProps, canonical: pathnameToLanguage(ctx.req.url).canonical, userLanguage: ctx.query.userLanguage || 'en', // Styles fragment is rendered after the app and page rendering finish. styles: [ - ...React.Children.toArray(initialProps.styles), -