Skip to content

Proposals #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mnajdova merged 4 commits into from
Sep 22, 2020
Merged

Proposals #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
836f610
hoist name resolution for performances
oliviertassinari Sep 21, 2020
ea3730a
add name for better debug experience in the class name
oliviertassinari Sep 21, 2020
2c80925
export the bare minimum
oliviertassinari Sep 21, 2020
3c4701d
adapt styled method
oliviertassinari Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions packages/material-ui-styled-engine-sc/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,12 @@
export * from 'styled-components';
export { default } from 'styled-components';
import scStyled from "styled-components";

export default function styled(tag, options) {
if (options) {
return scStyled(tag).withConfig({
displayName: options.label,
Copy link
Author

@oliviertassinari oliviertassinari Sep 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capture d’écran 2020-09-21 à 23 12 36

shouldForwardProp: options.shouldForwardProp,
});
}

return scStyled(tag);
}
1 change: 0 additions & 1 deletion packages/material-ui-styled-engine/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export * from '@emotion/styled';
export { default } from '@emotion/styled';
5 changes: 2 additions & 3 deletions packages/material-ui/src/styles/muiStyled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,9 @@ const variantsResolver = (props, styles, theme, name) => {
const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme';

const muiStyled = (tag, options, muiOptions) => {
const defaultStyledResolver = styled(tag, { shouldForwardProp, ...options });
const name = muiOptions.muiName;
const defaultStyledResolver = styled(tag, { shouldForwardProp, label: name, ...options });
Copy link
Author

@oliviertassinari oliviertassinari Sep 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://emotion.sh/docs/labels

Capture d’écran 2020-09-21 à 23 09 41

Copy link
Author

@oliviertassinari oliviertassinari Sep 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have found it by luck looking at the types https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/index.d.ts#L36.

Copy link
Owner

@mnajdova mnajdova Sep 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nicee

Copy link
Author

@oliviertassinari oliviertassinari Sep 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this context, maybe we don't need to set mui as a prefix, but rely on the default value emotion uses (css).

Copy link
Owner

@mnajdova mnajdova Sep 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, will update it

const muiStyledResolver = (...styles) => {
const name = muiOptions.muiName;

if (muiOptions.overridesResolver) {
styles.push((props) => {
const theme = props.theme || defaultTheme;
Expand Down