eslint-plugin-jimu-theme

eslint-plugin-jimu-theme

This plug-in is used to assist in migrating jimu-theme variables to the new version.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-jimu-theme:

npm install eslint-plugin-jimu-theme --save-dev

Usage

Add jimu-theme to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "jimu-theme"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "jimu-theme/rule-name": 2
    }
}

Note

This plugin is only for assisting in jimu-theme upgrades and should not be used for other purposes.

The no-classic-* rules are used to upgrade corresponding variables, for example:

theme.colors.primary => theme.sys.color.primary.main

Rule no-classic-variables contains all other rules prefixed with no-classic (except rule no-classic-css-utilities, no-classic-css-vars), so you can choose to replace them with rule no-classic-variables.

The rule no-unnecessary-template-vars is intended to clean up abnormal code after a theme upgrade, such as:

~~const style = `color: ${'transparent'};`~~

const style = `color: transparent;`

The rule no-unnecessary-template-vars need to be placed after no-classic-*.

Then put rule no-classic-variables-left after all rules to check whether any classic theme variables are not recognized.

Furthermore, after automatic fixing, there might still be incorrect code remaining, which requires reviewing each file individually.

For example:

Before fixing:

const colors = theme.colors
const primary = colors.primary

After fixing:

const colors = theme.colors
const primary = theme.sys.color.primary.main

You can see that after the fix, a variable named "theme" is missing, and the definition of the "colors" variable is no longer needed. These require further manual processing. If you perform global automatic fixing, you need to pay attention to the warning and error messages eslint prints on the console to complete this part of the manual fixing.

We recommend autofixing files one by one rather than applying a global autofix directly.

Rules

🔧 Automatically fixable by the --fix CLI option.

Name	Description	🔧
no-classic-border	This rule facilitates the deprecation of border variables in the classic theme and provides automatic fixes to replace these border variables with variables from the new theme or fallback values.	🔧
no-classic-border-radius	This rule facilitates the deprecation of borderRadiuses variables in the classic theme and provides automatic fixes to replace these borderRadiuses variables with variables from the new theme or fallback values.	🔧
no-classic-colors	This rule updates colors variables from old classic theme to new theme.	🔧
no-classic-css-utilities	This rule facilitates the upgrade of css utilities from the classic theme to the new theme.	🔧
no-classic-css-vars	This rule facilitates the transition of CSS variables representing colors from the classic theme to the new theme.	🔧
no-classic-dark-theme	This rule facilitates the deprecation of darkTheme variables in the classic theme and provides automatic fixes to replace it with variables from the new theme.	🔧
no-classic-elements	This rule facilitates the deprecation of elements(e.g header, footer, body, link) variables in the classic theme and provides automatic fixes to replace these elements variables with variables from the new theme or fallback values.	🔧
no-classic-focused-styles	This rule facilitates the deprecation of focusedStyles variables in the classic theme and provides automatic fixes to replace these focusedStyles variables with variables from the new theme or fallback values.	🔧
no-classic-shadow	This rule facilitates the deprecation of boxShadows variables in the classic theme and provides automatic fixes to replace these boxShadows variables with variables from the new theme.	🔧
no-classic-sizes	This rule facilitates the deprecation of sizes variables in the classic theme and provides automatic fixes to replace these sizes variables with variables from the new theme.	🔧
no-classic-surface	This rule facilitates the deprecation of surfaces variables in the classic theme and provides automatic fixes to replace these border variables with variables from the new theme or fallback values.	🔧
no-classic-typography	This rule facilitates the deprecation of typography variables in the classic theme and provides automatic fixes to replace these typography variables with variables from the new theme or fallback values.	🔧
no-classic-variables	This rule updates variables from old classic theme to new theme.	🔧
no-classic-variables-left	This rule is to check whether there are any remaining classical variables.	🔧
no-gutters	This rule facilitates the deprecation of gutters variables in the theme and provides automatic fixes to replace these gutter variables with specific values.	🔧
no-improperly-color	This rule is meant to identify the improper use of theme color variables in widgets or components.	🔧
no-ref-palette	This rule is used to check whether a theme ref palette variable is being used.	🔧
no-unnecessary-template-vars	Remove unnecessary template string variables. Note: If it is used for theme upgrade, this rule should be called after other rules for upgrading the theme to fix abnormal results caused by the upgrade.	🔧