Skip to content

Commit d5b607d

Browse files
oliviertassinarioliviertassinari
committed
Revert "[Box] Deprecate css prop in favor of sx (mui#23480)"
This reverts commit c3de8e5.
1 parent 5a2f882 commit d5b607d

File tree

22 files changed

+140
-241
lines changed

22 files changed

+140
-241
lines changed

‎docs/src/pages/system/basics/SxProp.js renamed to ‎docs/src/pages/system/basics/CssProp.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import React from 'react';
22
import styled, { ThemeProvider } from 'styled-components';
33
import NoSsr from '@material-ui/core/NoSsr';
44
import { createMuiTheme } from '@material-ui/core/styles';
5-
import { compose, spacing, palette, styleFunctionSx } from '@material-ui/system';
5+
import { compose, spacing, palette, css } from '@material-ui/system';
66

7-
const styleFunction = styleFunctionSx(compose(spacing, palette));
8-
9-
const Box = styled.div(styleFunction);
7+
const Box = styled.div`
8+
${css(compose(spacing, palette))}
9+
`;
1010

1111
const theme = createMuiTheme();
1212

1313
export default function CssProp() {
1414
return (
1515
<NoSsr>
1616
<ThemeProvider theme={theme}>
17-
<Box color="white" sx={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
17+
<Box color="white" css={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
1818
CssProp
1919
</Box>
2020
</ThemeProvider>

‎docs/src/pages/system/basics/CssProp.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import styled, { ThemeProvider } from 'styled-components';
3+
import NoSsr from '@material-ui/core/NoSsr';
4+
import { createMuiTheme } from '@material-ui/core/styles';
5+
import { compose, spacing, palette, css } from '@material-ui/system';
6+
7+
const Box = styled.div`
8+
${css(compose(spacing, palette))}
9+
`;
10+
11+
const theme = createMuiTheme();
12+
13+
export default function CssProp() {
14+
return (
15+
<NoSsr>
16+
<ThemeProvider theme={theme}>
17+
<Box color="white" css={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
18+
CssProp
19+
</Box>
20+
</ThemeProvider>
21+
</NoSsr>
22+
);
23+
}

‎docs/src/pages/system/basics/SxProp.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/src/pages/system/basics/basics.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -319,12 +319,12 @@ In this example, the `variant` property supports all the keys present in `theme.
319319

320320
{{"demo": "pages/system/basics/Variant.js", "defaultCodeOpen": true}}
321321

322-
## `sx` property
322+
## CSS property
323323

324-
If you want to support custom CSS values, you can use the `styleFunctionSx()` helper.
325-
It will process the `sx` property.
324+
If you want to support custom CSS values, you can use the `css()` helper.
325+
It will process the `css` property.
326326

327-
{{"demo": "pages/system/basics/SxProp.js", "bg": true}}
327+
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
328328

329329
## How it works
330330

‎docs/src/pages/system/flexbox/AlignContent.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function AlignContent() {
1111
p={1}
1212
m={1}
1313
bgcolor="background.paper"
14-
sx={{ maxWidth: 300, height: 200 }}
14+
css={{ maxWidth: 300, height: 200 }}
1515
>
1616
<Box p={1} bgcolor="grey.300">
1717
Item 1
@@ -42,7 +42,7 @@ export default function AlignContent() {
4242
p={1}
4343
m={1}
4444
bgcolor="background.paper"
45-
sx={{ maxWidth: 300, height: 200 }}
45+
css={{ maxWidth: 300, height: 200 }}
4646
>
4747
<Box p={1} bgcolor="grey.300">
4848
Item 1

‎docs/src/pages/system/flexbox/AlignContent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function AlignContent() {
1111
p={1}
1212
m={1}
1313
bgcolor="background.paper"
14-
sx={{ maxWidth: 300, height: 200 }}
14+
css={{ maxWidth: 300, height: 200 }}
1515
>
1616
<Box p={1} bgcolor="grey.300">
1717
Item 1
@@ -42,7 +42,7 @@ export default function AlignContent() {
4242
p={1}
4343
m={1}
4444
bgcolor="background.paper"
45-
sx={{ maxWidth: 300, height: 200 }}
45+
css={{ maxWidth: 300, height: 200 }}
4646
>
4747
<Box p={1} bgcolor="grey.300">
4848
Item 1

‎docs/src/pages/system/flexbox/AlignItems.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function AlignItems() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ height: 100 }}
13+
css={{ height: 100 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1
@@ -28,7 +28,7 @@ export default function AlignItems() {
2828
p={1}
2929
m={1}
3030
bgcolor="background.paper"
31-
sx={{ height: 100 }}
31+
css={{ height: 100 }}
3232
>
3333
<Box p={1} bgcolor="grey.300">
3434
Item 1
@@ -46,7 +46,7 @@ export default function AlignItems() {
4646
p={1}
4747
m={1}
4848
bgcolor="background.paper"
49-
sx={{ height: 100 }}
49+
css={{ height: 100 }}
5050
>
5151
<Box p={1} bgcolor="grey.300">
5252
Item 1

‎docs/src/pages/system/flexbox/AlignItems.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function AlignItems() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ height: 100 }}
13+
css={{ height: 100 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1
@@ -28,7 +28,7 @@ export default function AlignItems() {
2828
p={1}
2929
m={1}
3030
bgcolor="background.paper"
31-
sx={{ height: 100 }}
31+
css={{ height: 100 }}
3232
>
3333
<Box p={1} bgcolor="grey.300">
3434
Item 1
@@ -46,7 +46,7 @@ export default function AlignItems() {
4646
p={1}
4747
m={1}
4848
bgcolor="background.paper"
49-
sx={{ height: 100 }}
49+
css={{ height: 100 }}
5050
>
5151
<Box p={1} bgcolor="grey.300">
5252
Item 1

‎docs/src/pages/system/flexbox/AlignSelf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function AlignSelf() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ height: 100 }}
13+
css={{ height: 100 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1

‎docs/src/pages/system/flexbox/AlignSelf.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function AlignSelf() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ height: 100 }}
13+
css={{ height: 100 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1

‎docs/src/pages/system/flexbox/FlexWrap.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function FlexWrap() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ maxWidth: 300 }}
13+
css={{ maxWidth: 300 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1
@@ -37,7 +37,7 @@ export default function FlexWrap() {
3737
p={1}
3838
m={1}
3939
bgcolor="background.paper"
40-
sx={{ maxWidth: 300 }}
40+
css={{ maxWidth: 300 }}
4141
>
4242
<Box p={1} bgcolor="grey.300">
4343
Item 1

‎docs/src/pages/system/flexbox/FlexWrap.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function FlexWrap() {
1010
p={1}
1111
m={1}
1212
bgcolor="background.paper"
13-
sx={{ maxWidth: 300 }}
13+
css={{ maxWidth: 300 }}
1414
>
1515
<Box p={1} bgcolor="grey.300">
1616
Item 1
@@ -37,7 +37,7 @@ export default function FlexWrap() {
3737
p={1}
3838
m={1}
3939
bgcolor="background.paper"
40-
sx={{ maxWidth: 300 }}
40+
css={{ maxWidth: 300 }}
4141
>
4242
<Box p={1} bgcolor="grey.300">
4343
Item 1

‎packages/material-ui-system/src/css.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import PropTypes from 'prop-types';
2+
import merge from './merge';
3+
4+
function omit(input, fields) {
5+
const output = {};
6+
7+
Object.keys(input).forEach((prop) => {
8+
if (fields.indexOf(prop) === -1) {
9+
output[prop] = input[prop];
10+
}
11+
});
12+
13+
return output;
14+
}
15+
16+
function css(styleFunction) {
17+
const newStyleFunction = (props) => {
18+
const output = styleFunction(props);
19+
20+
if (props.css) {
21+
return {
22+
...merge(output, styleFunction({ theme: props.theme, ...props.css })),
23+
...omit(props.css, [styleFunction.filterProps]),
24+
};
25+
}
26+
27+
return output;
28+
};
29+
30+
newStyleFunction.propTypes =
31+
process.env.NODE_ENV !== 'production'
32+
? {
33+
...styleFunction.propTypes,
34+
css: PropTypes.object,
35+
}
36+
: {};
37+
38+
newStyleFunction.filterProps = ['css', ...styleFunction.filterProps];
39+
40+
return newStyleFunction;
41+
}
42+
43+
export default css;

‎packages/material-ui-system/src/css.test.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { expect } from 'chai';
2+
import css from './css';
3+
import style from './style';
4+
5+
const textColor = style({
6+
prop: 'color',
7+
themeKey: 'palette',
8+
});
9+
10+
describe('css', () => {
11+
it('should work', () => {
12+
const palette = css(textColor);
13+
14+
expect(palette.filterProps.length).to.equal(2);
15+
expect(
16+
palette({
17+
theme: {},
18+
css: {
19+
color: 'red',
20+
padding: 10,
21+
},
22+
}),
23+
).to.deep.equal({
24+
padding: 10,
25+
color: 'red',
26+
});
27+
});
28+
});

‎packages/material-ui-system/src/index.d.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,10 @@ export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFu
5353
>;
5454
export function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
5555

56-
// styleFunctionSx.js
57-
58-
/**
59-
* @deprecated
60-
* The css style function is deprecated. Use the styleFunctionSx instead.
61-
*/
56+
// css.js
6257
export function css<Props>(
6358
styleFunction: StyleFunction<Props>
64-
): StyleFunction<Props & { css?: Omit<Props, 'theme'>; sx?: Omit<Props, 'theme'> }>;
65-
66-
export function styleFunctionSx<Props>(
67-
styleFunction: StyleFunction<Props>
68-
): StyleFunction<Props & { sx?: Omit<Props, 'theme'>; css?: Omit<Props, 'theme'> }>;
59+
): StyleFunction<Props & { css: Omit<Props, 'theme'> }>;
6960

7061
export const display: SimpleStyleFunction<
7162
'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'

‎packages/material-ui-system/src/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ export { default as borders } from './borders';
22
export * from './borders';
33
export { default as breakpoints } from './breakpoints';
44
export { default as compose } from './compose';
5-
export { default as styleFunctionSx } from './styleFunctionSx';
6-
export * from './styleFunctionSx';
5+
export { default as css } from './css';
76
export { default as display } from './display';
87
export { default as flexbox } from './flexbox';
98
export * from './flexbox';

0 commit comments

Comments
 (0)