Add postcss and postcss-preset-env #459
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
victorgcramos
approved these changes
Aug 17, 2022
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.
Right now we have to copy-paste the entire media definition through all CSS code, for example:
@media screen and (max-width: 560px))... For some time I researched a solution to let us have "global" breakpoint variables and share it with apps that consumepi-uiso they could also make use ofpi-uidefined breakpoints. The best solution I could find is to use custom media queries. In order to use it, we need a PostCSS plugin. I decided to use postcss-preset-env so we can make use of other cool "css next" stuff like nesting rules. All features can be turned on/off using thestageandfeaturesoptions frompostcss-preset-env. Now, we can write the media query above like:@media (--xs-viewport).I also added a PostCSS addon to storybook so it transforms the CSS correctly to our docs.
With these new additions we can improve a lot the way we write our CSS. This PR doesn't meant to do this but in the future a lot of things can be done.
This PR should be completely backwards compatible. That means
pi-uiconsumers likepoliteiaguianddecreditondon't have to do anything. Although, nowpi-uiincludes anexports.cssfile in the compiled bundle. The consumers can addpostcss-preset-envorpostcss-custom-mediaandimportFromthis file to make use of the breakpoints defined bypi-ui. I will open apoliteiaguiPR to do just that soon.