github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 11:05:39 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/packages/kbn-eslint-plugin-css/jest.config.js
Eyo O. Eyo f535325378
[8.x] ES Lint rules for css-in-js declarations within Kibana (#200703) (#204620) 
# Backport

This will backport the following commits from `main` to `8.x`:
- [ES Lint rules for css-in-js declarations within Kibana
(#200703)](https://github.com/elastic/kibana/pull/200703)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Eyo O.
Eyo","email":"7893459+eokoneyo@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-16T15:56:52Z","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 <EuiCode
style={{ color: '#dd4040' }}>Hello World!</EuiCode>\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<img
width=\"735\" alt=\"Screenshot 2024-11-20 at 12 46
17\"\r\nsrc=\"https://github.com/user-attachments/assets/d2f608dc-782c-4d83-88e6-92dfdd8f6101\">\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<img width=\"1658\" alt=\"Screenshot 2024-11-26 at 13 29
45\"\r\nsrc=\"https://github.com/user-attachments/assets/f8aadf6b-318b-4c6a-b7c9-bb44fb867b58\">\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<img width=\"1730\"
alt=\"Screenshot 2024-11-28 at 19 00
08\"\r\nsrc=\"https://github.com/user-attachments/assets/bc3a8674-9469-4c7a-b0c9-7a2bfa7f08dc\">\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<img width=\"1676\" alt=\"Screenshot
2024-11-29 at 11 36
44\"\r\nsrc=\"https://github.com/user-attachments/assets/c4537fbf-b2d8-46bb-ad5f-8582e8c9a932\">\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\n<EuiCode style={{
someCSSProperty: 'propertyValue' }}>Hello\r\nWorld!</EuiCode>\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\n<EuiCode css={{ someCSSProperty: 'propertyValue'
}}>Hello\r\nWorld!</EuiCode>\r\n ```\r\n\r\n\t\r\n<!--\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_node:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ] ...\r\n\r\n\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
<elasticmachine@users.noreply.github.com>","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/elastic/kibana/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 <EuiCode
style={{ color: '#dd4040' }}>Hello World!</EuiCode>\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<img
width=\"735\" alt=\"Screenshot 2024-11-20 at 12 46
17\"\r\nsrc=\"https://github.com/user-attachments/assets/d2f608dc-782c-4d83-88e6-92dfdd8f6101\">\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<img width=\"1658\" alt=\"Screenshot 2024-11-26 at 13 29
45\"\r\nsrc=\"https://github.com/user-attachments/assets/f8aadf6b-318b-4c6a-b7c9-bb44fb867b58\">\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<img width=\"1730\"
alt=\"Screenshot 2024-11-28 at 19 00
08\"\r\nsrc=\"https://github.com/user-attachments/assets/bc3a8674-9469-4c7a-b0c9-7a2bfa7f08dc\">\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<img width=\"1676\" alt=\"Screenshot
2024-11-29 at 11 36
44\"\r\nsrc=\"https://github.com/user-attachments/assets/c4537fbf-b2d8-46bb-ad5f-8582e8c9a932\">\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\n<EuiCode style={{
someCSSProperty: 'propertyValue' }}>Hello\r\nWorld!</EuiCode>\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\n<EuiCode css={{ someCSSProperty: 'propertyValue'
}}>Hello\r\nWorld!</EuiCode>\r\n ```\r\n\r\n\t\r\n<!--\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_node:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ] ...\r\n\r\n\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
<elasticmachine@users.noreply.github.com>","sha":"7370cc712ee2bf23f4cf53eef2e74942340f761c"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/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 <EuiCode
style={{ color: '#dd4040' }}>Hello World!</EuiCode>\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<img
width=\"735\" alt=\"Screenshot 2024-11-20 at 12 46
17\"\r\nsrc=\"https://github.com/user-attachments/assets/d2f608dc-782c-4d83-88e6-92dfdd8f6101\">\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<img width=\"1658\" alt=\"Screenshot 2024-11-26 at 13 29
45\"\r\nsrc=\"https://github.com/user-attachments/assets/f8aadf6b-318b-4c6a-b7c9-bb44fb867b58\">\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<img width=\"1730\"
alt=\"Screenshot 2024-11-28 at 19 00
08\"\r\nsrc=\"https://github.com/user-attachments/assets/bc3a8674-9469-4c7a-b0c9-7a2bfa7f08dc\">\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<img width=\"1676\" alt=\"Screenshot
2024-11-29 at 11 36
44\"\r\nsrc=\"https://github.com/user-attachments/assets/c4537fbf-b2d8-46bb-ad5f-8582e8c9a932\">\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\n<EuiCode style={{
someCSSProperty: 'propertyValue' }}>Hello\r\nWorld!</EuiCode>\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\n<EuiCode css={{ someCSSProperty: 'propertyValue'
}}>Hello\r\nWorld!</EuiCode>\r\n ```\r\n\r\n\t\r\n<!--\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_node:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ] ...\r\n\r\n\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
<elasticmachine@users.noreply.github.com>","sha":"7370cc712ee2bf23f4cf53eef2e74942340f761c"}}]}]
BACKPORT-->
2024-12-18 09:18:14 +01:00

14 lines
589 B
JavaScript
Raw Permalink Blame History

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
module.exports = {
preset: '@kbn/test',
rootDir: '../..',
roots: ['<rootDir>/packages/kbn-eslint-plugin-css'],
};
Reference in a new issue View git blame Copy permalink