Skip to content

[material-ui][PaginationItem] Add codemod for deprecated classes #41145

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
DiegoAndai merged 20 commits into from
Feb 20, 2024
Merged

[material-ui][PaginationItem] Add codemod for deprecated classes #41145

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1fb7d8a
initial setup
sai6855 Feb 17, 2024
8304c95
Refactor pagination item classes
sai6855 Feb 17, 2024
bc9f24e
Refactor pagination item classes
sai6855 Feb 17, 2024
d70a399
Refactor pagination item classes
sai6855 Feb 17, 2024
a04bfb1
Refactor pagination item classes
sai6855 Feb 17, 2024
20f4ce5
Refactor pagination item classes
sai6855 Feb 17, 2024
15975f4
Refactor pagination item classes
sai6855 Feb 17, 2024
8d75caf
add docs
sai6855 Feb 17, 2024
56e2bee
docs:api
sai6855 Feb 17, 2024
c4c317e
fix imports
sai6855 Feb 17, 2024
7d3e87f
fix test
sai6855 Feb 17, 2024
b7972fd
fix tests
sai6855 Feb 17, 2024
8a635b9
fix tests
sai6855 Feb 17, 2024
f0eecba
fix selector
sai6855 Feb 18, 2024
13c0dfe
fix selector
sai6855 Feb 18, 2024
3acdfd0
refactor
sai6855 Feb 18, 2024
5304834
update readme
sai6855 Feb 18, 2024
e9656ce
format migrating doc
sai6855 Feb 20, 2024
499e21d
update migration guide
sai6855 Feb 20, 2024
1969833
update migration guide
sai6855 Feb 20, 2024
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
Prev Previous commit
Next Next commit
fix selector
  • Loading branch information
@sai6855
sai6855 committed Feb 18, 2024
commit 13c0dfe7b01c201c8bd973b0dc09de73604ee73c
6 changes: 3 additions & 3 deletions packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function transformer(file, api, options) {
specifier.type === 'ImportSpecifier' &&
specifier.imported.name === 'paginationItemClasses'
) {
const deprecatedAtomicClass = deprecatedClass.replace('&.MuiPaginationItem-', '');
const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', '');
root
.find(j.MemberExpression, {
object: { name: specifier.local.name },
Expand Down Expand Up @@ -69,15 +69,15 @@ export default function transformer(file, api, options) {
});
});

const selectorRegex = new RegExp(`^${deprecatedClass}`);
const selectorRegex = new RegExp(`^&${deprecatedClass}`);

root
.find(
j.Literal,
(literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
)
.forEach((path) => {
path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelector}`)));
path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
});
});
return root.toSource(printOptions);
Expand Down
16 changes: 8 additions & 8 deletions packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
const classes = [
{
deprecatedClass: '&.MuiPaginationItem-textPrimary',
replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-primary',
deprecatedClass: '.MuiPaginationItem-textPrimary',
replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorPrimary',
},
{
deprecatedClass: '&.MuiPaginationItem-textSecondary',
replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-secondary',
deprecatedClass: '.MuiPaginationItem-textSecondary',
replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorSecondary',
},
{
deprecatedClass: '&.MuiPaginationItem-outlinedPrimary',
replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-primary',
deprecatedClass: '.MuiPaginationItem-outlinedPrimary',
replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary',
},
{
deprecatedClass: '&.MuiPaginationItem-outlinedSecondary',
replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-secondary',
deprecatedClass: '.MuiPaginationItem-outlinedSecondary',
replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary',
},
];

Expand Down
8 changes: 4 additions & 4 deletions packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
.MuiPaginationItem-text.MuiPaginationItem-primary {
.MuiPaginationItem-text.MuiPaginationItem-colorPrimary {
color: red;
}

.MuiPaginationItem-text.MuiPaginationItem-secondary {
.MuiPaginationItem-text.MuiPaginationItem-colorSecondary {
color: blue;
}

.MuiPaginationItem-outlined.MuiPaginationItem-primary {
.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary {
border: 1px solid black;
}

.MuiPaginationItem-outlined.MuiPaginationItem-secondary {
.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary {
border: 1px solid green;
}
48 changes: 24 additions & 24 deletions packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
"&.MuiPaginationItem-text.MuiPaginationItem-primary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
color: 'red',
},
},
Expand All @@ -17,7 +17,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
Expand All @@ -27,31 +27,31 @@ fn({

styled(Component)(() => {
return {
"&.MuiPaginationItem-text.MuiPaginationItem-primary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
color: 'red',
},
};
});

styled(Component)(() => {
return {
[`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
};
});

<PaginationItem
sx={{
"&.MuiPaginationItem-text.MuiPaginationItem-primary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
color: 'red',
},
}}
/>;

<PaginationItem
sx={{
[`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
}}
Expand All @@ -61,7 +61,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
"&.MuiPaginationItem-text.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
color: 'red',
},
},
Expand All @@ -73,7 +73,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
Expand All @@ -83,31 +83,31 @@ fn({

styled(Component)(() => {
return {
"&.MuiPaginationItem-text.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
color: 'red',
},
};
});

styled(Component)(() => {
return {
[`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
};
});

<PaginationItem
sx={{
"&.MuiPaginationItem-text.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
color: 'red',
},
}}
/>;

<PaginationItem
sx={{
[`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
}}
Expand All @@ -117,7 +117,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
"&.MuiPaginationItem-outlined.MuiPaginationItem-primary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
color: 'red',
},
},
Expand All @@ -129,7 +129,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
Expand All @@ -139,31 +139,31 @@ fn({

styled(Component)(() => {
return {
"&.MuiPaginationItem-outlined.MuiPaginationItem-primary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
color: 'red',
},
};
});

styled(Component)(() => {
return {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
};
});

<PaginationItem
sx={{
"&.MuiPaginationItem-outlined.MuiPaginationItem-primary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
color: 'red',
},
}}
/>;

<PaginationItem
sx={{
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
}}
Expand All @@ -172,7 +172,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
"&.MuiPaginationItem-outlined.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
color: 'red',
},
},
Expand All @@ -184,7 +184,7 @@ fn({
MuiPaginationItem: {
styleOverrides: {
root: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
Expand All @@ -194,31 +194,31 @@ fn({

styled(Component)(() => {
return {
"&.MuiPaginationItem-outlined.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
color: 'red',
},
};
});

styled(Component)(() => {
return {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
};
});

<PaginationItem
sx={{
"&.MuiPaginationItem-outlined.MuiPaginationItem-secondary": {
"&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
color: 'red',
},
}}
/>;

<PaginationItem
sx={{
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: {
[`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
}}
Expand Down