[8.x] ES Lint rules for css-in-js declarations within Kibana (#200703)

[eokoneyo]

Backport

This will backport the following commits from main to 8.x:

• ES Lint rules for css-in-js declarations within Kibana (#200703)

Questions ?

Please refer to the Backport tool documentation

\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Elastic Machine ","sha":"7370cc712ee2bf23f4cf53eef2e74942340f761c","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport missing","v9.0.0","Team:SharedUX","backport:prev-minor"],"number":200703,"url":"https://github.com//pull/200703","mergeCommit":{"message":"ES Lint rules for css-in-js declarations within Kibana (#200703)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana-team/issues/1272\r\n\r\nThis PR adds implementation for eslint rules to help facilitate the\r\nmigration away from SASS files to leveraging the design tokens EUI\r\nprovides for styling.\r\n\r\nThe introduced rules in this PR are as follows;\r\n\r\n- #### No CSS Color values\r\n Consider; \r\n\r\n ```tsx\r\n Hello World!\r\n ```\r\n\r\nthis expression because it specifies the css color property, with a\r\nvalid [CSS color\r\nvalue](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value),\r\nwhen the aforementioned rule is enabled depending on the set report\r\nlevel set the user would get a feedback, see screenshot below;\r\n\r\n\r\n

\r\n\r\nThis rule also works for variables defined elsewhere in the code and\r\nreferenced as a value to the style prop, see screenshot below;\r\n\r\n

\r\n\r\nfeedback will also be provided when some variable that is a literal\r\nvalue is specified as a value for any earmarked property that should not\r\nspecify literal values.\r\n\r\n

\r\n\r\nfeedback will be provided for referencing a member prop of some object\r\ndefined elsewhere as a value to any earmarked property that we have\r\ndeemed to not specify literal values\r\n\r\n

\r\n\r\n\tSupports;\r\n\t- object values\r\n\t- object references\r\n\t- template literals\r\n\t- tagged templates \r\n\r\nThis approach does not penalize variable declarations, only the usages\r\nof any said variable when it doesn't conform to expectation\r\n\r\n- #### Prefer CSS attributes for EUI components (optional)\r\n Consider; \r\n\r\n ```tsx\r\nHello\r\nWorld!\r\n ```\r\nA declaration like the one above, will be regarded as an error and can\r\nbe fixed, when it's fixed it will be re-written as\r\n \r\n ```tsx\r\nHello\r\nWorld!\r\n ```\r\n\r\n\t\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Elastic Machine ","sha":"7370cc712ee2bf23f4cf53eef2e74942340f761c"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com//pull/200703","number":200703,"mergeCommit":{"message":"ES Lint rules for css-in-js declarations within Kibana (#200703)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana-team/issues/1272\r\n\r\nThis PR adds implementation for eslint rules to help facilitate the\r\nmigration away from SASS files to leveraging the design tokens EUI\r\nprovides for styling.\r\n\r\nThe introduced rules in this PR are as follows;\r\n\r\n- #### No CSS Color values\r\n Consider; \r\n\r\n ```tsx\r\n Hello World!\r\n ```\r\n\r\nthis expression because it specifies the css color property, with a\r\nvalid [CSS color\r\nvalue](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value),\r\nwhen the aforementioned rule is enabled depending on the set report\r\nlevel set the user would get a feedback, see screenshot below;\r\n\r\n\r\n

\r\n\r\nThis rule also works for variables defined elsewhere in the code and\r\nreferenced as a value to the style prop, see screenshot below;\r\n\r\n

\r\n\r\nfeedback will also be provided when some variable that is a literal\r\nvalue is specified as a value for any earmarked property that should not\r\nspecify literal values.\r\n\r\n

\r\n\r\nfeedback will be provided for referencing a member prop of some object\r\ndefined elsewhere as a value to any earmarked property that we have\r\ndeemed to not specify literal values\r\n\r\n

\r\n\r\n\tSupports;\r\n\t- object values\r\n\t- object references\r\n\t- template literals\r\n\t- tagged templates \r\n\r\nThis approach does not penalize variable declarations, only the usages\r\nof any said variable when it doesn't conform to expectation\r\n\r\n- #### Prefer CSS attributes for EUI components (optional)\r\n Consider; \r\n\r\n ```tsx\r\nHello\r\nWorld!\r\n ```\r\nA declaration like the one above, will be regarded as an error and can\r\nbe fixed, when it's fixed it will be re-written as\r\n \r\n ```tsx\r\nHello\r\nWorld!\r\n ```\r\n\r\n\t\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Elastic Machine ","sha":"7370cc712ee2bf23f4cf53eef2e74942340f761c"}}]}] BACKPORT-->

[kapral18]

Please do not merge this pull request. We disabled auto-merge because we are trying to merge a big PR as part of sustainable architecture migration which is impossible with ever increasing stream of backports. We will resume the automerge after our PR is merged. Reach out to #sustainable-kibana-architecture for more info.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 3beb6ec

Metrics [docs]

✅ unchanged

[kapral18]

Auto-merge has been re-enabled. Thank you for your patience. :heart