Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
test/fixtures
19 changes: 19 additions & 0 deletions test/fixtures/mui/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"plugins": [
[
"../../../src",
{
"fileName": false,
"transpileTemplateLiterals": false,
"ssr": true,
"topLevelImportPaths": [
"@mui/material",
"@mui/material/*",
Copy link
Contributor

Choose a reason for hiding this comment

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

FWIW at HEAD right now this doesn't work. You need a regex. I have a PR to change this to picomatch

"@mui/system",
"@mui/styled-engine-sc"
]
}
],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
9 changes: 9 additions & 0 deletions test/fixtures/mui/code.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { styled as matStyled } from '@mui/material/styles'
import sc from '@mui/material/styles'

const Test1 = matStyled('div')({
width: '100%',
})
const Test2 = sc('div')({
width: '100%',
})
14 changes: 14 additions & 0 deletions test/fixtures/mui/output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { styled as matStyled } from '@mui/material/styles';
import sc from '@mui/material/styles';
const Test1 = matStyled('div').withConfig({
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you really want it to transform matStyled? According to this issue this isn't wanted: #224

Choose a reason for hiding this comment

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

We didn't want to do this in v4, because the styled there was not using styled-components. For v5, when the @mui/system is configured to use styled-components, we want the plugin to process these imports.

displayName: 'Test1',
componentId: 'sc-2jen0y-0',
})({
width: '100%'
});
const Test2 = sc('div').withConfig({
displayName: 'Test2',
componentId: 'sc-2jen0y-1',
})({
width: '100%'
});