Add postcss and postcss-preset-env #459
Merged
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-ui
so they could also make use ofpi-ui
defined 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 thestage
andfeatures
options 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-ui
consumers likepoliteiagui
anddecrediton
don't have to do anything. Although, nowpi-ui
includes anexports.css
file in the compiled bundle. The consumers can addpostcss-preset-env
orpostcss-custom-media
andimportFrom
this file to make use of the breakpoints defined bypi-ui
. I will open apoliteiagui
PR to do just that soon.