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.
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
feat(eslint-plugin-template): [no-inline-styles] add rule #1162
feat(eslint-plugin-template): [no-inline-styles] add rule #1162
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit e9b7c79. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 7 targets
Sent with 💌 from NxCloud. |
@JamesHenry could you check this PR please :) |
Thinking out load, should this rule also prohibit Maybe that could be configured via an option on the rule? 🤔 WDYT? |
Nice idea @JamesHenry, but I have no experience to create rule with params, I will try to add this tomorrow, that's really needed |
And what about the <nav [style.background-color]="expression"></nav> Aldo, I would actually allow this. |
Looks like it's not possible to block it, because we can't obtain that is Only possible do it via array of all css properties for forbid it, and that looks complicated story. If AST provide that |
4607d9e
to
0e7fb73
Compare
|
I understand this might be a bit out of scope for the first iteration of this feature. Might be a good addition for later.
It looks like there is an property
It appears that eslint-plugin-css is using such list: known-css-properties. |
@jerone thank you for your findings, I will try to add it too. |
0e7fb73
to
5364e22
Compare
@jerone check please, I add support for |
packages/eslint-plugin-template/tests/rules/no-inline-styles/cases.ts
Outdated
Show resolved
Hide resolved
5364e22
to
df3b33c
Compare
@jerone I apply your suggestion |
@JamesHenry all cases are implemented |
@pumano as well as the above you'll please need to sync up with latest main |
df3b33c
to
25d5d57
Compare
@JamesHenry I apply your suggestion and rebase from main |
5a6bd16
to
5784c3c
Compare
5784c3c
to
e9b7c79
Compare
Codecov Report
@@ Coverage Diff @@
## main #1162 +/- ##
==========================================
+ Coverage 88.07% 88.16% +0.09%
==========================================
Files 159 161 +2
Lines 3053 3085 +32
Branches 491 498 +7
==========================================
+ Hits 2689 2720 +31
Misses 253 253
- Partials 111 112 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks a lot @pumano!
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular-eslint/builder](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.2.0` -> `14.4.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2fbuilder/14.2.0/14.4.0) | | [@angular-eslint/eslint-plugin](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.2.0` -> `14.4.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2feslint-plugin/14.2.0/14.4.0) | | [@angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.2.0` -> `14.4.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2feslint-plugin-template/14.2.0/14.4.0) | | [@angular-eslint/schematics](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.2.0` -> `14.4.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2fschematics/14.2.0/14.4.0) | | [@angular-eslint/template-parser](https://github.com/angular-eslint/angular-eslint) | devDependencies | minor | [`14.2.0` -> `14.4.0`](https://renovatebot.com/diffs/npm/@angular-eslint%2ftemplate-parser/14.2.0/14.4.0) | --- ### Release Notes <details> <summary>angular-eslint/angular-eslint (@​angular-eslint/builder)</summary> ### [`v14.4.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/builder/CHANGELOG.md#​1440-httpsgithubcomangular-eslintangular-eslintcomparev1431v1440-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.1...v14.4.0) **Note:** Version bump only for package [@​angular-eslint/builder](https://github.com/angular-eslint/builder) #### [14.3.1](angular-eslint/angular-eslint@v14.3.0...v14.3.1) (2022-11-20) **Note:** Version bump only for package [@​angular-eslint/builder](https://github.com/angular-eslint/builder) ### [`v14.3.1`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/builder/CHANGELOG.md#​1431-httpsgithubcomangular-eslintangular-eslintcomparev1430v1431-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.0...v14.3.1) **Note:** Version bump only for package [@​angular-eslint/builder](https://github.com/angular-eslint/builder) ### [`v14.3.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/builder/CHANGELOG.md#​1430-httpsgithubcomangular-eslintangular-eslintcomparev1420v1430-2022-11-17) [Compare Source](angular-eslint/angular-eslint@v14.2.0...v14.3.0) **Note:** Version bump only for package [@​angular-eslint/builder](https://github.com/angular-eslint/builder) </details> <details> <summary>angular-eslint/angular-eslint (@​angular-eslint/eslint-plugin)</summary> ### [`v14.4.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#​1440-httpsgithubcomangular-eslintangular-eslintcomparev1431v1440-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.1...v14.4.0) **Note:** Version bump only for package [@​angular-eslint/eslint-plugin](https://github.com/angular-eslint/eslint-plugin) #### [14.3.1](angular-eslint/angular-eslint@v14.3.0...v14.3.1) (2022-11-20) ##### Bug Fixes - **no-input-rename:** allow input aliases that match the directive name applied to an element ([#​1207](angular-eslint/angular-eslint#1207)) ([aff3344](angular-eslint/angular-eslint@aff3344)) ### [`v14.3.1`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#​1431-httpsgithubcomangular-eslintangular-eslintcomparev1430v1431-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.0...v14.3.1) ##### Bug Fixes - **no-input-rename:** allow input aliases that match the directive name applied to an element ([#​1207](angular-eslint/angular-eslint#1207)) ([aff3344](angular-eslint/angular-eslint@aff3344)) ### [`v14.3.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#​1430-httpsgithubcomangular-eslintangular-eslintcomparev1420v1430-2022-11-17) [Compare Source](angular-eslint/angular-eslint@v14.2.0...v14.3.0) **Note:** Version bump only for package [@​angular-eslint/eslint-plugin](https://github.com/angular-eslint/eslint-plugin) </details> <details> <summary>angular-eslint/angular-eslint (@​angular-eslint/eslint-plugin-template)</summary> ### [`v14.4.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin-template/CHANGELOG.md#​1440-httpsgithubcomangular-eslintangular-eslintcomparev1431v1440-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.1...v14.4.0) ##### Features - **utils:** export template parser services ([#​1211](angular-eslint/angular-eslint#1211)) ([34a62d2](angular-eslint/angular-eslint@34a62d2)) #### [14.3.1](angular-eslint/angular-eslint@v14.3.0...v14.3.1) (2022-11-20) **Note:** Version bump only for package [@​angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/eslint-plugin-template) ### [`v14.3.1`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin-template/CHANGELOG.md#​1431-httpsgithubcomangular-eslintangular-eslintcomparev1430v1431-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.0...v14.3.1) **Note:** Version bump only for package [@​angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/eslint-plugin-template) ### [`v14.3.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/eslint-plugin-template/CHANGELOG.md#​1430-httpsgithubcomangular-eslintangular-eslintcomparev1420v1430-2022-11-17) [Compare Source](angular-eslint/angular-eslint@v14.2.0...v14.3.0) ##### Features - **eslint-plugin-template:** \[accessibility-elements-content] add allowList option ([#​1201](angular-eslint/angular-eslint#1201)) ([3877f43](angular-eslint/angular-eslint@3877f43)) - **eslint-plugin-template:** \[no-inline-styles] add rule ([#​1162](angular-eslint/angular-eslint#1162)) ([7e1aadf](angular-eslint/angular-eslint@7e1aadf)) </details> <details> <summary>angular-eslint/angular-eslint (@​angular-eslint/schematics)</summary> ### [`v14.4.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/schematics/CHANGELOG.md#​1440-httpsgithubcomangular-eslintangular-eslintcomparev1431v1440-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.1...v14.4.0) **Note:** Version bump only for package [@​angular-eslint/schematics](https://github.com/angular-eslint/schematics) #### [14.3.1](angular-eslint/angular-eslint@v14.3.0...v14.3.1) (2022-11-20) ##### Bug Fixes - update dependency eslint to v8.28.0 ([#​1210](angular-eslint/angular-eslint#1210)) ([c671e74](angular-eslint/angular-eslint@c671e74)) ### [`v14.3.1`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/schematics/CHANGELOG.md#​1431-httpsgithubcomangular-eslintangular-eslintcomparev1430v1431-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.0...v14.3.1) ##### Bug Fixes - update dependency eslint to v8.28.0 ([#​1210](angular-eslint/angular-eslint#1210)) ([c671e74](angular-eslint/angular-eslint@c671e74)) ### [`v14.3.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/schematics/CHANGELOG.md#​1430-httpsgithubcomangular-eslintangular-eslintcomparev1420v1430-2022-11-17) [Compare Source](angular-eslint/angular-eslint@v14.2.0...v14.3.0) **Note:** Version bump only for package [@​angular-eslint/schematics](https://github.com/angular-eslint/schematics) </details> <details> <summary>angular-eslint/angular-eslint (@​angular-eslint/template-parser)</summary> ### [`v14.4.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/template-parser/CHANGELOG.md#​1440-httpsgithubcomangular-eslintangular-eslintcomparev1431v1440-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.1...v14.4.0) **Note:** Version bump only for package [@​angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) #### [14.3.1](angular-eslint/angular-eslint@v14.3.0...v14.3.1) (2022-11-20) **Note:** Version bump only for package [@​angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) ### [`v14.3.1`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/template-parser/CHANGELOG.md#​1431-httpsgithubcomangular-eslintangular-eslintcomparev1430v1431-2022-11-20) [Compare Source](angular-eslint/angular-eslint@v14.3.0...v14.3.1) **Note:** Version bump only for package [@​angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) ### [`v14.3.0`](https://github.com/angular-eslint/angular-eslint/blob/HEAD/packages/template-parser/CHANGELOG.md#​1430-httpsgithubcomangular-eslintangular-eslintcomparev1420v1430-2022-11-17) [Compare Source](angular-eslint/angular-eslint@v14.2.0...v14.3.0) **Note:** Version bump only for package [@​angular-eslint/template-parser](https://github.com/angular-eslint/template-parser) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4yNi4zIiwidXBkYXRlZEluVmVyIjoiMzQuMjkuMiJ9--> Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1648 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
It's (subjectively) good practice to separate styles from the view layout, when possible. This rule detects inline styles in angular templates and help to keep all css in one place (for example in .css files, or use tailwindcss classes). Also inline styles has different priority in CSS and that cause some bugs.
I also found some rule https://github.com/Intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md but that rule for JSX, and I created own using @angular-eslint tooling and in using angular-eslint style.
Previously I create that rule as custom rule for my nx workspace rules (for our team needs), but have idea to share it with community.