postcss-100vh-fix - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.0
+* Moved to PostCSS 8.
+* Moved `postcss` to `peerDependencies`.
+
 ## 0.1.1
@@ -5,0 +9,0 @@ * Improved docs.

index.js

@@ -1,29 +0,35 @@
-let postcss = require('postcss')
+function process (decl, { AtRule, Rule }) {
+  if (decl.value !== '100vh') return
+  let rule = decl.parent
 
-module.exports = postcss.plugin('postcss-100vh-fix', () => {
-  return root => {
-    root.walkDecls(/(min-|max-)?height/, decl => {
-      if (decl.value !== '100vh') return
-      let rule = decl.parent
+  let media = new AtRule({
+    name: 'supports',
+    params: '(-webkit-touch-callout: none)',
+    source: decl.source
+  })
+  rule.after(media)
 
-      let media = postcss.atRule({
-        name: 'supports',
-        params: '(-webkit-touch-callout: none)',
-        source: decl.source
-      })
-      rule.after(media)
+  let clonedRule = new Rule({
+    selector: rule.selector,
+    source: rule.source
+  })
+  media.append(clonedRule)
 
-      let clonedRule = postcss.rule({
-        selector: rule.selector,
-        source: rule.source
-      })
-      media.append(clonedRule)
+  clonedRule.append({
+    prop: decl.prop,
+    value: '-webkit-fill-available',
+    source: decl.source
+  })
+}
 
-      clonedRule.append({
-        prop: decl.prop,
-        value: '-webkit-fill-available',
-        source: decl.source
-      })
-    })
+module.exports = () => {
+  return {
+    postcssPlugin: 'postcss-100vh-fix',
+    Declaration: {
+      'min-height': process,
+      'max-height': process,
+      'height': process
+    }
   }
-})
+}
+module.exports.postcss = true

package.json

 {
   "name": "postcss-100vh-fix",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "PostCSS plugin to fix height/min-height: 100vh on iOS",
@@ -18,8 +18,8 @@ "keywords": [
   "repository": "postcss/postcss-100vh-fix",
-  "dependencies": {
-    "postcss": "^7.0.32"
+  "engines": {
+    "node": ">=10.0"
   },
-  "engines": {
-    "node": ">=8.0.0"
+  "peerDependencies": {
+    "postcss": "^8.0.3"
   }
 }

README.md

 # PostCSS `100vh` Fix
 
-[PostCSS] plugin to fix [iOS’s bug] with `100vh`. It works in Chrome,
-iOS/iPad/MacOS Safari and [all other browsers].
+<img align="right" width="135" height="95"
+     title="Philosopher’s stone, logo of PostCSS"
+     src="https://postcss.org/logo-leftp.svg">
+
+[PostCSS] plugin to fix [iOS’s bug] with `100vh`.
+
+It works in Chrome (just `-webkit-fill-available` causes problems in Chrome
+in some cases), iOS/iPad/MacOS Safari and [all other browsers].
 Pure CSS solution, no JS required.
@@ -28,8 +34,7 @@
 
-<img src="https://chanind.github.io/assets/100vh_problem.png"
-     alt="100vh bug illusration by David Chanin"
-     title="By David Chanin">
+<img src="https://maximilianschmitt.me/posts/css-100vh-mobile-browsers/[e-mail]"
+     alt="100vh bug illusration Max Schmitt"
+     title="By Max Schmitt">
 
 It works with `min-height` and `max-height` too.
-
 [all other browsers]: https://caniuse.com/#feat=viewport-units
@@ -44,6 +49,29 @@ [iOS’s bug]: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
 
+
+## Limits
+
+Pure CSS solution is limited. For many cases you need to use JS-based hack like
+[`postcss-viewport-height-correction`]:
+
+Our hack do not work with partial height like `height: 90vh`
+or `height: calc(100vh - 60px)`.
+
+Also, we do not fix Chrome for Android bug:
+
+<img src="https://chanind.github.io/assets/100vh_problem.png"
+     alt="100vh Chrome bug illusration David Chanin"
+     title="By David Chanin">
+
+[`postcss-viewport-height-correction`]: https://github.com/Faisal-Manzer/postcss-viewport-height-correction
+
+
 ## Usage
 
+**Step 1:** Install plugin:
 
-**Step 1:** Check you project for existed PostCSS config: `postcss.config.js`
+```sh
+npm install --save-dev postcss postcss-100vh-fix
+```
+
+**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
 in the project root, `"postcss"` section in `package.json`
@@ -55,3 +83,3 @@ or `postcss` in bundle config.
 
-**Step 2:** Add the plugin to plugins list:
+**Step 3:** Add the plugin to plugins list:
 
@@ -67,2 +95,2 @@ ```diff
 
-**Step 3:** Use `height: 100vh` or `min-height: 100vh` in your CSS.
+**Step 4:** Use `height: 100vh` or `min-height: 100vh` in your CSS.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4961

increased by23.65%

Lines of code

31

increased by24%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

93

increased by43.08%

Dependency changes

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• - Removedpostcss@^7.0.32

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedsource-map@0.6.1(transitive)