Enable CSS-in-JS styling with emotion
#98157
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
thompsongl
added
v8.0.0
release_note:skip
|
Working through the type errors related to incompatible |
|
Working through type errors related to |
This comment has been minimized.
This comment has been minimized.
thompsongl
commented
Apr 30, 2021
Comment on lines
+9
to
+11
| "@emotion/core": [ | ||
| "typings/@emotion" | ||
| ], |
There was a problem hiding this comment.
Stubs the @emotion/core types, which are only used internally by Storybook, but cause type errors if included.
There was a problem hiding this comment.
Maybe Storybook should use a dedicated tsconfig.json instead of polluting the base global config?
There was a problem hiding this comment.
EUI PRs like this have highlighted the need to make better use of the various tsconfig files, especially for browser vs. node environments. @mistic and @spalger are aware, but I'm not sure if there is an issue tracking the idea.
Note that this is a temporary change that can be reverted when Storybook moves to Emotion 11. I'm happy to make further changes, though, if y'all decide that kbn-storybook should be handled differently.
There was a problem hiding this comment.
I'm happy to make further changes, though, if y'all decide that kbn-storybook should be handled differently.
If @elastic/kibana-operations team thinks it's acceptable... @mistic any actionable items for the problem?
|
Opening this up for discussion. Note that there are a couple tasks still to complete, but the foundation is ready for review. |
joshdover
reviewed
May 4, 2021
joshdover
reviewed
May 4, 2021
| const usesStyledComponents = [ | ||
| /src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/, | ||
| /x-pack[\/\\]plugins[\/\\](apm|beats_management|fleet|infra|lists|observability|osquery|security_solution|uptime)[\/\\]/, | ||
| /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/, |
There was a problem hiding this comment.
Is there a useful error message if a developer tries to use styled-components outside these directories?
There was a problem hiding this comment.
Not currently, but if the ops folks agree that this opt-in/opt-out approach is the right way to go, we can look at adding a message.
There was a problem hiding this comment.
Is the plan to discouraging use of styled-components and push the teams working on these plugins to migrate to emotion?
What if we added an eslint error message for importing styled-components that told people to use @emotion/react instead. Then people would need to disable the eslint rule when importing it which I think is ideal if we're actively discouraging the spread of styled-compononents. We could also have the opposite rule in place and maintain this list of selectors in .eslintrc.js or something so they stay synchronized.
(This is quite a list of plugins already using styled-components though, didn't expect it to be so large)
There was a problem hiding this comment.
Is the plan to discouraging use of styled-components and push the teams working on these plugins to migrate to emotion?
Yes. The APIs are similar enough that migration shouldn't be time consuming. I was also surprised to see so many plugins using it; the list has grown since I last did an audit.
Good ideas regarding eslint. I'll look in to creating a rule and some kind of synchronizable list.
There was a problem hiding this comment.
Great, I think since we're going to need to scope this to specific files we might want to customize the @kbn/eslint/module_migration rule: https://github.com/elastic/kibana/blob/master/packages/elastic-eslint-config-kibana/.eslintrc.js#L37-L41
We can add file globs to include/exclude specific migration mappings for specific patterns using regex like above. Should be as simple as filtering the list of mappings and then returning an empty visitor {} when the mappings are empty.
There was a problem hiding this comment.
Should we create a meta issue with an explicit deadline to track the migration process?
There was a problem hiding this comment.
Finally got back to this. Extended @kbn/eslint/module_migration to accept include and exclude and used that to write a new rule for styled-components. The file regex array used by @kbn/babel-preset is now stored in @kbn/dev-utils and is shared across packages.
mshustov
reviewed
Jul 7, 2021
| /packages[\/\\]kbn-ui-shared-deps[\/\\]/, | ||
| /src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/, | ||
| /x-pack[\/\\]plugins[\/\\](apm|beats_management|cases|fleet|infra|lists|observability|osquery|security_solution|timelines|uptime)[\/\\]/, | ||
| /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/, |
There was a problem hiding this comment.
Have you created a meta issue to ping codeowners of these plugins to migrate from styled components?
There was a problem hiding this comment.
I have not. Thanks for the reminder
mshustov
approved these changes
Jul 7, 2021
jloleysens
approved these changes
Jul 8, 2021
jbudz
reviewed
Jul 8, 2021
jbudz
approved these changes
Jul 8, 2021
|
🚢 🚢 🚢 |
🚀🚀🚀 |
|
Meta issue for tracking the future of |
💛 Build succeeded, but was flaky
Test FailuresKibana Pipeline / general / Chrome X-Pack UI Functional Tests.x-pack/test/functional/apps/lens/formula·ts.lens app lens formula should update and delete a formulaStandard OutStack TraceMetrics [docs]Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
10 tasks
|
🎉 🎉 🎉 |
|
An enormous, heart-felt Thank You! to everyone involved |
thompsongl
added a commit
to thompsongl/kibana
that referenced
this pull request
Jul 12, 2021
* emotion deps * kbn-babel * kbn-test * examples * babel-plugin-styled-components config * css prop type fixes * type context * declaration location * some emotion types resolved * clean up * emotion v10 accomodations * types * kbn-crypto * kbn-telemetry-tools * bazel * eslint rule; shared file regex array * update paths * Update packages/kbn-eslint-plugin-eslint/rules/module_migration.js Co-authored-by: Spencer <email@spalger.com> * remove placeholder styles * doc api changes * snapshot updates * storybook comments * use constant * bump new deps * condense versions Co-authored-by: Spencer <email@spalger.com>
thompsongl
added a commit
that referenced
this pull request
Jul 12, 2021
* emotion deps * kbn-babel * kbn-test * examples * babel-plugin-styled-components config * css prop type fixes * type context * declaration location * some emotion types resolved * clean up * emotion v10 accomodations * types * kbn-crypto * kbn-telemetry-tools * bazel * eslint rule; shared file regex array * update paths * Update packages/kbn-eslint-plugin-eslint/rules/module_migration.js Co-authored-by: Spencer <email@spalger.com> * remove placeholder styles * doc api changes * snapshot updates * storybook comments * use constant * bump new deps * condense versions Co-authored-by: Spencer <email@spalger.com> Co-authored-by: Spencer <email@spalger.com>
25 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Closes #95557
@emotion/reacttokbn-ui-shared-depsstyled-componentstoemotion@emotion/babel-preset-css-proppresetstyled-components@emotion/jest/serializertokbn-test(Not working as expected at the moment)styled-componentsin new locations.@kbn/eslint/module_migrationto acceptincludeandexclude@kbn/babel-presetto@kbn/dev-utilsand shares across packagescssand Emotion styles from UI components (Chrome, Canvas)