postcss-100vh-fix
postcss-100vh-fix copied to clipboard
postcss
PostCSS plugin to fix height/min-height: 100vh on iOS
I'm getting the error `PostCSS plugin postcss-100vh-fix requires PostCSS 8` when starting the dev server with Parcel 2: The packages are these: "postcss": "^8.3.6", "postcss-100vh-fix": "^1.0.2", "parcel": "^2.0.0-nightly.790" Anyone with...
```css body { height: 100vh; } ``` should be fixed to ```css body { height: 100vh; height: -webkit-fill-available; } ``` `-webkit-fill-available` is automatically ignored by browsers that don't understand it.
I'm wondering should plugin also handle width, min-width and max-width? Could be useful in cases like ```css .class { width: 100vh; transform: rotate(90deg); } ```
```json "postcss-100vh-fix": "^1.0.0", ``` used via: ```json "gatsby-plugin-sass": "^2.3.13", ``` ```js […] const autoprefixer = require('autoprefixer') const postCss100VhFix = require('postcss-100vh-fix') const postCssDiscardDuplicates = require('postcss-discard-duplicates') const postCssFlexbugsFixes = require('postcss-flexbugs-fixes') const postCssFocus...
Style declarations with `!important` aren't being overruled by this plugin. For my use case I'm using Bootstrap which has `.vh-100` with the important flag. Here's what this plugin results in:...
