From 6faab42b49cabe35a9d620313f8b94a5403fec12 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Apr 2024 11:11:16 +0530 Subject: [PATCH 1/6] deprecate composed classes --- .../migrating-from-deprecated-apis.md | 40 ++++++ .../pages/material-ui/api/step-connector.json | 10 +- .../step-connector/step-connector.json | 10 +- packages/mui-codemod/README.md | 36 +++++ .../src/deprecations/all/deprecations-all.js | 2 + .../src/deprecations/all/postcss.config.js | 2 + .../step-connector-classes/index.js | 1 + .../step-connector-classes/postcss-plugin.js | 33 +++++ .../step-connector-classes/postcss.config.js | 5 + .../step-connector-classes.js | 127 ++++++++++++++++++ .../step-connector-classes.test.js | 78 +++++++++++ .../test-cases/actual.css | 7 + .../test-cases/actual.js | 7 + .../test-cases/expected.css | 67 +++++++++ .../test-cases/expected.js | 6 + .../src/StepConnector/stepConnectorClasses.ts | 8 +- 16 files changed, 429 insertions(+), 10 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 0d3b149465b83c..4b22015f48dbcb 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -972,3 +972,43 @@ The StepLabel's `componentsProps` was deprecated in favor of `slotProps`: + slotProps={{ label: labelProps }} /> ``` + +## StepConnector + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-connector-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/step-connector-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `line` CSS class and `orientation` prop values were removed. + +Here's how to migrate: + +```diff +- .MuiStepConnector-lineHorizontal ++.MuiStepConnector-horizontal > .MuiStepConnector-line +- .MuiStepConnector-lineVertical ++.MuiStepConnector-vertical > .MuiStepConnector-line +``` + +```diff + import { stepConnectorClasses } from '@mui/material/StepConnector'; + + MuiStepConnector: { + styleOverrides: { + root: { +- [`& .${stepConnectorClasses.lineHorizontal}`]: { ++ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, +- [`& .${stepConnectorClasses.lineVertical}`]: { ++ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, + }, + }, + }, +``` diff --git a/docs/pages/material-ui/api/step-connector.json b/docs/pages/material-ui/api/step-connector.json index c0d62fb18711f6..ddfa3bb8b11fef 100644 --- a/docs/pages/material-ui/api/step-connector.json +++ b/docs/pages/material-ui/api/step-connector.json @@ -54,14 +54,16 @@ { "key": "lineHorizontal", "className": "MuiStepConnector-lineHorizontal", - "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", - "isGlobal": false + "description": "Styles applied to the line element if `orientation=\"horizontal\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "lineVertical", "className": "MuiStepConnector-lineVertical", - "description": "Styles applied to the root element if `orientation=\"vertical\"`.", - "isGlobal": false + "description": "Styles applied to the line element if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/translations/api-docs/step-connector/step-connector.json b/docs/translations/api-docs/step-connector/step-connector.json index 87eacce62772ef..650f2fd5e5c8dd 100644 --- a/docs/translations/api-docs/step-connector/step-connector.json +++ b/docs/translations/api-docs/step-connector/step-connector.json @@ -35,13 +35,15 @@ "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the line element" }, "lineHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "orientation=\"horizontal\"" + "nodeName": "the line element", + "conditions": "orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiStepConnector-horizontal and .MuiStepConnector-line classes instead. How to migrate" }, "lineVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "orientation=\"vertical\"" + "nodeName": "the line element", + "conditions": "orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiStepConnector-vertical and .MuiStepConnector-line classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." }, "vertical": { diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 6f2d0529c45f45..28af883ae6bdce 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -971,6 +971,42 @@ npx @mui/codemod@latest deprecations/step-label-props ``` +#### `step-connector-classes` + +JS transforms: + +```diff + import { stepConnectorClasses } from '@mui/material/StepConnector'; + + MuiStepConnector: { + styleOverrides: { + root: { +- [`& .${stepConnectorClasses.lineHorizontal}`]: { ++ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, +- [`& .${stepConnectorClasses.lineVertical}`]: { ++ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +- .MuiStepConnector-lineHorizontal ++.MuiStepConnector-horizontal > .MuiStepConnector-line +- .MuiStepConnector-lineVertical ++.MuiStepConnector-vertical > .MuiStepConnector-line +``` + +```bash +npx @mui/codemod@next deprecations/step-connector-classes +``` + ### v6.0.0 ### v5.0.0 diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index cfb4dee847f12c..3334e510190f69 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -9,6 +9,7 @@ import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; import transformStepLabelProps from '../step-label-props'; import transformBackdropProps from '../backdrop-props'; +import transformStepConnectorClasses from '../step-connector-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -26,6 +27,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformAlertClasses(file, api, options); file.source = transformStepLabelProps(file, api, options); file.source = transformBackdropProps(file, api, options); + file.source = transformStepConnectorClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 67d88d6ac1e777..05a2f215bf4934 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -8,6 +8,7 @@ const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); +const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classes'); module.exports = { plugins: [ @@ -17,5 +18,6 @@ module.exports = { buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, + stepConnectorClassesPlugin, ], }; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/index.js b/packages/mui-codemod/src/deprecations/step-connector-classes/index.js new file mode 100644 index 00000000000000..c4b340dac5ae6d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/index.js @@ -0,0 +1 @@ +export { default } from './step-connector-classes'; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js new file mode 100644 index 00000000000000..71e512e0678a8c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js @@ -0,0 +1,33 @@ +const classes = [ + { + deprecatedClass: ' .MuiStepConnector-lineHorizontal', + replacementSelector: '.MuiStepConnector-horizontal > .MuiStepConnector-line', + }, + { + deprecatedClass: ' .MuiStepConnector-lineVertical', + replacementSelector: '.MuiStepConnector-vertical > .MuiStepConnector-line', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated StepConnector classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}$`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js new file mode 100644 index 00000000000000..00f08a6c9b49f9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js @@ -0,0 +1,127 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/StepConnector$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'stepConnectorClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiStepConnector-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`${replacementSelectorPrefix}${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, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js new file mode 100644 index 00000000000000..ea3ace7ef9d7e4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './step-connector-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('step-connector-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css new file mode 100644 index 00000000000000..edf025825ab89a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css @@ -0,0 +1,7 @@ +.MuiButtonGroup-root .MuiButtonGroup-lineHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-lineVertical { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js new file mode 100644 index 00000000000000..32108cf9c6325f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js @@ -0,0 +1,7 @@ +import { stepConnectorClasses } from '@mui/material/StepConnector'; + +('& .MuiStepConnector-lineHorizontal'); +('& .MuiStepConnector-lineVertical'); + +`& .${stepConnectorClasses.lineHorizontal}`; +`& .${stepConnectorClasses.lineVertical}`; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css new file mode 100644 index 00000000000000..304f77cbcabb29 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css @@ -0,0 +1,67 @@ +.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js new file mode 100644 index 00000000000000..5779ddf485b802 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { stepConnectorClasses } from '@mui/material/StepConnector'; + +("&.MuiStepConnector-horizontal > .MuiStepConnector-line"); +("&.MuiStepConnector-vertical > .MuiStepConnector-line"); +`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`; +`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`; diff --git a/packages/mui-material/src/StepConnector/stepConnectorClasses.ts b/packages/mui-material/src/StepConnector/stepConnectorClasses.ts index 30f6fb2f3fa54f..a7f46ca2880c9f 100644 --- a/packages/mui-material/src/StepConnector/stepConnectorClasses.ts +++ b/packages/mui-material/src/StepConnector/stepConnectorClasses.ts @@ -18,9 +18,13 @@ export interface StepConnectorClasses { disabled: string; /** Styles applied to the line element. */ line: string; - /** Styles applied to the root element if `orientation="horizontal"`. */ + /** Styles applied to the line element if `orientation="horizontal"`. + * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ lineHorizontal: string; - /** Styles applied to the root element if `orientation="vertical"`. */ + /** Styles applied to the line element if `orientation="vertical"`. + * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ lineVertical: string; } From 7d616a49b98fff45db4340ae9de1b366ab15a7e1 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 2 Apr 2024 11:37:51 +0530 Subject: [PATCH 2/6] fix test --- packages/mui-codemod/src/deprecations/all/postcss.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 05a2f215bf4934..704d70a0f0a375 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -8,7 +8,7 @@ const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); -const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classes'); +const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classes/postcss-plugin'); module.exports = { plugins: [ From da4336c914fd51e9af364315f49052e841e7cf1e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 4 Apr 2024 10:10:19 +0530 Subject: [PATCH 3/6] fix tests --- .../test-cases/actual.css | 4 +- .../test-cases/expected.css | 64 +------------------ 2 files changed, 4 insertions(+), 64 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css index edf025825ab89a..a6803c62d2dd52 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css @@ -1,7 +1,7 @@ -.MuiButtonGroup-root .MuiButtonGroup-lineHorizontal { +.MuiStepConnector-root .MuiStepConnector-lineHorizontal { color: red; } -.MuiButtonGroup-root .MuiButtonGroup-lineVertical { +.MuiStepConnector-root .MuiStepConnector-lineVertical { color: red; } diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css index 304f77cbcabb29..fe29cd2ae9d425 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css @@ -1,67 +1,7 @@ -.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { +.MuiStepConnector-root.MuiStepConnector-line > .MuiStepConnector-horizontal { color: red; } -.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { - color: red; -} - -.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { +.MuiStepConnector-root.MuiStepConnector-line > .MuiStepConnector-vertical { color: red; } From aeceb5db033851f190744a54fcfb66daa1eeea72 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 4 Apr 2024 10:11:39 +0530 Subject: [PATCH 4/6] fix tests --- .../step-connector-classes/test-cases/expected.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css index fe29cd2ae9d425..879b89302f3848 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css @@ -1,7 +1,7 @@ -.MuiStepConnector-root.MuiStepConnector-line > .MuiStepConnector-horizontal { +.MuiStepConnector-root.MuiStepConnector-horizontal > .MuiStepConnector-linr { color: red; } -.MuiStepConnector-root.MuiStepConnector-line > .MuiStepConnector-vertical { +.MuiStepConnector-root.MuiStepConnector-vertical > .MuiStepConnector-line { color: red; } From 3c7f5c31097e5086c13023a43380640cdbd0abe0 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 4 Apr 2024 10:18:19 +0530 Subject: [PATCH 5/6] fix tests --- .../deprecations/step-connector-classes/test-cases/actual.js | 1 - .../deprecations/step-connector-classes/test-cases/expected.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js index 32108cf9c6325f..2a3d38d0081cbf 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js @@ -2,6 +2,5 @@ import { stepConnectorClasses } from '@mui/material/StepConnector'; ('& .MuiStepConnector-lineHorizontal'); ('& .MuiStepConnector-lineVertical'); - `& .${stepConnectorClasses.lineHorizontal}`; `& .${stepConnectorClasses.lineVertical}`; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css index 879b89302f3848..e57ec5b0540422 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css @@ -1,4 +1,4 @@ -.MuiStepConnector-root.MuiStepConnector-horizontal > .MuiStepConnector-linr { +.MuiStepConnector-root.MuiStepConnector-horizontal > .MuiStepConnector-line { color: red; } From cc40e67092764e934aac16f5922f22c6f31b9176 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Wed, 10 Apr 2024 16:12:09 -0400 Subject: [PATCH 6/6] trigger ci