From 08ac17f554b21d0ca89f7949360e7a83ede2edcb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 22 Feb 2019 11:57:44 +0100 Subject: [PATCH 1/2] [styles] Remove the old styles modules --- docs/scripts/buildApi.js | 2 +- docs/src/modules/components/AppWrapper.js | 5 +- docs/src/modules/components/DemoFrame.js | 4 +- docs/src/modules/components/bootstrap.js | 3 - .../overrides/DynamicThemeNesting.js | 7 +- .../customization/themes/CustomStyles.js | 7 +- .../pages/customization/themes/DarkTheme.js | 7 +- .../customization/themes/FontSizeTheme.js | 7 +- .../customization/themes/OverridesCss.js | 7 +- .../themes/OverridesProperties.js | 7 +- .../src/pages/customization/themes/Palette.js | 7 +- .../customization/themes/ThemeNesting.js | 11 +- .../themes/ThemeNestingExtend.js | 11 +- .../customization/themes/TypographyTheme.js | 5 +- .../pages/demos/buttons/CustomizedButtons.js | 9 +- .../pages/demos/buttons/CustomizedButtons.tsx | 8 +- .../demos/text-fields/CustomizedInputs.js | 11 +- .../demos/text-fields/CustomizedInputs.tsx | 10 +- .../pages/guides/right-to-left/Direction.js | 7 +- .../instapaper/pages/instapaper/withTheme.js | 6 +- .../onepirate/modules/withRoot.js | 8 +- .../premium-themes/paperbase/Paperbase.js | 7 +- .../tweeper/pages/tweeper/withTheme.js | 6 +- docs/src/pages/utils/box/box.md | 4 +- package.json | 6 +- packages/material-ui-benchmark/package.json | 15 +- .../material-ui-benchmark/src/bootstrap.js | 3 - packages/material-ui-benchmark/src/core.js | 1 - packages/material-ui-benchmark/src/docs.js | 1 - packages/material-ui-benchmark/src/server.js | 1 - packages/material-ui-benchmark/src/styles.js | 1 - packages/material-ui-benchmark/src/system.js | 1 - .../material-ui-lab/src/Slider/Slider.test.js | 4 + .../SpeedDialAction/SpeedDialAction.test.js | 8 +- packages/material-ui-styles/package.json | 16 +- .../material-ui-styles/src/createStyles.js | 8 - packages/material-ui-styles/src/index.js | 4 +- .../material-ui-styles/src/index.spec.tsx | 94 ----- packages/material-ui-styles/src/install.js | 16 - packages/material-ui-styles/src/jssPreset.js | 4 +- packages/material-ui-styles/src/makeStyles.js | 14 +- packages/material-ui-styles/src/styled.js | 6 +- .../material-ui-styles/src/styled.test.js | 21 +- packages/material-ui-styles/src/withStyles.js | 57 ++- .../material-ui-styles/src/withStyles.test.js | 3 +- packages/material-ui-styles/src/withTheme.js | 105 +++--- .../material-ui-styles/src/withTheme.test.js | 2 + packages/material-ui-styles/tsconfig.json | 11 +- packages/material-ui/package.json | 9 +- .../src/ButtonBase/ButtonBase.test.js | 4 +- packages/material-ui/src/Popover/Popover.js | 1 + .../material-ui/src/Popover/Popover.test.js | 42 +-- .../material-ui/src/Popper/Popper.test.js | 16 +- packages/material-ui/src/Select/Select.js | 2 +- packages/material-ui/src/index.d.ts | 14 +- packages/material-ui/src/index.js | 5 +- .../src/styles/MuiThemeProvider.d.ts | 20 -- .../src/styles/MuiThemeProvider.js | 165 +-------- .../src/styles/MuiThemeProvider.test.js | 242 ------------- .../src/styles/createGenerateClassName.d.ts | 11 - .../src/styles/createGenerateClassName.js | 47 --- .../styles/createGenerateClassName.test.js | 156 -------- .../material-ui/src/styles/createStyles.js | 16 +- .../src/styles/createStyles.test.js | 9 - .../material-ui/src/styles/defaultTheme.js | 5 + .../src/styles/getStylesCreator.js | 53 --- .../src/styles/getStylesCreator.test.js | 99 ------ packages/material-ui/src/styles/index.d.ts | 3 - packages/material-ui/src/styles/index.js | 6 +- .../material-ui/src/styles/jssPreset.d.ts | 3 - packages/material-ui/src/styles/jssPreset.js | 25 -- packages/material-ui/src/styles/makeStyles.js | 11 + .../material-ui/src/styles/mergeClasses.js | 53 --- .../material-ui/src/styles/multiKeyStore.js | 24 -- .../material-ui/src/styles/reactJssContext.js | 9 - packages/material-ui/src/styles/styled.js | 11 + .../material-ui/src/styles/themeListener.d.ts | 21 -- .../material-ui/src/styles/themeListener.js | 29 -- .../src/styles/themeListener.test.js | 36 -- packages/material-ui/src/styles/useTheme.js | 6 + packages/material-ui/src/styles/withStyles.js | 334 +----------------- .../material-ui/src/styles/withStyles.test.js | 330 ----------------- packages/material-ui/src/styles/withTheme.js | 94 +---- .../material-ui/src/styles/withTheme.test.js | 63 ---- .../material-ui/src/test-utils/getClasses.js | 22 +- packages/material-ui/src/test-utils/unwrap.js | 2 +- .../src/withWidth/withWidth.test.js | 18 +- .../test/typescript/styles.spec.tsx | 6 +- pages/_app.js | 2 +- pages/api/mui-theme-provider.js | 11 - pages/api/mui-theme-provider.md | 28 -- scripts/sizeSnapshot/webpack.config.js | 41 +-- test/regressions/index.js | 7 +- yarn.lock | 333 ++++++++--------- 94 files changed, 551 insertions(+), 2461 deletions(-) delete mode 100644 packages/material-ui-benchmark/src/bootstrap.js delete mode 100644 packages/material-ui-styles/src/index.spec.tsx delete mode 100644 packages/material-ui-styles/src/install.js delete mode 100644 packages/material-ui/src/styles/MuiThemeProvider.d.ts delete mode 100644 packages/material-ui/src/styles/MuiThemeProvider.test.js delete mode 100644 packages/material-ui/src/styles/createGenerateClassName.d.ts delete mode 100644 packages/material-ui/src/styles/createGenerateClassName.js delete mode 100644 packages/material-ui/src/styles/createGenerateClassName.test.js delete mode 100644 packages/material-ui/src/styles/createStyles.test.js create mode 100644 packages/material-ui/src/styles/defaultTheme.js delete mode 100644 packages/material-ui/src/styles/getStylesCreator.js delete mode 100644 packages/material-ui/src/styles/getStylesCreator.test.js delete mode 100644 packages/material-ui/src/styles/jssPreset.d.ts delete mode 100644 packages/material-ui/src/styles/jssPreset.js create mode 100644 packages/material-ui/src/styles/makeStyles.js delete mode 100644 packages/material-ui/src/styles/mergeClasses.js delete mode 100644 packages/material-ui/src/styles/multiKeyStore.js delete mode 100644 packages/material-ui/src/styles/reactJssContext.js create mode 100644 packages/material-ui/src/styles/styled.js delete mode 100644 packages/material-ui/src/styles/themeListener.d.ts delete mode 100644 packages/material-ui/src/styles/themeListener.js delete mode 100644 packages/material-ui/src/styles/themeListener.test.js create mode 100644 packages/material-ui/src/styles/useTheme.js delete mode 100644 packages/material-ui/src/styles/withStyles.test.js delete mode 100644 packages/material-ui/src/styles/withTheme.test.js delete mode 100644 pages/api/mui-theme-provider.js delete mode 100644 pages/api/mui-theme-provider.md diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index 3f156b354d1158..ed72a3950c52c8 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown'; import { findPagesMarkdown, findComponents } from '../src/modules/utils/find'; import { getHeaders } from '../src/modules/utils/parseMarkdown'; import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme'; -import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator'; +import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator'; function ensureExists(pat, mask, cb) { mkdir(pat, mask, err => { diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js index cc3608bcd0288a..158ddfe6eacc8f 100644 --- a/docs/src/modules/components/AppWrapper.js +++ b/docs/src/modules/components/AppWrapper.js @@ -2,8 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import url from 'url'; -import { MuiThemeProvider } from '@material-ui/core/styles'; -import { StylesProvider } from '@material-ui/styles'; +import { StylesProvider, ThemeProvider } from '@material-ui/styles'; import acceptLanguage from 'accept-language'; import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism'; import { updatePageContext } from 'docs/src/modules/styles/getPageContext'; @@ -186,7 +185,7 @@ class AppWrapper extends React.Component { sheetsManager={pageContext.sheetsManager} sheetsRegistry={pageContext.sheetsRegistry} > - {children} + {children} ); diff --git a/docs/src/modules/components/DemoFrame.js b/docs/src/modules/components/DemoFrame.js index 07aa4ec89ee0f0..bb460dba3c1a2a 100644 --- a/docs/src/modules/components/DemoFrame.js +++ b/docs/src/modules/components/DemoFrame.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { create } from 'jss'; -import { withStyles, jssPreset } from '@material-ui/core/styles'; -import { StylesProvider } from '@material-ui/styles'; +import { withStyles } from '@material-ui/core/styles'; +import { jssPreset, StylesProvider } from '@material-ui/styles'; import NoSsr from '@material-ui/core/NoSsr'; import rtl from 'jss-rtl'; import Frame from 'react-frame-component'; diff --git a/docs/src/modules/components/bootstrap.js b/docs/src/modules/components/bootstrap.js index 6af952cb7b9f94..388d2055e07a45 100644 --- a/docs/src/modules/components/bootstrap.js +++ b/docs/src/modules/components/bootstrap.js @@ -1,7 +1,6 @@ // Use the same helper as Babel to avoid bundle bloat. import 'core-js/modules/es6.array.find-index'; import 'core-js/modules/es6.set'; -import { install } from '@material-ui/styles'; // Disable auto highlighting // https://github.com/PrismJS/prism/issues/765 @@ -9,5 +8,3 @@ if (process.browser) { window.Prism = window.Prism || {}; window.Prism.manual = true; } - -install(); diff --git a/docs/src/pages/customization/overrides/DynamicThemeNesting.js b/docs/src/pages/customization/overrides/DynamicThemeNesting.js index dd695561cc2d8e..4bd720984101ae 100644 --- a/docs/src/pages/customization/overrides/DynamicThemeNesting.js +++ b/docs/src/pages/customization/overrides/DynamicThemeNesting.js @@ -1,6 +1,7 @@ import React from 'react'; import Button from '@material-ui/core/Button'; -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import blue from '@material-ui/core/colors/blue'; import Switch from '@material-ui/core/Switch'; @@ -30,7 +31,7 @@ class DynamicThemeNesting extends React.Component { } label="Blue" /> - {'Theme nesting'} - + ); } diff --git a/docs/src/pages/customization/themes/CustomStyles.js b/docs/src/pages/customization/themes/CustomStyles.js index aac9cd8bd59b3b..7b3d755940d59c 100644 --- a/docs/src/pages/customization/themes/CustomStyles.js +++ b/docs/src/pages/customization/themes/CustomStyles.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import Checkbox from '@material-ui/core/Checkbox'; -import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import orange from '@material-ui/core/colors/orange'; const styles = theme => ({ @@ -39,9 +40,9 @@ const theme = createMuiTheme({ function CustomStyles() { return ( - + - + ); } diff --git a/docs/src/pages/customization/themes/DarkTheme.js b/docs/src/pages/customization/themes/DarkTheme.js index 7871ad301bf663..c1de0ccc1d28d3 100644 --- a/docs/src/pages/customization/themes/DarkTheme.js +++ b/docs/src/pages/customization/themes/DarkTheme.js @@ -1,5 +1,6 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import WithTheme from './WithTheme'; const theme = createMuiTheme({ @@ -10,9 +11,9 @@ const theme = createMuiTheme({ function DarkTheme() { return ( - + - + ); } diff --git a/docs/src/pages/customization/themes/FontSizeTheme.js b/docs/src/pages/customization/themes/FontSizeTheme.js index 6e3a4c9d05ec73..252767c6a5c01e 100644 --- a/docs/src/pages/customization/themes/FontSizeTheme.js +++ b/docs/src/pages/customization/themes/FontSizeTheme.js @@ -1,5 +1,6 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Typography from '@material-ui/core/Typography'; const theme = createMuiTheme({ @@ -11,9 +12,9 @@ const theme = createMuiTheme({ function FontSizeTheme() { return ( - + body1 - + ); } diff --git a/docs/src/pages/customization/themes/OverridesCss.js b/docs/src/pages/customization/themes/OverridesCss.js index 7487fa88c935f2..b068b2349534c6 100644 --- a/docs/src/pages/customization/themes/OverridesCss.js +++ b/docs/src/pages/customization/themes/OverridesCss.js @@ -1,5 +1,6 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ @@ -23,9 +24,9 @@ const theme = createMuiTheme({ function OverridesCss() { return ( - + - + ); } diff --git a/docs/src/pages/customization/themes/OverridesProperties.js b/docs/src/pages/customization/themes/OverridesProperties.js index b6fe6a0077cbab..63d2c4cb785365 100644 --- a/docs/src/pages/customization/themes/OverridesProperties.js +++ b/docs/src/pages/customization/themes/OverridesProperties.js @@ -1,5 +1,6 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ @@ -14,9 +15,9 @@ const theme = createMuiTheme({ function OverridesProperties() { return ( - + - + ); } diff --git a/docs/src/pages/customization/themes/Palette.js b/docs/src/pages/customization/themes/Palette.js index 548d6d85bd7d83..8056ab0b109ed8 100644 --- a/docs/src/pages/customization/themes/Palette.js +++ b/docs/src/pages/customization/themes/Palette.js @@ -1,5 +1,6 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import purple from '@material-ui/core/colors/purple'; import Button from '@material-ui/core/Button'; @@ -12,10 +13,10 @@ const theme = createMuiTheme({ function Palette() { return ( - + - + ); } diff --git a/docs/src/pages/customization/themes/ThemeNesting.js b/docs/src/pages/customization/themes/ThemeNesting.js index 4125de083c3d0a..d93d017b938010 100644 --- a/docs/src/pages/customization/themes/ThemeNesting.js +++ b/docs/src/pages/customization/themes/ThemeNesting.js @@ -1,5 +1,6 @@ import React from 'react'; -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Checkbox from '@material-ui/core/Checkbox'; import orange from '@material-ui/core/colors/orange'; import green from '@material-ui/core/colors/green'; @@ -22,12 +23,12 @@ const innerTheme = createMuiTheme({ function ThemeNesting() { return ( - + - + - - + + ); } diff --git a/docs/src/pages/customization/themes/ThemeNestingExtend.js b/docs/src/pages/customization/themes/ThemeNestingExtend.js index 309d6bdfee3fc0..bff1bb1193b7bd 100644 --- a/docs/src/pages/customization/themes/ThemeNestingExtend.js +++ b/docs/src/pages/customization/themes/ThemeNestingExtend.js @@ -1,5 +1,6 @@ import React from 'react'; -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Checkbox from '@material-ui/core/Checkbox'; import orange from '@material-ui/core/colors/orange'; import green from '@material-ui/core/colors/green'; @@ -14,9 +15,9 @@ const outerTheme = createMuiTheme({ function ThemeNestingExtend() { return ( - + - createMuiTheme({ ...theme, @@ -31,8 +32,8 @@ function ThemeNestingExtend() { > - - + + ); } diff --git a/docs/src/pages/customization/themes/TypographyTheme.js b/docs/src/pages/customization/themes/TypographyTheme.js index 8ca115bee8d62f..ead7b6ca4ea38a 100644 --- a/docs/src/pages/customization/themes/TypographyTheme.js +++ b/docs/src/pages/customization/themes/TypographyTheme.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; @@ -52,7 +53,7 @@ function TypographyTheme(props) { return (
{children} - {children} + {children}
); } diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js index 61801cfaf500e4..d3fd20d86ad3a5 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.js +++ b/docs/src/pages/demos/buttons/CustomizedButtons.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; @@ -67,11 +68,11 @@ function CustomizedButtons(props) { - + - + - + - + - - , - ); - - assertRendering(markup, sheetsRegistry); - }); - - it('should be able to cache the sheets between two requests', () => { - const generateClassName = createGenerateClassName(); - const sheetsCache = new Map(); - - const sheetsRegistry1 = new SheetsRegistry(); - const markup1 = ReactDOMServer.renderToString( - - - - - , - ); - assertRendering(markup1, sheetsRegistry1); - - const sheetsRegistry2 = new SheetsRegistry(); - const markup2 = ReactDOMServer.renderToString( - - - - - , - ); - assertRendering(markup2, sheetsRegistry2); - }); - }); - - describe('mount', () => { - it('should work with nesting theme', () => { - const { themeSpy: themeSpy1, ThemeSpy: ThemeSpy1 } = getThemeSpy(); - const { themeSpy: themeSpy2, ThemeSpy: ThemeSpy2 } = getThemeSpy(); - const { themeSpy: themeSpy3, ThemeSpy: ThemeSpy3 } = getThemeSpy(); - - const theme1 = createMuiTheme({ status: { color: 'orange' } }); - const theme2 = outerTheme => ({ ...outerTheme, status: { color: 'green' } }); - const theme3 = createMuiTheme({ status: { color: 'yellow' } }); - - const wrapper = mount( - - - - - Foo - - - - - Bar - - - - , - ); - - assert.strictEqual(themeSpy1.callCount, 1); - assert.strictEqual(themeSpy1.args[0][0].status.color, 'orange'); - assert.strictEqual(themeSpy2.callCount, 1); - assert.strictEqual(themeSpy2.args[0][0].status.color, 'green'); - assert.strictEqual(themeSpy3.callCount, 1); - assert.strictEqual(themeSpy3.args[0][0].status.color, 'yellow'); - - wrapper.setProps({ theme: createMuiTheme({ status: { color: 'blue' } }) }); - - assert.strictEqual(themeSpy1.callCount, 3); - assert.strictEqual(themeSpy1.args[2][0].status.color, 'blue'); - assert.strictEqual(themeSpy2.callCount, 3); - assert.strictEqual(themeSpy2.args[2][0].status.color, 'green'); - assert.strictEqual(themeSpy3.callCount, 3); - assert.strictEqual(themeSpy3.args[2][0].status.color, 'yellow'); - }); - - it('should forward the parent options', () => { - const theme = createMuiTheme({ status: { color: 'orange' } }); - - const optionsSpy = spy(); - - function OptionsSpy(props, context) { - optionsSpy(context.muiThemeProviderOptions); - return
; - } - - OptionsSpy.contextTypes = { - muiThemeProviderOptions: PropTypes.object.isRequired, - }; - - mount( - - - - - , - ); - assert.strictEqual(optionsSpy.callCount, 1); - assert.deepEqual(optionsSpy.args[0][0], { - disableStylesGeneration: true, - }); - }); - }); - - describe('prop: disableStylesGeneration', () => { - it('should provide the property down the context', () => { - const { optionsSpy, OptionsSpy } = getOptionsSpy(); - - const theme = createMuiTheme(); - const wrapper = mount( - - -
Foo
- - , - ); - - assert.strictEqual(optionsSpy.callCount, 1); - assert.strictEqual(optionsSpy.args[0][0].disableStylesGeneration, true); - - wrapper.setProps({ disableStylesGeneration: false }); - assert.strictEqual(optionsSpy.args[1][0].disableStylesGeneration, false); - }); - }); - - describe('prop: sheetsCache', () => { - it('should provide the property down the context', () => { - const { optionsSpy, OptionsSpy } = getOptionsSpy(); - - const theme = createMuiTheme(); - const sheetsCache = new Map(); - mount( - - -
Foo
- - , - ); - - assert.strictEqual(optionsSpy.callCount, 1); - assert.strictEqual(optionsSpy.args[0][0].sheetsCache, sheetsCache); - }); - }); -}); diff --git a/packages/material-ui/src/styles/createGenerateClassName.d.ts b/packages/material-ui/src/styles/createGenerateClassName.d.ts deleted file mode 100644 index 48edb02db4a5e6..00000000000000 --- a/packages/material-ui/src/styles/createGenerateClassName.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { GenerateClassName } from 'jss'; - -export interface GenerateClassNameOptions { - dangerouslyUseGlobalCSS?: boolean; - productionPrefix?: string; - seed?: string; -} - -export default function createGenerateClassName( - options?: GenerateClassNameOptions, -): GenerateClassName; diff --git a/packages/material-ui/src/styles/createGenerateClassName.js b/packages/material-ui/src/styles/createGenerateClassName.js deleted file mode 100644 index 56432917e42102..00000000000000 --- a/packages/material-ui/src/styles/createGenerateClassName.js +++ /dev/null @@ -1,47 +0,0 @@ -import warning from 'warning'; - -const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g; - -function safePrefix(classNamePrefix) { - const prefix = String(classNamePrefix); - warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`); - // Sanitize the string as will be used to prefix the generated class name. - return prefix.replace(escapeRegex, '-'); -} - -// Returns a function which generates unique class names based on counters. -// When new generator function is created, rule counter is reset. -// We need to reset the rule counter for SSR for each request. -// -// It's inspired by -// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js -export default function createGenerateClassName(options = {}) { - const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss', seed = '' } = options; - let ruleCounter = 0; - - return (rule, styleSheet) => { - ruleCounter += 1; - warning( - ruleCounter < 1e10, - [ - 'Material-UI: you might have a memory leak.', - 'The ruleCounter is not supposed to grow that much.', - ].join(''), - ); - - if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name) { - return `${safePrefix(styleSheet.options.name)}-${rule.key}`; - } - - if (process.env.NODE_ENV === 'production') { - return `${productionPrefix}${seed}${ruleCounter}`; - } - - // Help with debuggability. - if (styleSheet && styleSheet.options.classNamePrefix) { - return `${safePrefix(styleSheet.options.classNamePrefix)}-${rule.key}-${seed}${ruleCounter}`; - } - - return `${rule.key}-${seed}${ruleCounter}`; - }; -} diff --git a/packages/material-ui/src/styles/createGenerateClassName.test.js b/packages/material-ui/src/styles/createGenerateClassName.test.js deleted file mode 100644 index 51a3eeb31f8087..00000000000000 --- a/packages/material-ui/src/styles/createGenerateClassName.test.js +++ /dev/null @@ -1,156 +0,0 @@ -import { assert } from 'chai'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; -import createGenerateClassName from './createGenerateClassName'; - -describe('createGenerateClassName', () => { - describe('counter', () => { - it('should increment a scoped counter', () => { - const rule = { key: 'root' }; - const generateClassName1 = createGenerateClassName(); - assert.strictEqual(generateClassName1(rule), 'root-1'); - assert.strictEqual(generateClassName1(rule), 'root-2'); - const generateClassName2 = createGenerateClassName(); - assert.strictEqual(generateClassName2(rule), 'root-1'); - }); - }); - - it('should escape parenthesis', () => { - const generateClassName = createGenerateClassName(); - assert.strictEqual( - generateClassName( - { key: 'root' }, - { - options: { - classNamePrefix: 'pure(MuiButton)', - jss: {}, - }, - }, - ), - 'pure-MuiButton--root-1', - ); - }); - - it('should escape spaces', () => { - const generateClassName = createGenerateClassName(); - assert.strictEqual( - generateClassName( - { key: 'root' }, - { - options: { - classNamePrefix: 'foo bar', - jss: {}, - }, - }, - ), - 'foo-bar-root-1', - ); - }); - - describe('options: dangerouslyUseGlobalCSS', () => { - it('should use a global class name', () => { - const generateClassName = createGenerateClassName({ - dangerouslyUseGlobalCSS: true, - }); - assert.strictEqual( - generateClassName( - { - key: 'root', - }, - { - options: { - name: 'Button', - classNamePrefix: 'Button2', - jss: {}, - }, - }, - ), - 'Button-root', - ); - assert.strictEqual( - generateClassName( - { - key: 'root', - }, - { - options: { - classNamePrefix: 'Button', - jss: {}, - }, - }, - ), - 'Button-root-2', - ); - }); - - it('should default to a non deterministic name', () => { - const generateClassName = createGenerateClassName({ - dangerouslyUseGlobalCSS: true, - }); - assert.strictEqual( - generateClassName({ - key: 'root', - }), - 'root-1', - ); - }); - }); - - describe('formatting', () => { - it('should take the sheet meta in development if available', () => { - const rule = { key: 'root' }; - const styleSheet = { options: { classNamePrefix: 'Button' } }; - const generateClassName = createGenerateClassName(); - assert.strictEqual(generateClassName(rule, styleSheet), 'Button-root-1'); - }); - - it('should use a base 10 representation', () => { - const rule = { key: 'root' }; - const generateClassName = createGenerateClassName(); - assert.strictEqual(generateClassName(rule), 'root-1'); - assert.strictEqual(generateClassName(rule), 'root-2'); - assert.strictEqual(generateClassName(rule), 'root-3'); - assert.strictEqual(generateClassName(rule), 'root-4'); - assert.strictEqual(generateClassName(rule), 'root-5'); - assert.strictEqual(generateClassName(rule), 'root-6'); - assert.strictEqual(generateClassName(rule), 'root-7'); - assert.strictEqual(generateClassName(rule), 'root-8'); - assert.strictEqual(generateClassName(rule), 'root-9'); - assert.strictEqual(generateClassName(rule), 'root-10'); - }); - - describe('production', () => { - // Only run the test on node. - if (!/jsdom/.test(window.navigator.userAgent)) { - return; - } - - let nodeEnv; - const env = process.env; - - before(() => { - nodeEnv = env.NODE_ENV; - env.NODE_ENV = 'production'; - consoleErrorMock.spy(); - }); - - after(() => { - env.NODE_ENV = nodeEnv; - consoleErrorMock.reset(); - }); - - it('should output a short representation', () => { - const rule = { key: 'root' }; - const generateClassName = createGenerateClassName(); - assert.strictEqual(generateClassName(rule), 'jss1'); - }); - - it('should work with global CSS', () => { - const rule = { key: 'root' }; - const generateClassName = createGenerateClassName({ - dangerouslyUseGlobalCSS: true, - }); - assert.strictEqual(generateClassName(rule), 'jss1'); - }); - }); - }); -}); diff --git a/packages/material-ui/src/styles/createStyles.js b/packages/material-ui/src/styles/createStyles.js index a8ed89c964397d..2f2a58390553e7 100644 --- a/packages/material-ui/src/styles/createStyles.js +++ b/packages/material-ui/src/styles/createStyles.js @@ -1,3 +1,17 @@ +import warning from 'warning'; +import { createStyles as createStylesOriginal } from '@material-ui/styles'; + +let warnOnce = false; + +// To remove in v5 export default function createStyles(styles) { - return styles; + warning( + warnOnce, + [ + 'Material-UI: @material-ui/core/styles/createStyles is deprecated.', + 'Please use @material-ui/styles/createStyles', + ].join('\n'), + ); + warnOnce = true; + return createStylesOriginal(styles); } diff --git a/packages/material-ui/src/styles/createStyles.test.js b/packages/material-ui/src/styles/createStyles.test.js deleted file mode 100644 index 80dda68d07bdde..00000000000000 --- a/packages/material-ui/src/styles/createStyles.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import { assert } from 'chai'; -import createStyles from './createStyles'; - -describe('createStyles', () => { - it('is the identity function', () => { - const styles = {}; - assert.strictEqual(createStyles(styles), styles); - }); -}); diff --git a/packages/material-ui/src/styles/defaultTheme.js b/packages/material-ui/src/styles/defaultTheme.js new file mode 100644 index 00000000000000..198dddc1f98a1b --- /dev/null +++ b/packages/material-ui/src/styles/defaultTheme.js @@ -0,0 +1,5 @@ +import createMuiTheme from './createMuiTheme'; + +const defaultTheme = createMuiTheme(); + +export default defaultTheme; diff --git a/packages/material-ui/src/styles/getStylesCreator.js b/packages/material-ui/src/styles/getStylesCreator.js deleted file mode 100644 index 710f526750aec1..00000000000000 --- a/packages/material-ui/src/styles/getStylesCreator.js +++ /dev/null @@ -1,53 +0,0 @@ -import warning from 'warning'; -import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb. - -// Support for the jss-expand plugin. -function arrayMerge(destination, source) { - return source; -} - -function getStylesCreator(stylesOrCreator) { - const themingEnabled = typeof stylesOrCreator === 'function'; - - warning( - typeof stylesOrCreator === 'object' || themingEnabled, - [ - 'Material-UI: the first argument provided to withStyles() is invalid.', - 'You need to provide a function generating the styles or a styles object.', - ].join('\n'), - ); - - function create(theme, name) { - const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator; - - if (!name || !theme.overrides || !theme.overrides[name]) { - return styles; - } - - const overrides = theme.overrides[name]; - const stylesWithOverrides = { ...styles }; - - Object.keys(overrides).forEach(key => { - warning( - stylesWithOverrides[key], - [ - 'Material-UI: you are trying to override a style that does not exist.', - `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`, - ].join('\n'), - ); - stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key], { - arrayMerge, - }); - }); - - return stylesWithOverrides; - } - - return { - create, - options: {}, - themingEnabled, - }; -} - -export default getStylesCreator; diff --git a/packages/material-ui/src/styles/getStylesCreator.test.js b/packages/material-ui/src/styles/getStylesCreator.test.js deleted file mode 100644 index 7ec2b772766384..00000000000000 --- a/packages/material-ui/src/styles/getStylesCreator.test.js +++ /dev/null @@ -1,99 +0,0 @@ -import { assert } from 'chai'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; -import getStylesCreator from './getStylesCreator'; - -describe('getStylesCreator', () => { - const name = 'name'; - const stylesCreator = getStylesCreator({ - root: { - color: 'black', - '&:hover': { - color: 'red', - borderRadius: 0, - }, - }, - }); - - it('should be able to get the styles', () => { - const styles = stylesCreator.create({}); - assert.deepEqual(styles, { - root: { - color: 'black', - '&:hover': { - color: 'red', - borderRadius: 0, - }, - }, - }); - }); - - describe('overrides', () => { - before(() => { - consoleErrorMock.spy(); - }); - - after(() => { - consoleErrorMock.reset(); - }); - - it('should be able to overrides some rules, deep', () => { - const theme = { - overrides: { - [name]: { - root: { color: 'white', '&:hover': { borderRadius: 2, backgroundColor: 'black' } }, - }, - }, - }; - const styles = stylesCreator.create(theme, name); - assert.deepEqual(styles, { - root: { - color: 'white', - '&:hover': { - color: 'red', - borderRadius: 2, - backgroundColor: 'black', - }, - }, - }); - }); - - it('should warn on wrong usage', () => { - const theme = { - overrides: { - [name]: { - bubu: { - color: 'white', - }, - }, - }, - }; - stylesCreator.create(theme, name); - assert.strictEqual(consoleErrorMock.callCount(), 1); - assert.match(consoleErrorMock.args()[0][0], /Fix the `bubu` key of `theme\.overrides\.name`/); - }); - - it('should support jss-expand', () => { - const stylesCreator2 = getStylesCreator({ - root: { - padding: [8, 16], - }, - }); - - const theme = { - overrides: { - [name]: { - root: { - padding: [20, 10], - }, - }, - }, - }; - const styles = stylesCreator2.create(theme, name); - assert.deepEqual(styles, { - root: { - padding: [20, 10], - }, - }); - }); - }); -}); diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts index 9e9de75d02f0cd..4561c8aa941669 100644 --- a/packages/material-ui/src/styles/index.d.ts +++ b/packages/material-ui/src/styles/index.d.ts @@ -1,7 +1,4 @@ -export { default as createGenerateClassName } from './createGenerateClassName'; export { default as createMuiTheme, Theme, Direction } from './createMuiTheme'; -export { default as jssPreset } from './jssPreset'; -export { default as MuiThemeProvider } from './MuiThemeProvider'; export { default as createStyles } from './createStyles'; export { default as withStyles, diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js index 4f795f608250dd..8205c616165f41 100644 --- a/packages/material-ui/src/styles/index.js +++ b/packages/material-ui/src/styles/index.js @@ -1,7 +1,7 @@ -export { default as createGenerateClassName } from './createGenerateClassName'; export { default as createMuiTheme } from './createMuiTheme'; -export { default as jssPreset } from './jssPreset'; -export { default as MuiThemeProvider } from './MuiThemeProvider'; export { default as createStyles } from './createStyles'; +export { default as makeStyles } from './makeStyles'; +export { default as MuiThemeProvider } from './MuiThemeProvider'; +export { default as styled } from './styled'; export { default as withStyles } from './withStyles'; export { default as withTheme } from './withTheme'; diff --git a/packages/material-ui/src/styles/jssPreset.d.ts b/packages/material-ui/src/styles/jssPreset.d.ts deleted file mode 100644 index c51cc501895d4e..00000000000000 --- a/packages/material-ui/src/styles/jssPreset.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { JSSOptions } from 'jss'; - -export default function jssPreset(): JSSOptions; diff --git a/packages/material-ui/src/styles/jssPreset.js b/packages/material-ui/src/styles/jssPreset.js deleted file mode 100644 index 4ad5d2f2bbd8b9..00000000000000 --- a/packages/material-ui/src/styles/jssPreset.js +++ /dev/null @@ -1,25 +0,0 @@ -import jssGlobal from 'jss-global'; -import jssNested from 'jss-nested'; -import jssCamelCase from 'jss-camel-case'; -import jssDefaultUnit from 'jss-default-unit'; -import jssVendorPrefixer from 'jss-vendor-prefixer'; -import jssPropsSort from 'jss-props-sort'; - -// Subset of jss-preset-default with only the plugins the Material-UI components are using. -function jssPreset() { - return { - plugins: [ - jssGlobal(), - jssNested(), - jssCamelCase(), - jssDefaultUnit(), - // Disable the vendor prefixer server-side, it does nothing. - // This way, we can get a performance boost. - // In the documentation, we are using `autoprefixer` to solve this problem. - typeof window === 'undefined' ? null : jssVendorPrefixer(), - jssPropsSort(), - ], - }; -} - -export default jssPreset; diff --git a/packages/material-ui/src/styles/makeStyles.js b/packages/material-ui/src/styles/makeStyles.js new file mode 100644 index 00000000000000..e59113867ecf05 --- /dev/null +++ b/packages/material-ui/src/styles/makeStyles.js @@ -0,0 +1,11 @@ +import { makeStyles as makeStylesWithoutDefault } from '@material-ui/styles'; +import defaultTheme from './defaultTheme'; + +function makeStyles(stylesOrCreator, options = {}) { + return makeStylesWithoutDefault(stylesOrCreator, { + defaultTheme, + ...options, + }); +} + +export default makeStyles; diff --git a/packages/material-ui/src/styles/mergeClasses.js b/packages/material-ui/src/styles/mergeClasses.js deleted file mode 100644 index 94527251825c0b..00000000000000 --- a/packages/material-ui/src/styles/mergeClasses.js +++ /dev/null @@ -1,53 +0,0 @@ -import warning from 'warning'; -import { getDisplayName } from '@material-ui/utils'; - -function mergeClasses(options = {}) { - const { baseClasses, newClasses, Component } = options; - - if (!newClasses) { - return baseClasses; - } - - const nextClasses = { ...baseClasses }; - - if (process.env.NODE_ENV !== 'production' && typeof newClasses === 'string') { - warning( - false, - [ - `Material-UI: the value \`${newClasses}\` ` + - `provided to the classes property of ${getDisplayName(Component)} is incorrect.`, - 'You might want to use the className property instead.', - ].join('\n'), - ); - - return baseClasses; - } - - Object.keys(newClasses).forEach(key => { - warning( - baseClasses[key] || !newClasses[key], - [ - `Material-UI: the key \`${key}\` ` + - `provided to the classes property is not implemented in ${getDisplayName(Component)}.`, - `You can only override one of the following: ${Object.keys(baseClasses).join(',')}.`, - ].join('\n'), - ); - - warning( - !newClasses[key] || typeof newClasses[key] === 'string', - [ - `Material-UI: the key \`${key}\` ` + - `provided to the classes property is not valid for ${getDisplayName(Component)}.`, - `You need to provide a non empty string instead of: ${newClasses[key]}.`, - ].join('\n'), - ); - - if (newClasses[key]) { - nextClasses[key] = `${baseClasses[key]} ${newClasses[key]}`; - } - }); - - return nextClasses; -} - -export default mergeClasses; diff --git a/packages/material-ui/src/styles/multiKeyStore.js b/packages/material-ui/src/styles/multiKeyStore.js deleted file mode 100644 index fde38e10a150bd..00000000000000 --- a/packages/material-ui/src/styles/multiKeyStore.js +++ /dev/null @@ -1,24 +0,0 @@ -// Used https://github.com/thinkloop/multi-key-cache as inspiration - -const multiKeyStore = { - set: (cache, key1, key2, value) => { - let subCache = cache.get(key1); - - if (!subCache) { - subCache = new Map(); - cache.set(key1, subCache); - } - - subCache.set(key2, value); - }, - get: (cache, key1, key2) => { - const subCache = cache.get(key1); - return subCache ? subCache.get(key2) : undefined; - }, - delete: (cache, key1, key2) => { - const subCache = cache.get(key1); - subCache.delete(key2); - }, -}; - -export default multiKeyStore; diff --git a/packages/material-ui/src/styles/reactJssContext.js b/packages/material-ui/src/styles/reactJssContext.js deleted file mode 100644 index d4dcca6ec7227a..00000000000000 --- a/packages/material-ui/src/styles/reactJssContext.js +++ /dev/null @@ -1,9 +0,0 @@ -// Share the same values than in -// https://github.com/cssinjs/jss/blob/master/packages/react-jss/src/ns.js -const ns = { - jss: '64a55d578f856d258dc345b094a2a2b3', - sheetsRegistry: 'd4bd0baacbc52bbd48bbb9eb24344ecd', - sheetOptions: '6fc570d6bd61383819d0f9e7407c452d', -}; - -export default ns; diff --git a/packages/material-ui/src/styles/styled.js b/packages/material-ui/src/styles/styled.js new file mode 100644 index 00000000000000..7886fba05a20b2 --- /dev/null +++ b/packages/material-ui/src/styles/styled.js @@ -0,0 +1,11 @@ +import { styled as styledWithoutDefault } from '@material-ui/styles'; +import defaultTheme from './defaultTheme'; + +function styled(stylesOrCreator, options = {}) { + return styledWithoutDefault(stylesOrCreator, { + defaultTheme, + ...options, + }); +} + +export default styled; diff --git a/packages/material-ui/src/styles/themeListener.d.ts b/packages/material-ui/src/styles/themeListener.d.ts deleted file mode 100644 index 7b3e30768c24f4..00000000000000 --- a/packages/material-ui/src/styles/themeListener.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -// This is using the API from https://github.com/vesparny/brcast -interface Broadcast { - setState(state: S): void; - getState(): S; - subscribe(callback: (state: S) => void): number; - unsubscribe(subscriptionId: number): void; -} - -interface MuiContext { - __THEMING__?: Broadcast; -} - -export interface ThemeListener { - initial(context: MuiContext): S | null; - subscribe(context: MuiContext, callback: (state: S) => void): number | null; - unsubscribe(context: MuiContext, subscriptionId: number): void; -} - -declare const themeListener: ThemeListener; - -export default themeListener; diff --git a/packages/material-ui/src/styles/themeListener.js b/packages/material-ui/src/styles/themeListener.js deleted file mode 100644 index 22b8ed5ba15240..00000000000000 --- a/packages/material-ui/src/styles/themeListener.js +++ /dev/null @@ -1,29 +0,0 @@ -// Same value used by react-jss -export const CHANNEL = '__THEMING__'; - -const themeListener = { - contextTypes: { - [CHANNEL]: () => {}, - }, - initial: context => { - if (!context[CHANNEL]) { - return null; - } - - return context[CHANNEL].getState(); - }, - subscribe: (context, cb) => { - if (!context[CHANNEL]) { - return null; - } - - return context[CHANNEL].subscribe(cb); - }, - unsubscribe: (context, subscriptionId) => { - if (context[CHANNEL]) { - context[CHANNEL].unsubscribe(subscriptionId); - } - }, -}; - -export default themeListener; diff --git a/packages/material-ui/src/styles/themeListener.test.js b/packages/material-ui/src/styles/themeListener.test.js deleted file mode 100644 index eac35d078641c9..00000000000000 --- a/packages/material-ui/src/styles/themeListener.test.js +++ /dev/null @@ -1,36 +0,0 @@ -import { assert } from 'chai'; -import createBroadcast from 'brcast'; -import themeListener, { CHANNEL } from './themeListener'; - -describe('themeListener', () => { - it('should be able to get the initial state', () => { - const broadcast = createBroadcast(); - const initialState = {}; - broadcast.setState(initialState); - - assert.strictEqual(themeListener.initial({ [CHANNEL]: broadcast }), initialState); - }); - - it('should not complain if the context is not defined', () => { - assert.strictEqual(themeListener.initial({}), null); - }); - - it('should be able to subscribe to the event stream', done => { - const broadcast = createBroadcast(); - const initialState = {}; - const secondState = {}; - broadcast.setState(initialState); - - themeListener.subscribe( - { - [CHANNEL]: broadcast, - }, - state => { - assert.strictEqual(state, secondState); - done(); - }, - ); - - broadcast.setState(secondState); - }); -}); diff --git a/packages/material-ui/src/styles/useTheme.js b/packages/material-ui/src/styles/useTheme.js new file mode 100644 index 00000000000000..5945620ff61538 --- /dev/null +++ b/packages/material-ui/src/styles/useTheme.js @@ -0,0 +1,6 @@ +import { useTheme as useThemeWithoutDefault } from '@material-ui/styles'; +import defaultTheme from './defaultTheme'; + +export default function useTheme() { + return useThemeWithoutDefault() || defaultTheme; +} diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js index 06a80ecb578398..29f9246c658314 100644 --- a/packages/material-ui/src/styles/withStyles.js +++ b/packages/material-ui/src/styles/withStyles.js @@ -1,331 +1,11 @@ -/* eslint-disable no-underscore-dangle */ +import { withStyles as withStylesWithoutDefault } from '@material-ui/styles'; +import defaultTheme from './defaultTheme'; -import React from 'react'; -import PropTypes from 'prop-types'; -import warning from 'warning'; -import hoistNonReactStatics from 'hoist-non-react-statics'; -import { getDisplayName, ponyfillGlobal } from '@material-ui/utils'; -import { create } from 'jss'; -import ns from './reactJssContext'; -import jssPreset from './jssPreset'; -import mergeClasses from './mergeClasses'; -import multiKeyStore from './multiKeyStore'; -import createMuiTheme from './createMuiTheme'; -import themeListener from './themeListener'; -import createGenerateClassName from './createGenerateClassName'; -import getStylesCreator from './getStylesCreator'; -import getThemeProps from './getThemeProps'; - -// Default JSS instance. -const jss = create(jssPreset()); - -// Use a singleton or the provided one by the context. -// -// The counter-based approach doesn't tolerate any mistake. -// It's much safer to use the same counter everywhere. -const generateClassName = createGenerateClassName(); - -// Global index counter to preserve source order. -// We create the style sheet during at the creation of the component, -// children are handled after the parents, so the order of style elements would be parent->child. -// It is a problem though when a parent passes a className -// which needs to override any child's styles. -// StyleSheet of the child has a higher specificity, because of the source order. -// So our solution is to render sheets them in the reverse order child->sheet, so -// that parent has a higher specificity. -let indexCounter = -10e10; - -// Exported for test purposes -export const sheetsManager = new Map(); - -// We use the same empty object to ref count the styles that don't need a theme object. -const noopTheme = {}; - -// In order to have self-supporting components, we rely on default theme when not provided. -const defaultTheme = createMuiTheme(); - -// Link a style sheet with a component. -// It does not modify the component passed to it; -// instead, it returns a new component, with a `classes` property. -const withStylesOld = (stylesOrCreator, options = {}) => Component => { - const { withTheme = false, flip = null, name, ...styleSheetOptions } = options; - const stylesCreator = getStylesCreator(stylesOrCreator); - const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string' || withTheme; - - indexCounter += 1; - stylesCreator.options.index = indexCounter; - - warning( - indexCounter < 0, - [ - 'Material-UI: you might have a memory leak.', - 'The indexCounter is not supposed to grow that much.', - ].join('\n'), - ); - - class WithStyles extends React.Component { - constructor(props, context) { - super(props, context); - this.jss = context[ns.jss] || jss; - this.sheetsManager = sheetsManager; - this.unsubscribeId = null; - - const { muiThemeProviderOptions } = context; - if (muiThemeProviderOptions) { - if (muiThemeProviderOptions.sheetsManager) { - this.sheetsManager = muiThemeProviderOptions.sheetsManager; - } - this.sheetsCache = muiThemeProviderOptions.sheetsCache; - this.disableStylesGeneration = muiThemeProviderOptions.disableStylesGeneration; - } - - // Attach the stylesCreator to the instance of the component as in the context - // of react-hot-loader the hooks can be executed in a different closure context: - // https://github.com/gaearon/react-hot-loader/blob/master/src/patch.dev.js#L107 - this.stylesCreatorSaved = stylesCreator; - this.sheetOptions = { - generateClassName, - ...context[ns.sheetOptions], - }; - // We use || as the function call is lazy evaluated. - this.theme = listenToTheme ? themeListener.initial(context) || defaultTheme : noopTheme; - - this.attach(this.theme); - - this.cacheClasses = { - // Cache for the finalized classes value. - value: null, - // Cache for the last used classes prop pointer. - lastProp: null, - // Cache for the last used rendered classes pointer. - lastJSS: {}, - }; - } - - componentDidMount() { - if (!listenToTheme) { - return; - } - - this.unsubscribeId = themeListener.subscribe(this.context, theme => { - const oldTheme = this.theme; - this.theme = theme; - this.attach(this.theme); - - // Rerender the component so the underlying component gets the theme update. - // By theme update we mean receiving and applying the new class names. - this.setState({}, () => { - this.detach(oldTheme); - }); - }); - } - - componentDidUpdate() { - // react-hot-loader specific logic - if (this.stylesCreatorSaved === stylesCreator || process.env.NODE_ENV === 'production') { - return; - } - - this.detach(this.theme); - this.stylesCreatorSaved = stylesCreator; - this.attach(this.theme); - this.forceUpdate(); - } - - componentWillUnmount() { - this.detach(this.theme); - - if (this.unsubscribeId !== null) { - themeListener.unsubscribe(this.context, this.unsubscribeId); - } - } - - getClasses() { - if (this.disableStylesGeneration) { - return this.props.classes || {}; - } - - // Tracks if either the rendered classes or classes prop has changed, - // requiring the generation of a new finalized classes object. - let generate = false; - - const sheetManager = multiKeyStore.get( - this.sheetsManager, - this.stylesCreatorSaved, - this.theme, - ); - - if (sheetManager.sheet.classes !== this.cacheClasses.lastJSS) { - this.cacheClasses.lastJSS = sheetManager.sheet.classes; - generate = true; - } - if (this.props.classes !== this.cacheClasses.lastProp) { - this.cacheClasses.lastProp = this.props.classes; - generate = true; - } - - if (generate) { - this.cacheClasses.value = mergeClasses({ - baseClasses: this.cacheClasses.lastJSS, - newClasses: this.props.classes, - Component, - }); - } - - return this.cacheClasses.value; - } - - attach(theme) { - if (this.disableStylesGeneration) { - return; - } - - const stylesCreatorSaved = this.stylesCreatorSaved; - let sheetManager = multiKeyStore.get(this.sheetsManager, stylesCreatorSaved, theme); - - if (!sheetManager) { - sheetManager = { - refs: 0, - sheet: null, - }; - multiKeyStore.set(this.sheetsManager, stylesCreatorSaved, theme, sheetManager); - } - - if (sheetManager.refs === 0) { - let sheet; - - if (this.sheetsCache) { - sheet = multiKeyStore.get(this.sheetsCache, stylesCreatorSaved, theme); - } - - if (!sheet) { - sheet = this.createSheet(theme); - sheet.attach(); - - if (this.sheetsCache) { - multiKeyStore.set(this.sheetsCache, stylesCreatorSaved, theme, sheet); - } - } - - sheetManager.sheet = sheet; - - const sheetsRegistry = this.context[ns.sheetsRegistry]; - if (sheetsRegistry) { - sheetsRegistry.add(sheet); - } - } - - sheetManager.refs += 1; - } - - createSheet(theme) { - const styles = this.stylesCreatorSaved.create(theme, name); - let meta = name; - - if (process.env.NODE_ENV !== 'production' && !meta) { - // Provide a better DX outside production. - meta = getDisplayName(Component); - warning( - typeof meta === 'string', - [ - 'Material-UI: the component displayName is invalid. It needs to be a string.', - `Please fix the following component: ${Component}.`, - ].join('\n'), - ); - } - - const sheet = this.jss.createStyleSheet(styles, { - meta, - classNamePrefix: meta, - flip: typeof flip === 'boolean' ? flip : theme.direction === 'rtl', - link: false, - ...this.sheetOptions, - ...this.stylesCreatorSaved.options, - name: name || Component.displayName, - ...styleSheetOptions, - }); - - return sheet; - } - - detach(theme) { - if (this.disableStylesGeneration) { - return; - } - - const sheetManager = multiKeyStore.get(this.sheetsManager, this.stylesCreatorSaved, theme); - sheetManager.refs -= 1; - - if (sheetManager.refs === 0) { - multiKeyStore.delete(this.sheetsManager, this.stylesCreatorSaved, theme); - - this.jss.removeStyleSheet(sheetManager.sheet); - const sheetsRegistry = this.context[ns.sheetsRegistry]; - if (sheetsRegistry) { - sheetsRegistry.remove(sheetManager.sheet); - } - } - } - - render() { - const { classes, innerRef, ...other } = this.props; - - const more = getThemeProps({ theme: this.theme, name, props: other }); - - // Provide the theme to the wrapped component. - // So we don't have to use the `withTheme` Higher-order Component. - if (withTheme && !more.theme) { - more.theme = this.theme; - } - - return ; - } - } - - WithStyles.propTypes = { - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * Use that property to pass a ref callback to the decorated component. - */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }; - - WithStyles.contextTypes = { - muiThemeProviderOptions: PropTypes.object, - [ns.jss]: PropTypes.object, - [ns.sheetOptions]: PropTypes.object, - [ns.sheetsRegistry]: PropTypes.object, - ...(listenToTheme ? themeListener.contextTypes : {}), - }; - - if (process.env.NODE_ENV !== 'production') { - WithStyles.displayName = `WithStyles(${getDisplayName(Component)})`; - } - - hoistNonReactStatics(WithStyles, Component); - - if (process.env.NODE_ENV !== 'production') { - // Exposed for test purposes. - WithStyles.Naked = Component; - WithStyles.options = options; - } - - return WithStyles; -}; - -if (!ponyfillGlobal.__MUI_STYLES__) { - ponyfillGlobal.__MUI_STYLES__ = {}; -} - -if (!ponyfillGlobal.__MUI_STYLES__.withStyles) { - ponyfillGlobal.__MUI_STYLES__.withStyles = withStylesOld; -} - -export default (styles, options) => - ponyfillGlobal.__MUI_STYLES__.withStyles(styles, { +function withStyles(stylesOrCreator, options) { + return withStylesWithoutDefault(stylesOrCreator, { defaultTheme, ...options, }); +} + +export default withStyles; diff --git a/packages/material-ui/src/styles/withStyles.test.js b/packages/material-ui/src/styles/withStyles.test.js deleted file mode 100644 index 2d4b012f1ea71c..00000000000000 --- a/packages/material-ui/src/styles/withStyles.test.js +++ /dev/null @@ -1,330 +0,0 @@ -import React from 'react'; -import { spy } from 'sinon'; -import { assert } from 'chai'; -import { JssProvider } from 'react-jss'; -import { create, SheetsRegistry } from 'jss'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; -import jssPreset from './jssPreset'; -import withStyles from './withStyles'; -import MuiThemeProvider from './MuiThemeProvider'; -import createMuiTheme from './createMuiTheme'; -import createGenerateClassName from './createGenerateClassName'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; - -// eslint-disable-next-line react/prefer-stateless-function -class Empty extends React.Component { - render() { - return
; - } -} - -describe('withStyles', () => { - let shallow; - let mount; - - before(() => { - shallow = createShallow(); - mount = createMount(); - }); - - after(() => { - mount.cleanUp(); - }); - - describe('props', () => { - let StyledComponent1; - let classes; - - before(() => { - const styles = { root: { display: 'flex' } }; - StyledComponent1 = withStyles(styles, { name: 'MuiTextField' })(Empty); - classes = getClasses(); - }); - - it('should provide a classes property', () => { - const wrapper = shallow(); - assert.deepEqual(wrapper.props().classes, classes, 'Should provide the classes property'); - }); - - describe('prop: classes', () => { - beforeEach(() => { - consoleErrorMock.spy(); - }); - - afterEach(() => { - consoleErrorMock.reset(); - }); - - it('should accept a classes property', () => { - const wrapper = shallow(); - assert.deepEqual(wrapper.props().classes, { root: `${classes.root} h1` }); - assert.strictEqual(consoleErrorMock.callCount(), 0); - }); - - it('should ignore undefined property', () => { - const wrapper = shallow(); - assert.deepEqual(wrapper.props().classes, { root: classes.root }); - assert.strictEqual(consoleErrorMock.callCount(), 0); - }); - - it('should warn if providing a unknown key', () => { - const wrapper = shallow(); - - assert.deepEqual(wrapper.props().classes, { root: classes.root, bar: 'undefined foo' }); - assert.strictEqual(consoleErrorMock.callCount(), 1); - assert.match( - consoleErrorMock.args()[0][0], - /Material-UI: the key `bar` provided to the classes property is not implemented/, - ); - }); - - it('should warn if providing a string', () => { - const wrapper = shallow(); - - assert.deepEqual(wrapper.props().classes, { root: classes.root }); - assert.strictEqual(consoleErrorMock.callCount() >= 1, true); - const args = consoleErrorMock.args(); - assert.match( - consoleErrorMock.args()[args.length - 1][0], - /You might want to use the className property instead./, - ); - }); - - it('should warn if providing a non string', () => { - const wrapper = shallow(); - - assert.deepEqual(wrapper.props().classes, { root: `${classes.root} [object Object]` }); - assert.strictEqual(consoleErrorMock.callCount(), 1); - assert.match( - consoleErrorMock.args()[0][0], - /Material-UI: the key `root` provided to the classes property is not valid/, - ); - }); - }); - - describe('prop: innerRef', () => { - it('should provide a ref on the inner component', () => { - const handleRef = spy(); - mount(); - assert.strictEqual(handleRef.callCount, 1); - }); - }); - - describe('classes memoization', () => { - it('should recycle with no classes property', () => { - const wrapper = mount(); - const classes1 = wrapper.find(Empty).props().classes; - wrapper.update(); - const classes2 = wrapper.find(Empty).props().classes; - assert.strictEqual(classes1, classes2); - }); - - it('should recycle even when a classes property is provided', () => { - const inputClasses = { root: 'foo' }; - const wrapper = mount(); - const classes1 = wrapper.find(Empty).props().classes; - wrapper.setProps({ - classes: inputClasses, - }); - const classes2 = wrapper.find(Empty).props().classes; - assert.strictEqual(classes1, classes2); - }); - - it('should invalidate the cache', () => { - const wrapper = mount(); - const classes1 = wrapper.find(Empty).props().classes; - assert.deepEqual(classes1, { - root: `${classes.root} foo`, - }); - wrapper.setProps({ - classes: { root: 'bar' }, - }); - const classes2 = wrapper.find(Empty).props().classes; - assert.notStrictEqual(classes1, classes2); - assert.deepEqual(classes2, { - root: `${classes.root} bar`, - }); - }); - }); - }); - - describe('mount', () => { - let sheetsRegistry; - let jss; - let generateClassName; - - beforeEach(() => { - jss = create(jssPreset()); - generateClassName = createGenerateClassName(); - sheetsRegistry = new SheetsRegistry(); - }); - - it('should run lifecycles with no theme', () => { - const styles = { root: { display: 'flex' } }; - const StyledComponent = withStyles(styles)(Empty); - const wrapper = mount( - - - - - , - ); - assert.strictEqual(sheetsRegistry.registry.length, 1); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' }); - wrapper.update(); - assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once'); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' }); - wrapper.setProps({ theme: createMuiTheme() }); - assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once'); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' }); - - wrapper.unmount(); - assert.strictEqual(sheetsRegistry.registry.length, 0); - }); - - it('should support theme.props', () => { - const styles = { root: { display: 'flex' } }; - const StyledComponent = withStyles(styles, { name: 'MuiFoo' })(Empty); - - const wrapper = mount( - - - , - ); - - assert.strictEqual(wrapper.find(Empty).props().foo, 'bar'); - wrapper.unmount(); - }); - - it('should work when depending on a theme', () => { - const styles = theme => ({ root: { padding: theme.spacing(1) } }); - const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty); - - const wrapper = mount( - - - - - , - ); - assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once'); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root-1' }); - wrapper.setProps({ theme: createMuiTheme() }); - assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once'); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root-2' }); - }); - - it('should support the overrides key', () => { - const styles = { root: { padding: 8 } }; - const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty); - - mount( - - - - - , - ); - - assert.strictEqual(sheetsRegistry.registry.length, 1, 'should only attach once'); - assert.deepEqual(sheetsRegistry.registry[0].rules.raw, { root: { padding: 9 } }); - }); - - describe('options: disableStylesGeneration', () => { - it('should not generate the styles', () => { - const styles = { root: { display: 'flex' } }; - const StyledComponent = withStyles(styles)(Empty); - - const wrapper = mount( - - - - - , - ); - assert.strictEqual(sheetsRegistry.registry.length, 0); - assert.deepEqual(wrapper.find(Empty).props().classes, {}); - wrapper.unmount(); - assert.strictEqual(sheetsRegistry.registry.length, 0); - }); - }); - }); - - describe('HMR with same state', () => { - it('should take the new stylesCreator into account', () => { - const styles1 = { root: { padding: 1 } }; - const StyledComponent1 = withStyles(styles1, { name: 'MuiTextField' })(Empty); - const wrapper = mount(); - - const styles2 = { root: { padding: 2 } }; - const StyledComponent2 = withStyles(styles2, { name: 'MuiTextField' })(Empty); - - // Simulate react-hot-loader behavior - wrapper.instance().componentDidUpdate = StyledComponent2.prototype.componentDidUpdate; - - const classes1 = wrapper.childAt(0).props().classes.root; - wrapper.setProps({}); - wrapper.update(); - const classes2 = wrapper.childAt(0).props().classes.root; - - assert.notStrictEqual(classes1, classes2, 'should generate new classes'); - }); - }); - - describe('options', () => { - let jss; - let generateClassName; - let sheetsRegistry; - - beforeEach(() => { - jss = create(jssPreset()); - generateClassName = createGenerateClassName(); - sheetsRegistry = new SheetsRegistry(); - }); - - it('should use the displayName', () => { - // Uglified - const a = () =>
; - const StyledComponent1 = withStyles({ root: { padding: 1 } })(a); - const fooo = () =>
; - const StyledComponent2 = withStyles({ root: { padding: 1 } })(fooo); - const AppFrame = () =>
; - AppFrame.displayName = 'AppLayout'; - const StyledComponent3 = withStyles({ root: { padding: 1 } })(AppFrame); - - mount( - -
- - - -
- , - ); - assert.strictEqual(sheetsRegistry.registry[0].options.classNamePrefix, 'a'); - assert.strictEqual(sheetsRegistry.registry[0].options.name, undefined); - assert.strictEqual(sheetsRegistry.registry[1].options.classNamePrefix, 'fooo'); - assert.strictEqual(sheetsRegistry.registry[1].options.name, undefined); - assert.strictEqual(sheetsRegistry.registry[2].options.classNamePrefix, 'AppLayout'); - assert.strictEqual(sheetsRegistry.registry[2].options.name, 'AppLayout'); - }); - }); -}); diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js index 28e22b0d24b526..9f9dbba87d33db 100644 --- a/packages/material-ui/src/styles/withTheme.js +++ b/packages/material-ui/src/styles/withTheme.js @@ -1,90 +1,8 @@ -/* eslint-disable no-underscore-dangle */ +import { withThemeCreator } from '@material-ui/styles'; +import defaultTheme from './defaultTheme'; -import React from 'react'; -import PropTypes from 'prop-types'; -import hoistNonReactStatics from 'hoist-non-react-statics'; -import { getDisplayName, ponyfillGlobal } from '@material-ui/utils'; -import createMuiTheme from './createMuiTheme'; -import themeListener from './themeListener'; +const withTheme = withThemeCreator({ + defaultTheme, +}); -let defaultTheme; - -function getDefaultTheme() { - if (defaultTheme) { - return defaultTheme; - } - - defaultTheme = createMuiTheme(); - return defaultTheme; -} - -// Provide the theme object as a property to the input component. -const withThemeOld = Component => { - if (process.env.NODE_ENV !== 'production' && Component === undefined) { - throw new Error( - [ - 'You are calling withTheme(Component) with an undefined component.', - 'You may have forgotten to import it.', - ].join('\n'), - ); - } - - class WithTheme extends React.Component { - constructor(props, context) { - super(); - this.state = { - // We use || as the function call is lazy evaluated. - theme: themeListener.initial(context) || getDefaultTheme(), - }; - } - - componentDidMount() { - this.unsubscribeId = themeListener.subscribe(this.context, theme => { - this.setState({ theme }); - }); - } - - componentWillUnmount() { - if (this.unsubscribeId !== null) { - themeListener.unsubscribe(this.context, this.unsubscribeId); - } - } - - render() { - const { innerRef, ...other } = this.props; - return ; - } - } - - WithTheme.propTypes = { - /** - * Use that property to pass a ref callback to the decorated component. - */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }; - - WithTheme.contextTypes = themeListener.contextTypes; - - if (process.env.NODE_ENV !== 'production') { - WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`; - } - - hoistNonReactStatics(WithTheme, Component); - - if (process.env.NODE_ENV !== 'production') { - // Exposed for test purposes. - WithTheme.Naked = Component; - } - - return WithTheme; -}; - -if (!ponyfillGlobal.__MUI_STYLES__) { - ponyfillGlobal.__MUI_STYLES__ = {}; -} - -if (!ponyfillGlobal.__MUI_STYLES__.withTheme) { - ponyfillGlobal.__MUI_STYLES__.withTheme = withThemeOld; -} - -export default ponyfillGlobal.__MUI_STYLES__.withTheme; +export default withTheme; diff --git a/packages/material-ui/src/styles/withTheme.test.js b/packages/material-ui/src/styles/withTheme.test.js deleted file mode 100644 index 5ab0f74f953f71..00000000000000 --- a/packages/material-ui/src/styles/withTheme.test.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { assert } from 'chai'; -import { spy } from 'sinon'; -import createBroadcast from 'brcast'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; -import { CHANNEL } from './themeListener'; -import withTheme from './withTheme'; - -const Empty = () =>
; -// eslint-disable-next-line react/prefer-stateless-function -class EmptyClass extends React.Component { - render() { - return
; - } -} - -describe('withTheme', () => { - let shallow; - let context; - let mount; - let broadcast; - - before(() => { - shallow = createShallow(); - mount = createMount(); - broadcast = createBroadcast(); - context = { [CHANNEL]: broadcast }; - }); - - after(() => { - mount.cleanUp(); - }); - - it('should use the theme provided by the context', () => { - const theme = { themeProperty: 'foo' }; - broadcast.setState(theme); - const ThemedComponent = withTheme(Empty); - const wrapper = shallow(, { context }); - - assert.strictEqual(wrapper.props().theme, theme); - }); - - it('should rerender when the theme is updated', () => { - const theme = { themeProperty: 'foo' }; - broadcast.setState(theme); - const ThemedComponent = withTheme(Empty); - const wrapper = mount(, { context }); - - assert.strictEqual(wrapper.instance().state.theme, theme); - const newTheme = { themeProperty: 'bar' }; - broadcast.setState(newTheme); - assert.strictEqual(wrapper.instance().state.theme, newTheme); - }); - - describe('prop: innerRef', () => { - it('should provide a ref on the inner component', () => { - const ThemedComponent = withTheme(EmptyClass); - const handleRef = spy(); - mount(); - assert.strictEqual(handleRef.callCount, 1); - }); - }); -}); diff --git a/packages/material-ui/src/test-utils/getClasses.js b/packages/material-ui/src/test-utils/getClasses.js index 3d18245703565b..0c21f64f5f6e75 100644 --- a/packages/material-ui/src/test-utils/getClasses.js +++ b/packages/material-ui/src/test-utils/getClasses.js @@ -1,22 +1,4 @@ -import ns from '../styles/reactJssContext'; -import { SheetsRegistry } from 'jss'; -import createShallow from './createShallow'; -import { sheetsManager } from '../styles/withStyles'; - -const shallow = createShallow(); - // Helper function to extract the classes from a styleSheet. -export default function getClasses(element, options = {}) { - const sheetsRegistry = new SheetsRegistry(); - - sheetsManager.clear(); - shallow(element, { - ...options, - context: { - [ns.sheetsRegistry]: sheetsRegistry, - ...options.context, - }, - }); - - return sheetsRegistry.registry[0].classes; +export default function getClasses(element) { + return element.type.classes; } diff --git a/packages/material-ui/src/test-utils/unwrap.js b/packages/material-ui/src/test-utils/unwrap.js index bbb791a6dbb3a9..651f0f9c1b585c 100644 --- a/packages/material-ui/src/test-utils/unwrap.js +++ b/packages/material-ui/src/test-utils/unwrap.js @@ -1,3 +1,3 @@ export default function unwrap(component) { - return component.Naked ? unwrap(component.Naked) : component; + return component.Naked; } diff --git a/packages/material-ui/src/withWidth/withWidth.test.js b/packages/material-ui/src/withWidth/withWidth.test.js index a94e3bc9b7c7bb..c0c0d46a3f8b24 100644 --- a/packages/material-ui/src/withWidth/withWidth.test.js +++ b/packages/material-ui/src/withWidth/withWidth.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { assert } from 'chai'; -import { useFakeTimers, spy } from 'sinon'; +import { useFakeTimers } from 'sinon'; import EventListener from 'react-event-listener'; import { createMount, createShallow } from '@material-ui/core/test-utils'; import withWidth, { isWidthDown, isWidthUp } from './withWidth'; @@ -8,13 +8,6 @@ import createBreakpoints from '../styles/createBreakpoints'; import createMuiTheme from '../styles/createMuiTheme'; const Empty = () =>
; -// eslint-disable-next-line react/prefer-stateless-function -class EmptyClass extends React.Component { - render() { - return
; - } -} -const EmptyClassWithWidth = withWidth()(EmptyClass); const EmptyWithWidth = withWidth()(Empty); const breakpoints = createBreakpoints({}); @@ -47,15 +40,6 @@ describe('withWidth', () => { }); }); - describe('prop: innerRef', () => { - it('should provide a ref on the inner component', () => { - const handleRef = spy(); - - mount(); - assert.strictEqual(handleRef.callCount, 1); - }); - }); - describe('browser', () => { it('should provide the right width to the child element', () => { const wrapper = mount(); diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx index e99651e4bf91bc..ca960e5b0613b7 100644 --- a/packages/material-ui/test/typescript/styles.spec.tsx +++ b/packages/material-ui/test/typescript/styles.spec.tsx @@ -3,7 +3,6 @@ import { createStyles, withStyles, createMuiTheme, - MuiThemeProvider, Theme, withTheme, StyleRules, @@ -11,6 +10,7 @@ import { StyledComponentProps, WithStyles, } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button/Button'; import blue from '@material-ui/core/colors/blue'; import { WithTheme } from '@material-ui/core/styles/withTheme'; @@ -164,9 +164,9 @@ const t5 = createMuiTheme().spacing(1, 2, 3, 4, 5); function OverridesTheme() { return ( - + - + ); } diff --git a/pages/_app.js b/pages/_app.js index 737a4ea0f515e1..307ef61f44ea1b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -151,7 +151,7 @@ const pages = [ }, { pathname: '/utils/box', - title: 'Box (unstable)', + title: 'Box', }, ], }, diff --git a/pages/api/mui-theme-provider.js b/pages/api/mui-theme-provider.js deleted file mode 100644 index f6bfcc8601c0f0..00000000000000 --- a/pages/api/mui-theme-provider.js +++ /dev/null @@ -1,11 +0,0 @@ -import 'docs/src/modules/components/bootstrap'; -// --- Post bootstrap ----- -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './mui-theme-provider.md'; - -function Page() { - return ; -} - -export default Page; diff --git a/pages/api/mui-theme-provider.md b/pages/api/mui-theme-provider.md deleted file mode 100644 index 49c1a434cb4a76..00000000000000 --- a/pages/api/mui-theme-provider.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -filename: /packages/material-ui/src/styles/MuiThemeProvider.js ---- - - - -# MuiThemeProvider API - -

The API documentation of the MuiThemeProvider React component. Learn more about the properties and the CSS customization points.

- -```js -import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'; -``` - -This component takes a `theme` property. -It makes the `theme` available down the React tree thanks to React context. -This component should preferably be used at **the root of your component tree**. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children * | node |   | You can wrap a node. | -| disableStylesGeneration | bool |   | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this property. | -| sheetsManager | object |   | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. | -| theme * | union: object |
 func
 |   | A theme object. | - - diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index ff6e851c1a91ac..4227d3ce7e6f82 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -18,39 +18,39 @@ async function getSizeLimitBundles() { return [ { - name: '@material-ui/core/Paper', + name: '@material-ui/core', webpack: true, - path: 'packages/material-ui/build/Paper/index.js', + path: 'packages/material-ui/build/index.js', }, { - name: '@material-ui/core/Paper.esm', + name: '@material-ui/styles', webpack: true, - path: 'packages/material-ui/build/esm/Paper/index.js', + path: 'packages/material-ui-styles/build/index.js', }, { - name: '@material-ui/core', + name: '@material-ui/system', webpack: true, - path: 'packages/material-ui/build/index.js', + path: 'packages/material-ui-system/build/index.js', }, { - name: '@material-ui/core/styles/createMuiTheme', + name: '@material-ui/lab', webpack: true, - path: 'packages/material-ui/build/styles/createMuiTheme.js', + path: 'packages/material-ui-lab/build/index.js', }, { - name: '@material-ui/lab', + name: 'Paper', webpack: true, - path: 'packages/material-ui-lab/build/index.js', + path: 'packages/material-ui/build/esm/Paper/index.js', }, { - name: '@material-ui/styles', + name: 'Paper.cjs', webpack: true, - path: 'packages/material-ui-styles/build/index.js', + path: 'packages/material-ui/build/Paper/index.js', }, { - name: '@material-ui/system', + name: 'createMuiTheme', webpack: true, - path: 'packages/material-ui-system/build/index.js', + path: 'packages/material-ui/build/styles/createMuiTheme.js', }, { name: 'colorManipulator', @@ -71,14 +71,14 @@ async function getSizeLimitBundles() { }, { // vs https://bundlephobia.com/result?p=react-popper - name: '@material-ui/core/Popper', + name: 'Popper', webpack: true, path: 'packages/material-ui/build/esm/Popper/index.js', }, { // vs https://bundlephobia.com/result?p=react-responsive // vs https://bundlephobia.com/result?p=react-media - name: '@material-ui/core/useMediaQuery', + name: 'useMediaQuery', webpack: true, path: 'packages/material-ui/build/useMediaQuery/index.js', }, @@ -97,8 +97,9 @@ async function getSizeLimitBundles() { module.exports = getSizeLimitBundles; -module.exports = new Promise(async resolve => { - const entry = (await getSizeLimitBundles()).reduce((acc, bundle) => { +module.exports = async function webpackConfig() { + const entries = await getSizeLimitBundles(); + const entry = entries.reduce((acc, bundle) => { acc[bundle.name] = path.join(workspaceRoot, bundle.path); return acc; }, {}); @@ -124,5 +125,5 @@ module.exports = new Promise(async resolve => { }, }; - resolve(config); -}); + return config; +}; diff --git a/test/regressions/index.js b/test/regressions/index.js index dfb21eeeb6fc94..9a1c29fdf1a338 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -2,7 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import vrtest from 'vrtest/client'; import webfontloader from 'webfontloader'; -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/styles'; import TestViewer from './TestViewer'; const theme = createMuiTheme(); @@ -138,11 +139,11 @@ tests.forEach(test => { suite.createTest(test.name, () => { ReactDOM.render( - + - , + , rootEl, ); }); diff --git a/yarn.lock b/yarn.lock index fa3a20ee42ce23..51fd26266d4230 100644 --- a/yarn.lock +++ b/yarn.lock @@ -973,7 +973,7 @@ "@emotion/utils" "0.11.1" "@emotion/weak-memoize" "0.2.2" -"@emotion/core@^10.0.0": +"@emotion/core@^10.0.0", "@emotion/core@latest": version "10.0.7" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.7.tgz#a894324b944cb06dcd36813afe35f07b0ed8d20d" integrity sha512-f5ZeA8R5mTiD2VDFCy6kRTXrQXN/1s79WPvEZZSwROJIyy9mHBB0/Lxg9BSIXfFdXryVw76kHNehTcBkgDYS7A== @@ -1056,7 +1056,7 @@ "@emotion/utils" "0.11.1" object-assign "^4.1.1" -"@emotion/styled@^10.0.0": +"@emotion/styled@^10.0.0", "@emotion/styled@latest": version "10.0.7" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.7.tgz#e36c84bf14435127481a1ea0b038d64a15c13995" integrity sha512-H/7wi2bFYl6GdxBPYef0FNYay1ay5iKFGYxmkuH8WJZnDc/bf1Bx+lH9IQ+QujAMgmAtUHwJsgO2vwj0LEIYcg== @@ -1856,9 +1856,9 @@ integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q== "@types/jss@^9.5.6": - version "9.5.7" - resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0" - integrity sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw== + version "9.5.8" + resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.8.tgz#258391f42211c042fc965508d505cbdc579baa5b" + integrity sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA== dependencies: csstype "^2.0.0" indefinite-observable "^1.0.1" @@ -2911,7 +2911,7 @@ before-after-hook@^1.2.0: resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-1.3.2.tgz#7bfbf844ad670aa7a96b5a4e4e15bd74b08ed66b" integrity sha512-zyPgY5dgbf99c0uGUjhY4w+mxqEGxPKg9RQDl34VvrVh2bM31lFN+mwR1ZHepq/KA3VCPk1gwJZL6IIJqjLy2w== -benchmark@^2.1.4: +benchmark@latest: version "2.1.4" resolved "https://registry.yarnpkg.com/benchmark/-/benchmark-2.1.4.tgz#09f3de31c916425d498cc2ee565a0ebf3c2a5629" integrity sha1-CfPeMckWQl1JjMLuVloOvzwqVik= @@ -4317,17 +4317,10 @@ css-url-regex@^1.1.0: resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec" integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w= -css-vendor@^0.3.8: - version "0.3.8" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" - integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo= - dependencies: - is-in-browser "^1.0.2" - -css-vendor@^1.1.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-1.2.1.tgz#21b914913d3a68bab2708090dab2e61db7c9eaec" - integrity sha512-ZpwiWxn5jWNJ7NF3DAb/Dc/+c2lRu+fnovej/adCv3VJsULJSjdXEpUwRcq4fnpAAh98Hi7b0GDnlyoNFcdv1g== +css-vendor@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.0.tgz#c7f4a49efbdd660c04e239af4626e2684d1ba60e" + integrity sha512-YOsuXi6bO0+q2QqIvWKuPpq/eMEeN4bm40zWFPQRl6UaBV1UZliARLgvEoxmtFm/KB5MpL8ySxpoGc//L2Li8Q== dependencies: "@babel/runtime" "^7.3.1" is-in-browser "^1.0.2" @@ -5106,7 +5099,7 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= -emotion-server@^10.0.6: +emotion-server@latest: version "10.0.7" resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-10.0.7.tgz#1aad48e23de0eed0f9d175c98ea1c48d4e8c0667" integrity sha512-bjOs3bQa4MqWCTvVdN1fc9LeYMW76IsDcUzD0m4bUl8SNoRcH9dXXgwII+L7XotnfsB0ttg4R/G7QeLDhfGWjQ== @@ -5122,14 +5115,6 @@ emotion-theming@^10.0.5: hoist-non-react-statics "^2.3.1" object-assign "^4.1.1" -emotion@^10.0.7: - version "10.0.7" - resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.7.tgz#74ea432c7004c2bd5452d017d52e307a7a31a835" - integrity sha512-k1gGBoel9rlHvHIUVHyk4iJPsRaDsrpr7vKivOmdJAH2Va+smxIYvsjjzXnxTeqJt5IwcVBareuoAJMxeShG/w== - dependencies: - babel-plugin-emotion "^10.0.7" - create-emotion "^10.0.7" - emotion@^9.1.2: version "9.2.12" resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9" @@ -5138,6 +5123,14 @@ emotion@^9.1.2: babel-plugin-emotion "^9.2.11" create-emotion "^9.2.12" +emotion@latest: + version "10.0.7" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.7.tgz#74ea432c7004c2bd5452d017d52e307a7a31a835" + integrity sha512-k1gGBoel9rlHvHIUVHyk4iJPsRaDsrpr7vKivOmdJAH2Va+smxIYvsjjzXnxTeqJt5IwcVBareuoAJMxeShG/w== + dependencies: + babel-plugin-emotion "^10.0.7" + create-emotion "^10.0.7" + encodeurl@~1.0.1, encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -6802,7 +6795,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@3.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^3.2.1: +hoist-non-react-statics@3.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== @@ -6952,7 +6945,7 @@ hyperlinker@^1.0.0: resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e" integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ== -hyphenate-style-name@^1.0.2: +hyphenate-style-name@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== @@ -7356,11 +7349,6 @@ is-fullwidth-code-point@^2.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8= -is-function@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" - integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU= - is-glob@^2.0.0, is-glob@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863" @@ -7901,129 +7889,128 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-camel-case@^6.0.0, jss-camel-case@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44" - integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ== +jss-plugin-camel-case@10.0.0-alpha.12, jss-plugin-camel-case@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.12.tgz#1066c051137867342da6cf0db9b50c93b8caa8f5" + integrity sha512-9kepPCmQN8ajAgpNu7ddlb/ZxTBWrURrQd5HtlgWeMvHZ6OUDQnnRvQKzzx+d1v7BmddB/qLOznI6AYKytJOSw== dependencies: - hyphenate-style-name "^1.0.2" + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.0.0-alpha.12" -jss-compose@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484" - integrity sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA== +jss-plugin-compose@10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-compose/-/jss-plugin-compose-10.0.0-alpha.12.tgz#9166e142e79189a55cd52e4f741cc0e4cdc97c5c" + integrity sha512-J+96cXY7g/EPouvgSugAmiEH1r18w8LNoJ+1LIDA9XUrOCmXvMqIszaI/aydV9arq0SqLGWL+jXkpw04U7Rv6g== dependencies: - warning "^3.0.0" - -jss-default-unit@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6" - integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg== - -jss-expand@^5.3.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6" - integrity sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg== + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" + tiny-warning "^1.0.2" -jss-extend@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc" - integrity sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA== +jss-plugin-default-unit@10.0.0-alpha.12, jss-plugin-default-unit@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.12.tgz#1346580316c8b199342c5f893f4a10b6a2a98f1f" + integrity sha512-6lwbTnLu1igvSpIjjehwCyrS+08ecdZY7n/JZNCB6/L70BT5zcBfMUf523o1JHigDsKvGZxFFmnEOcU1JM7fwA== dependencies: - warning "^3.0.0" - -jss-global@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2" - integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q== + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" -jss-nested@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca" - integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA== +jss-plugin-expand@10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-expand/-/jss-plugin-expand-10.0.0-alpha.12.tgz#f6185525a8360d0ae53807b789f38a73358d8e7f" + integrity sha512-lOLvidyon3zx1GpHD6E7xc8BPniGUVoQ7dxlS2ORRN0QqhOIcL4mEdeoJ5maz+jHgLzopt2P296NihOh9NJZJw== dependencies: - warning "^3.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" -jss-plugin-camel-case@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz#7dcbd9acb6682f3102cb2d3356b4fd9642d93f17" - integrity sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA== +jss-plugin-extend@10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-extend/-/jss-plugin-extend-10.0.0-alpha.12.tgz#beac06526cabaf326dc066cce2a8b4a8f5f28f74" + integrity sha512-OXwKsA2vMKtW06rnuC3+7oK8hrnsKCYPHPzdDzEUv8i9HRHC6u8rg1ZFDLGj4hXuIKGJl90UmRW+t0D+NLY6HA== dependencies: - "@babel/runtime" "^7.0.0" - hyphenate-style-name "^1.0.2" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" + tiny-warning "^1.0.2" -jss-plugin-default-unit@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz#f6dd0a03d545e7bf243c062bae3a832ac8c5ff6d" - integrity sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g== +jss-plugin-global@10.0.0-alpha.12, jss-plugin-global@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.12.tgz#7d2bff813fdcdd9db459012dca821a8fd93b3770" + integrity sha512-KhGk8+vwXrKdhb3Fk6iEEClfb5Kv60KEXMpaF9yMGCTiUdQ1aB/iHfqU4eHe83QtGOzPGauUctXeXtNMpwyccA== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" -jss-plugin-global@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz#38ca390802b62da490afbaafc581552a81977729" - integrity sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ== +jss-plugin-nested@10.0.0-alpha.12, jss-plugin-nested@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.12.tgz#745f37391e3dd60386f9e3b469255b82002084cb" + integrity sha512-Y33Bx3kqPUwTS/6S3baoIuCQ6DLMAXPts4xdBMrQ37K3rNIkTWpSy4HPZWZPz3FGbgROyug1OwZsPrtgm2K6CQ== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" + tiny-warning "^1.0.2" -jss-plugin-nested@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz#03a89c8f7c1d570a3d5f16dae3e61f7f2edb0316" - integrity sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw== +jss-plugin-props-sort@10.0.0-alpha.12, jss-plugin-props-sort@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.12.tgz#a07fa31b7e483e0116bbbad337770f24ac158fe3" + integrity sha512-w/Xfng4zNNJWztHc/5PXBWpGPjDbWfTR8qJN7H/0+5tJWNBuYapDM97PpPaD/tjq1fPGlvk7d0o22pnqyVujDw== dependencies: - "@babel/runtime" "^7.0.0" - tiny-warning "^1.0.2" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" -jss-plugin-props-sort@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz#46f1809fcae0acc048d0047aa54a4b9b6973597d" - integrity sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA== +jss-plugin-rule-value-function@10.0.0-alpha.12, jss-plugin-rule-value-function@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.12.tgz#40bd13ca3546aa05362c7c74769fdf71e6b05b39" + integrity sha512-/B7Ut/rKHXQLIOxkCQbiv9Uexz+esKCq0ODU4mJ+moB25kq5R52wJ03hNWZi5gIYswuhcHOuajzG+gIxKo+KUA== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" -jss-plugin-rule-value-function@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz#63df1078ac361dda67996e25291d90f7226ae59a" - integrity sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA== +jss-plugin-rule-value-observable@10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.0.0-alpha.12.tgz#f0d9a7f08a5b36a9bcbd38026b62a3203f7e7fc3" + integrity sha512-xF4Qk9rDMrwNwlg+aNUIQmfE2+aTz8ysJL9r8ViR6FE4dew1R220HFan5u8XO7ZTY0oWX+AV8SQSiULKeniCIA== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" + symbol-observable "^1.2.0" -jss-plugin-template@^10.0.0-alpha.3: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.0.0-alpha.7.tgz#336958b8cbf74c922443ea893cad0e4d6793717c" - integrity sha512-ao+eK/0yNYsPaVhmv/XYiiixaFyMcb8vAMthdpcYv0/9HzjexetO5huBrlvScLOtc5tw6pFQEJLG6HnTJquZ6Q== +jss-plugin-template@10.0.0-alpha.12, jss-plugin-template@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.0.0-alpha.12.tgz#faf6ef28effc16594796c2e6d1c1e5d62130242b" + integrity sha512-QCbiMumVDG1svoXXTLwXvvbuZgQwXa+Tfo7SI0fL6QPW64W1d3Q8+6ohMn1UELdCq7Rzlgj631XjUeYRwZcdnw== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.0.0-alpha.7: - version "10.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz#caa34eb0bc39f0c98f425e174fc220d1f1a8760a" - integrity sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA== +jss-plugin-vendor-prefixer@10.0.0-alpha.12, jss-plugin-vendor-prefixer@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.12.tgz#27b1fd069a36ee83f0f5b3f37ceba567ba17f02c" + integrity sha512-q/3NFFoEV/R6k1O8OtZDWR/+WY2zvxW+2unpTT2q90Ttaoz+pYa3CNuX+tLfCGqixV08gf8w5IVIBUQppf+zmg== dependencies: - "@babel/runtime" "^7.0.0" - css-vendor "^1.1.0" + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.0" + jss "10.0.0-alpha.12" -jss-preset-default@^4.3.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd" - integrity sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ== - dependencies: - jss-camel-case "^6.1.0" - jss-compose "^5.0.0" - jss-default-unit "^8.0.2" - jss-expand "^5.3.0" - jss-extend "^6.2.0" - jss-global "^3.0.0" - jss-nested "^6.0.1" - jss-props-sort "^6.0.0" - jss-template "^1.0.1" - jss-vendor-prefixer "^7.0.0" - -jss-props-sort@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" - integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g== +jss-preset-default@10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-10.0.0-alpha.12.tgz#d0c489915b0cdd69b594bb0abbb1ea00971998c4" + integrity sha512-fkbpbxS265TaUDfxNbmEOMGSXBFu+6ULuZBJ4Fen4wjijoVyIE/BJcSX+KpaOv9OSxW7Jf67TQE4ZZAQLLIUMQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.12" + jss-plugin-camel-case "10.0.0-alpha.12" + jss-plugin-compose "10.0.0-alpha.12" + jss-plugin-default-unit "10.0.0-alpha.12" + jss-plugin-expand "10.0.0-alpha.12" + jss-plugin-extend "10.0.0-alpha.12" + jss-plugin-global "10.0.0-alpha.12" + jss-plugin-nested "10.0.0-alpha.12" + jss-plugin-props-sort "10.0.0-alpha.12" + jss-plugin-rule-value-function "10.0.0-alpha.12" + jss-plugin-rule-value-observable "10.0.0-alpha.12" + jss-plugin-template "10.0.0-alpha.12" + jss-plugin-vendor-prefixer "10.0.0-alpha.12" jss-rtl@^0.2.1: version "0.2.3" @@ -8032,38 +8019,15 @@ jss-rtl@^0.2.1: dependencies: rtl-css-js "^1.8.0" -jss-template@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a" - integrity sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg== - dependencies: - warning "^3.0.0" - -jss-vendor-prefixer@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71" - integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA== - dependencies: - css-vendor "^0.3.8" - -jss@^10.0.0-alpha.3, jss@^10.0.0-alpha.7, jss@^9.7.0: - version "10.0.0-alpha.10" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.10.tgz#51b6a3af57476e88515bf13521ecf0d138b69041" - integrity sha512-kuFDO9taDpVUbfksLjz9HbMLYeM4WbNqIPajihP+hR8IJma9bMgpCQTuXDW2WM+8f5sqtnojWzc/26ZkSo70mw== +jss@10.0.0-alpha.12, jss@^10.0.0-alpha.12: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.12.tgz#bc2bf245850527a90de2aa08cf68c92bcf5db569" + integrity sha512-1HHH0oEcsnOnDYPGogd2NM9Aj94xnPLAPV4KfwLkSYTxtAmrBAK/eN25+Y/7BD5pSxb0vQkLbfX7QIWvy4rqeQ== dependencies: - "@babel/runtime" "^7.0.0" + "@babel/runtime" "^7.3.1" is-in-browser "^1.1.3" tiny-warning "^1.0.2" -jss@^9.8.7: - version "9.8.7" - resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05" - integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ== - dependencies: - is-in-browser "^1.1.3" - symbol-observable "^1.1.0" - warning "^3.0.0" - jsx-ast-utils@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f" @@ -9430,7 +9394,7 @@ node-releases@^1.1.3: dependencies: semver "^5.3.0" -nodemod@^1.5.19: +nodemod@latest: version "1.5.19" resolved "https://registry.yarnpkg.com/nodemod/-/nodemod-1.5.19.tgz#eb9a1866bb7250ea3f804e7715661aa7559800e1" integrity sha1-65oYZrtyUOo/gE53FWYap1WYAOE= @@ -11051,6 +11015,11 @@ react-autowhatever@^10.1.2: react-themeable "^1.1.0" section-iterator "^2.0.0" +react-display-name@^0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf" + integrity sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA== + react-docgen@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.0.1.tgz#164b78f40dea7cae60c28a4a13802641498f8480" @@ -11134,16 +11103,18 @@ react-is@^16.5.2, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb" integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA== -react-jss@^8.6.1: - version "8.6.1" - resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252" - integrity sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ== +react-jss@next: + version "10.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.0.0-alpha.12.tgz#d2ca3a6699cc493dd7ccb1622d2a32b3de6cab45" + integrity sha512-4j3trVas9ZMFHlco+kBhkrAx87IToOwP/Qhk2yVqYtzBsdaxp49JEL0KSU1LqwnJNT1E0GOLbK0jAZ/Ymu3PRQ== dependencies: - hoist-non-react-statics "^2.5.0" - jss "^9.7.0" - jss-preset-default "^4.3.0" + "@babel/runtime" "^7.3.1" + hoist-non-react-statics "^3.2.0" + jss "10.0.0-alpha.12" + jss-preset-default "10.0.0-alpha.12" prop-types "^15.6.0" - theming "^1.3.0" + theming "^3.0.3" + tiny-warning "^1.0.2" react-lifecycles-compat@^3.0.4: version "3.0.4" @@ -12837,12 +12808,12 @@ styled-jsx@3.2.1: stylis "3.5.4" stylis-rule-sheet "0.0.10" -styled-system@^3.1.11: - version "3.2.1" - resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-3.2.1.tgz#491e1e6f88d7ee021f6f49376f12852cde8007cb" - integrity sha512-ag0Yp7UeVHHc3t+1uM3jvlljaZYzwqpbJ8hMrFvpaKfUd8xsB9JeQXLwMpEsz8iLx8Lz/+9j0coWFZjmw8MogQ== +styled-system@latest: + version "4.0.1" + resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-4.0.1.tgz#0f37a25cadbb172fbe03c4d19de9dfaabe6b6d02" + integrity sha512-wb7dA8gpl9gr04HLWAaPUABmp7QGICpqB2rUMGbC2Ho0sTgjTeUgLTHTWZBiYR3yybYyVysdku7SXFvLtOh4fg== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.3.1" prop-types "^15.6.2" stylehacks@^4.0.0: @@ -12918,7 +12889,7 @@ svgo@^1.0.0, svgo@^1.0.5: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@1.2.0, symbol-observable@^1.1.0, symbol-observable@^1.2.0: +symbol-observable@1.2.0, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== @@ -13057,15 +13028,15 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -theming@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc" - integrity sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw== +theming@^3.0.3: + version "3.1.0" + resolved "https://registry.yarnpkg.com/theming/-/theming-3.1.0.tgz#aee88cd6b442a70f26efe5d6a150f4d57b107001" + integrity sha512-m9sc0sFbaaFV3P27b2yALQN7837ZNDNxzE0TVy4dc5lHFBhwPrFWnZZdVjrbuxH03d8XMLkqYyG2aJq7I6s5vw== dependencies: - brcast "^3.0.1" - is-function "^1.0.1" - is-plain-object "^2.0.1" + hoist-non-react-statics "^3.3.0" prop-types "^15.5.8" + react-display-name "^0.2.4" + tiny-warning "^1.0.2" thenify-all@^1.0.0, thenify-all@^1.6.0: version "1.6.0" From cea8cb893269130d3bbfab5a6072b78d5f631e71 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 6 Mar 2019 11:55:33 +0100 Subject: [PATCH 2/2] reviews --- docs/src/modules/utils/getDemoConfig.js | 26 -- .../pages/css-in-js/advanced/advanced-de.md | 6 +- .../pages/css-in-js/advanced/advanced-es.md | 6 +- .../pages/css-in-js/advanced/advanced-fr.md | 6 +- .../pages/css-in-js/advanced/advanced-ja.md | 6 +- .../pages/css-in-js/advanced/advanced-pt.md | 6 +- .../pages/css-in-js/advanced/advanced-ru.md | 6 +- .../pages/css-in-js/advanced/advanced-zh.md | 6 +- docs/src/pages/css-in-js/advanced/advanced.md | 7 +- docs/src/pages/css-in-js/basics/basics.md | 24 +- .../pages/customization/css-in-js/CssInJs.js | 60 --- .../src/pages/customization/css-in-js/Hook.js | 24 - .../customization/css-in-js/RenderProps.js | 37 -- .../css-in-js/StyledComponents.js | 40 -- .../customization/css-in-js/css-in-js-de.md | 402 ---------------- .../customization/css-in-js/css-in-js-es.md | 402 ---------------- .../customization/css-in-js/css-in-js-fr.md | 402 ---------------- .../customization/css-in-js/css-in-js-ja.md | 402 ---------------- .../customization/css-in-js/css-in-js-pt.md | 402 ---------------- .../customization/css-in-js/css-in-js-ru.md | 402 ---------------- .../customization/css-in-js/css-in-js-zh.md | 402 ---------------- .../customization/css-in-js/css-in-js.md | 435 ------------------ .../default-theme/default-theme.md | 22 +- .../customization/overrides/overrides.md | 12 +- docs/src/pages/customization/themes/themes.md | 65 +-- .../pages/demos/app-bar/MenuAppBar.hooks.js | 2 +- .../app-bar/PrimarySearchAppBar.hooks.js | 2 +- .../IntegrationDownshift.hooks.js | 2 +- .../demos/badges/BadgeVisibility.hooks.js | 2 +- .../LabelBottomNavigation.hooks.js | 2 +- .../SimpleBottomNavigation.hooks.js | 2 +- .../demos/cards/RecipeReviewCard.hooks.js | 2 +- .../src/pages/demos/chips/ChipsArray.hooks.js | 2 +- .../demos/dialogs/ConfirmationDialog.hooks.js | 2 +- .../demos/dialogs/FullScreenDialog.hooks.js | 2 +- .../pages/demos/dialogs/SimpleDialog.hooks.js | 2 +- .../drawers/SwipeableTemporaryDrawer.hooks.js | 2 +- .../demos/drawers/TemporaryDrawer.hooks.js | 2 +- .../ControlledExpansionPanels.hooks.js | 2 +- .../pages/demos/lists/CheckboxList.hooks.js | 2 +- .../lists/CheckboxListSecondary.hooks.js | 2 +- .../demos/lists/InteractiveList.hooks.js | 2 +- .../src/pages/demos/lists/NestedList.hooks.js | 2 +- .../demos/lists/SelectedListItem.hooks.js | 2 +- .../demos/lists/SwitchListSecondary.hooks.js | 2 +- .../demos/menus/MenuListComposition.hooks.js | 2 +- .../pages/demos/menus/SimpleListMenu.hooks.js | 2 +- .../progress/CircularDeterminate.hooks.js | 2 +- .../progress/CircularIntegration.hooks.js | 2 +- .../demos/progress/CircularStatic.hooks.js | 2 +- .../progress/DelayingAppearance.hooks.js | 2 +- .../demos/progress/LinearBuffer.hooks.js | 2 +- .../demos/progress/LinearDeterminate.hooks.js | 2 +- .../CheckboxLabels.hooks.js | 2 +- .../CheckboxesGroup.hooks.js | 2 +- .../CustomizedSwitches.hooks.js | 2 +- .../selection-controls/RadioButtons.hooks.js | 2 +- .../RadioButtonsGroup.hooks.js | 2 +- .../selects/ControlledOpenSelect.hooks.js | 2 +- .../pages/demos/selects/DialogSelect.hooks.js | 2 +- .../demos/selects/NativeSelects.hooks.js | 2 +- .../pages/demos/selects/SimpleSelect.hooks.js | 2 +- .../snackbars/CustomizedSnackbars.hooks.js | 2 +- .../snackbars/FabIntegrationSnackbar.hooks.js | 2 +- .../demos/snackbars/SimpleSnackbar.hooks.js | 2 +- .../demos/steppers/CustomizedStepper.hooks.js | 2 +- ...ntalLinearAlternativeLabelStepper.hooks.js | 2 +- .../steppers/HorizontalLinearStepper.hooks.js | 2 +- ...lNonLinearAlternativeLabelStepper.hooks.js | 2 +- .../HorizontalNonLinearStepper.hooks.js | 2 +- ...rizontalNonLinearStepperWithError.hooks.js | 2 +- .../steppers/VerticalLinearStepper.hooks.js | 2 +- .../pages/demos/tables/EnhancedTable.hooks.js | 2 +- .../pages/demos/tabs/CenteredTabs.hooks.js | 2 +- .../pages/demos/tabs/IconLabelTabs.hooks.js | 2 +- docs/src/pages/demos/tabs/IconTabs.hooks.js | 2 +- docs/src/pages/demos/tabs/NavTabs.hooks.js | 2 +- .../tabs/ScrollableTabsButtonAuto.hooks.js | 2 +- .../tabs/ScrollableTabsButtonForce.hooks.js | 2 +- .../tabs/ScrollableTabsButtonPrevent.hooks.js | 2 +- docs/src/pages/demos/tabs/SimpleTabs.hooks.js | 2 +- .../demos/tabs/TabsWrappedLabel.hooks.js | 2 +- .../FilledInputAdornments.hooks.js | 2 +- .../text-fields/FilledTextFields.hooks.js | 2 +- .../text-fields/FormattedInputs.hooks.js | 2 +- .../text-fields/InputAdornments.hooks.js | 2 +- .../OutlinedInputAdornments.hooks.js | 2 +- .../text-fields/OutlinedTextFields.hooks.js | 2 +- .../demos/text-fields/TextFields.hooks.js | 2 +- .../tooltips/CustomizedTooltips.hooks.js | 2 +- .../pages/discover-more/showcase/appList.js | 2 +- .../getting-started/comparison/comparison.md | 149 ------ docs/src/pages/getting-started/faq/faq.md | 10 +- .../interoperability/interoperability.md | 42 +- .../guides/right-to-left/right-to-left.md | 14 +- .../server-rendering/server-rendering.md | 58 +-- .../pages/layout/breakpoints/breakpoints.md | 2 +- docs/src/pages/system/basics/basics.md | 4 +- .../utils/popover/SimplePopover.hooks.js | 2 +- .../pages/utils/popper/SimplePopper.hooks.js | 2 +- docs/static/_redirects | 1 + .../src/MarkdownElement/textToHash.test.js | 4 + packages/material-ui-styles/src/styled.js | 6 +- packages/material-ui-styles/src/withStyles.js | 2 +- .../material-ui/src/Popover/Popover.test.js | 2 +- packages/material-ui/src/index.d.ts | 11 +- .../material-ui/src/styles/createStyles.js | 20 +- packages/material-ui/src/styles/styled.js | 15 +- pages/_app.js | 10 +- pages/customization/css-in-js.js | 18 - pages/getting-started/comparison.js | 18 - 111 files changed, 217 insertions(+), 3913 deletions(-) delete mode 100644 docs/src/pages/customization/css-in-js/CssInJs.js delete mode 100644 docs/src/pages/customization/css-in-js/Hook.js delete mode 100644 docs/src/pages/customization/css-in-js/RenderProps.js delete mode 100644 docs/src/pages/customization/css-in-js/StyledComponents.js delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-de.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-es.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-fr.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-ja.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-pt.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-ru.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js-zh.md delete mode 100644 docs/src/pages/customization/css-in-js/css-in-js.md delete mode 100644 docs/src/pages/getting-started/comparison/comparison.md delete mode 100644 pages/customization/css-in-js.js delete mode 100644 pages/getting-started/comparison.js diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js index 33fb995a439b81..136e0b15b9b631 100644 --- a/docs/src/modules/utils/getDemoConfig.js +++ b/docs/src/modules/utils/getDemoConfig.js @@ -17,31 +17,6 @@ ReactDOM.render(, document.querySelector('#root')); }; } -function hooksDemo(demoData) { - return { - dependencies: getDependencies(demoData.raw, { reactVersion: 'next' }), - files: { - 'index.js': ` -import React from 'react'; -import ReactDOM from 'react-dom'; -import Demo from './demo'; -import { createMuiTheme } from "@material-ui/core/styles"; -import { ThemeProvider } from "@material-ui/styles"; - -const theme = createMuiTheme(); - -ReactDOM.render( - - - , - document.querySelector("#root") -); - `, - 'demo.js': demoData.raw, - }, - }; -} - function tsDemo(demoData) { return { dependencies: getDependencies(demoData.raw, { codeLanguage: CODE_VARIANTS.TS }), @@ -79,7 +54,6 @@ function getLanguageConfig(demoData) { case CODE_VARIANTS.TS: return tsDemo(demoData); case CODE_VARIANTS.HOOK: - return hooksDemo(demoData); case CODE_VARIANTS.JS: return jsDemo(demoData); default: diff --git a/docs/src/pages/css-in-js/advanced/advanced-de.md b/docs/src/pages/css-in-js/advanced/advanced-de.md index 0411064e3a8d8e..ec0173c4d75216 100644 --- a/docs/src/pages/css-in-js/advanced/advanced-de.md +++ b/docs/src/pages/css-in-js/advanced/advanced-de.md @@ -192,7 +192,7 @@ export default App; ## Klassennamen -You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example: +You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example: ```jsx const useStyles = makeStyles({ @@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop - + This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script. @@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `