Skip to content

Commit be4b7c6

Browse files
[styles] Remove the old styles modules
1 parent 000def8 commit be4b7c6

37 files changed

+81
-1853
lines changed

docs/scripts/buildApi.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown';
88
import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
99
import { getHeaders } from '../src/modules/utils/parseMarkdown';
1010
import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
11-
import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator';
11+
import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
1212

1313
function ensureExists(pat, mask, cb) {
1414
mkdir(pat, mask, err => {
-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
// Use the same helper as Babel to avoid bundle bloat.
22
import 'core-js/modules/es6.array.find-index';
33
import 'core-js/modules/es6.set';
4-
import { install } from '@material-ui/styles';
54

65
// Disable auto highlighting
76
// https://github.com/PrismJS/prism/issues/765
87
if (process.browser) {
98
window.Prism = window.Prism || {};
109
window.Prism.manual = true;
1110
}
12-
13-
install();

packages/material-ui-benchmark/src/bootstrap.js

-3
This file was deleted.

packages/material-ui-benchmark/src/core.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console */
22

3-
import './bootstrap';
43
import Benchmark from 'benchmark';
54
import React from 'react';
65
import ReactDOMServer from 'react-dom/server';

packages/material-ui-benchmark/src/docs.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console */
22

3-
import './bootstrap';
43
import Benchmark from 'benchmark';
54
import fs from 'fs';
65
import path from 'path';

packages/material-ui-benchmark/src/server.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console */
22

3-
import './bootstrap';
43
import express from 'express';
54
import React from 'react';
65
import ReactDOMServer from 'react-dom/server';

packages/material-ui-benchmark/src/styles.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console */
22

3-
import './bootstrap';
43
import Benchmark from 'benchmark';
54
import React from 'react';
65
import ReactDOMServer from 'react-dom/server';

packages/material-ui-benchmark/src/system.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console */
22

3-
import './bootstrap';
43
import Benchmark from 'benchmark';
54
import React from 'react';
65
import ReactDOMServer from 'react-dom/server';
+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
export { default as createGenerateClassName } from './createGenerateClassName';
22
export { default as createStyles } from './createStyles';
3-
export { default as install } from './install';
43
export { default as jssPreset } from './jssPreset';
54
export { default as makeStyles } from './makeStyles';
65
export { default as styled } from './styled';
76
export { default as StylesProvider } from './StylesProvider';
87
export { default as ThemeProvider } from './ThemeProvider';
98
export { default as useTheme } from './useTheme';
109
export { default as withStyles } from './withStyles';
11-
export { default as withTheme } from './withTheme';
10+
export { default as withTheme, withThemeCreator } from './withTheme';

packages/material-ui-styles/src/install.js

-17
This file was deleted.

packages/material-ui-styles/src/makeStyles.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import warning from 'warning';
33
import { getDynamicStyles } from 'jss';
44
import mergeClasses from './mergeClasses';
55
import multiKeyStore from './multiKeyStore';
6-
import ThemeContext from './ThemeContext';
6+
import useTheme from './useTheme';
77
import { StylesContext } from './StylesProvider';
88
import { increment } from './indexCounter';
99
import getStylesCreator from './getStylesCreator';
@@ -174,8 +174,9 @@ function makeStyles(stylesOrCreator, options = {}) {
174174
name,
175175
// Help with debuggability.
176176
classNamePrefix: classNamePrefixOption,
177-
defaultTheme: defaultThemeOption,
178177
Component,
178+
defaultTheme: defaultThemeOption,
179+
useTheme: useThemeOption = useTheme,
179180
...stylesOptions2
180181
} = options;
181182
const stylesCreator = getStylesCreator(stylesOrCreator);
@@ -192,7 +193,7 @@ function makeStyles(stylesOrCreator, options = {}) {
192193
};
193194

194195
return (props = {}) => {
195-
const theme = listenToTheme ? React.useContext(ThemeContext) || defaultTheme : defaultTheme;
196+
const theme = listenToTheme ? useThemeOption() || defaultTheme : defaultTheme;
196197
const stylesOptions = {
197198
...React.useContext(StylesContext),
198199
...stylesOptions2,

packages/material-ui-styles/src/withTheme.js

+43-35
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,51 @@ import hoistStatics from './hoistInternalStatics';
55
import useTheme from './useTheme';
66
import RefHolder from './RefHolder';
77

8-
// Provide the theme object as a property to the input component.
9-
// It's an alternative API to useTheme().
10-
// We encourage the usage of useTheme() where possible.
11-
const withTheme = Component => {
12-
if (process.env.NODE_ENV !== 'production' && Component === undefined) {
13-
throw new Error(
14-
[
15-
'You are calling withTheme(Component) with an undefined component.',
16-
'You may have forgotten to import it.',
17-
].join('\n'),
18-
);
19-
}
20-
21-
const WithTheme = React.forwardRef(function WithTheme(props, ref) {
22-
const { innerRef, ...other } = props;
23-
const theme = useTheme();
24-
return (
25-
<RefHolder ref={ref}>
26-
<Component theme={theme} ref={innerRef} {...other} />
27-
</RefHolder>
28-
);
29-
});
30-
31-
WithTheme.propTypes = {
32-
/**
33-
* Use that property to pass a ref callback to the decorated component.
34-
*/
35-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
36-
};
8+
export function withThemeCreator(options = {}) {
9+
const { useTheme: useThemeOption = useTheme } = options;
10+
11+
const withTheme = Component => {
12+
if (process.env.NODE_ENV !== 'production' && Component === undefined) {
13+
throw new Error(
14+
[
15+
'You are calling withTheme(Component) with an undefined component.',
16+
'You may have forgotten to import it.',
17+
].join('\n'),
18+
);
19+
}
20+
21+
const WithTheme = React.forwardRef(function WithTheme(props, ref) {
22+
const { innerRef, ...other } = props;
23+
const theme = useThemeOption();
24+
return (
25+
<RefHolder ref={ref}>
26+
<Component theme={theme} ref={innerRef} {...other} />
27+
</RefHolder>
28+
);
29+
});
30+
31+
WithTheme.propTypes = {
32+
/**
33+
* Use that property to pass a ref callback to the decorated component.
34+
*/
35+
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
36+
};
3737

38-
if (process.env.NODE_ENV !== 'production') {
39-
WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
40-
}
38+
if (process.env.NODE_ENV !== 'production') {
39+
WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
40+
}
4141

42-
hoistStatics(WithTheme, Component);
42+
hoistStatics(WithTheme, Component);
4343

44-
return WithTheme;
45-
};
44+
return WithTheme;
45+
};
46+
47+
return withTheme;
48+
}
49+
50+
// Provide the theme object as a property to the input component.
51+
// It's an alternative API to useTheme().
52+
// We encourage the usage of useTheme() where possible.
53+
const withTheme = withThemeCreator();
4654

4755
export default withTheme;

packages/material-ui/package.json

+1-7
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"dependencies": {
3939
"@babel/runtime": "^7.2.0",
4040
"@material-ui/system": "^4.0.0-alpha.0",
41+
"@material-ui/styles": "^4.0.0-alpha.2",
4142
"@material-ui/utils": "^4.0.0-alpha.0",
4243
"@types/jss": "^9.5.6",
4344
"@types/react-transition-group": "^2.0.16",
@@ -49,13 +50,6 @@
4950
"dom-helpers": "^3.2.1",
5051
"hoist-non-react-statics": "^3.2.1",
5152
"is-plain-object": "^2.0.4",
52-
"jss": "^9.8.7",
53-
"jss-camel-case": "^6.0.0",
54-
"jss-default-unit": "^8.0.2",
55-
"jss-global": "^3.0.0",
56-
"jss-nested": "^6.0.1",
57-
"jss-props-sort": "^6.0.0",
58-
"jss-vendor-prefixer": "^7.0.0",
5953
"normalize-scroll-left": "^0.1.2",
6054
"popper.js": "^1.14.1",
6155
"prop-types": "^15.7.2",

packages/material-ui/src/Select/Select.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
import React from 'react';
44
import PropTypes from 'prop-types';
5+
import { mergeClasses } from '@material-ui/styles';
56
import SelectInput from './SelectInput';
67
import formControlState from '../FormControl/formControlState';
78
import withFormControlContext from '../FormControl/withFormControlContext';
89
import withStyles from '../styles/withStyles';
9-
import mergeClasses from '../styles/mergeClasses';
1010
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
1111
// To replace with InputBase in v4
1212
import Input from '../Input';

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

-20
This file was deleted.

0 commit comments

Comments
 (0)