Add logic

index.js

@@ -1,5 +1,29 @@
 let postcss = require('postcss')
 
 module.exports = postcss.plugin('postcss-100vh-fix', () => {
-  return () => {}
+  return root => {
+    root.walkDecls(/(min-|max-)?height/, decl => {
+      if (decl.value !== '100vh') return
+      let rule = decl.parent
+
+      let media = postcss.atRule({
+        name: 'supports',
+        params: '(-webkit-touch-callout: none)'
+        // source: decl.source
+      })
+      rule.after(media)
+
+      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
+      })
+    })
+  }
 })

index.test.js

@@ -8,6 +8,33 @@ function run (input, output) {
   expect(result.warnings()).toHaveLength(0)
 }
 
-it('does nothing', () => {
-  run('a{}', 'a{}')
+it('adds -webkit-fill-available', () => {
+  run(
+    '@media (max-width: 600px) { body { height: 100vh } }',
+    '@media (max-width: 600px) { body { height: 100vh } ' +
+      '@supports (-webkit-touch-callout: none) { ' +
+      'body { height: -webkit-fill-available } } }'
+  )
+})
+
+it('supports min-height', () => {
+  run(
+    '.min { min-height: 100vh }',
+    '.min { min-height: 100vh }\n' +
+      '@supports (-webkit-touch-callout: none) {\n' +
+      ' .min { min-height: -webkit-fill-available } }'
+  )
+})
+
+it('supports max-height', () => {
+  run(
+    '.max { max-height: 100vh }',
+    '.max { max-height: 100vh }\n' +
+      '@supports (-webkit-touch-callout: none) {\n' +
+      ' .max { max-height: -webkit-fill-available } }'
+  )
+})
+
+it('ignores non-100vh height', () => {
+  run('body { max-height: 100% }', 'body { max-height: 100% }')
 })