fix(QTM-645): Nested syntax handling to maintain compatibility with styled components v6 #554
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.
Description
https://jirasoftware.catho.com.br/browse/QTM-645
Review guide
- first start the storybook for regression tests(and keep it open):
yarn test:regression:storybook
;- then run the regression tests:
yarn test:regression
How to test the build
Clone quantum repo
In quantum, run:
yarn && yarn build
In recruiter-experience_talent-selection_app, run:
npm install ../quantum/dist
The above command will work if the quantum project is in the same directory as the recruiter-experience_talent-selection_app project. If not, replace '..' with the relative path of the Quantum project
Browsers review
##Explanation of the problem
The problem was caused by the version of styled components used in the application.
Version 6 of styled components changed the way it handles selectors and pseudo-classes. If pseudo-classes are applied to elements without the "&" prefix, the pseudo-classes will be compiled into descendant styles of the desired element and not as the style of the element itself. More details at https://styled-components.com/docs/faqs#nested-syntax-handling.