[styles] Remove the old withStyles modules by oliviertassinari · Pull Request #14767 · mui/material-ui

oliviertassinari · 2019-03-06T13:50:40Z

This pull request removes the legacy style modules. It's time to rely on @material-ui/styles. It's also re-exploring the style modules with a default theme to make the transition seamless.

The TypeScript definitions and the documentation are not correctly handled yet. I think that we can do it in a second pass. I'm not sure what drives the bundle size increase. It could be the JSS alpha.7 to alpha.12 upgrade.

Deprecation

-import { createStyles } from '@material-ui/core/styles';
+import { createStyles } from '@material-ui/styles';

Breaking changes

Remove the MuiThemeProvider component:

-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';

Remove the @material-ui/styles/install module.

-import { install } from '@material-ui/styles';

-install();

Closes #14416
Closes #14698

* [styles] Remove the old styles modules * reviews

mui-pr-bot · 2019-03-06T13:56:17Z

@material-ui/core: parsed: -2.51% 😍, gzip: +0.14%
@material-ui/lab: parsed: -7.40% 😍, gzip: -1.05% 😍
@material-ui/styles: parsed: +2.57% , gzip: +2.70%

Details of bundle changes.

Comparing: 7a49f80...14356aa

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	-2.51%	+0.14% 🔺	371,832	362,507	91,939	92,069
@material-ui/core/Paper	-10.27%	+4.38% 🔺	76,648	68,773	19,308	20,153
@material-ui/core/Paper.esm	-11.60%	+2.61% 🔺	71,599	63,294	18,783	19,274
@material-ui/core/Popper	-0.01%	-0.24%	30,462	30,458	10,582	10,557
@material-ui/core/styles/createMuiTheme	-0.01%	-0.35%	17,286	17,284	5,717	5,697
@material-ui/core/useMediaQuery	0.00%	0.00%	2,486	2,486	1,049	1,049
@material-ui/lab	-7.40%	-1.05%	184,281	170,648	50,584	50,051
@material-ui/styles	+2.57% 🔺	+2.70% 🔺	55,687	57,118	15,825	16,253
@material-ui/system	-0.12%	+0.36% 🔺	17,062	17,041	4,482	4,498
Button	-8.35%	+1.16% 🔺	99,409	91,106	26,607	26,916
Modal	-8.86%	+1.72% 🔺	98,984	90,214	26,263	26,716
colorManipulator	0.00%	+0.15% 🔺	3,232	3,232	1,296	1,298
docs.landing	0.00%	0.00%	51,891	51,891	11,291	11,291
docs.main	-7.81%	-6.40%	678,326	625,369	206,184	192,994
packages/material-ui/build/umd/material-ui.production.min.js	-3.53%	+0.16% 🔺	322,466	311,092	85,044	85,183

Generated by 🚫 dangerJS against 14356aa

mbrookes · 2019-03-06T23:30:25Z

 In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the
 components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style)
-a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
+a *CSS in JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).


Why changing? The hyphenated version seems to be widely used.

We were using the two variants. Try a Google search, everybody is contradicting itself. Ok, let's trust this variant: https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660.
There are relatively few results when Google CSS-in-JS, what do you think of renaming it to simple "styling"?

https://next.material-ui.com/css-in-js/basics/ would become https://next.material-ui.com/styles/basics/

as for https://next.material-ui.com/style/icons/, we can either rename it content, or move it to the components subsection.

mbrookes · 2019-03-06T23:45:51Z

 We have provided examples for the following styling solutions:

- [Raw CSS](#raw-css)
+- [Plain CSS](#plain-css)


synchronos-t · 2019-03-11T14:00:03Z

Is @material-ui/core/styles/createMuiTheme() still the only (and correct) way to create customized themed based on default theme (i.e. without writing the whole theme from scratch)? There doesn't seem to be anything providing the same functionality in the Styles API documentation.

oliviertassinari · 2019-03-11T22:22:54Z

@synchronos-t Yes. Maybe we should split @material-ui/core/styles in two:

@material-ui/core/styles
@material-ui/core/createMuiTheme

synchronos-t · 2019-03-12T09:34:57Z

Is there any particular reason why the createMuiTheme resides under the core and not under styles? Unless it's because you've planned to just move it sometimes later. To me, it'd sound more intuitive that the theme creation functions are where the styles and theme usage functions are. (And probably now named createTheme, I assume.) Though, I have a hunch it might have to do something how the default theme is applied to all the components.

oliviertassinari · 2019-03-12T09:47:00Z

Is there any particular reason why the createMuiTheme resides under the core and not under styles?

Yes, @material-ui/styles is a standalone style solution, it doesn't know anything about the core components.

it'd sound more intuitive that the theme creation functions are where the styles and theme usage functions are.

It's why we have kept @material-ui/core/styles/withStyles: https://next.material-ui.com/customization/default-theme/#-material-ui-core-styles-vs-material-ui-styles.

PeterL1n · 2019-03-13T07:29:18Z

Without install() I cannot get the dark theme working. Also, changing borderRadius in the theme does not override the MUI component. The entire thing is broken. Am I missing something?

oliviertassinari · 2019-03-13T08:40:04Z

@PeterL1n install() was removed in v4.0.0-alpha.3. Make sure the core and styles versions match.

[styles] Remove the old styles modules

1078da9

* [styles] Remove the old styles modules * reviews

oliviertassinari added breaking change Introduces changes that are not backward compatible. scope: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. labels Mar 6, 2019

oliviertassinari requested review from eps1lon, joshwooding and mbrookes March 6, 2019 13:50

oliviertassinari force-pushed the remove-old-styles-modules branch from 22c8147 to 1078da9 Compare March 6, 2019 13:50

oliviertassinari mentioned this pull request Mar 6, 2019

[styles] Remove the old styles modules #14560

Merged

revert bundle name changes

19bf8c4