{"_id":"@any-design/safari-vh-patch","_rev":"2-58c7219e8b54066751fe91b68848bb8f","name":"@any-design/safari-vh-patch","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@any-design/safari-vh-patch","version":"0.1.0","keywords":["lib","ui","safari","css"],"author":{"name":"BackRunner"},"license":"MIT","_id":"@any-design/safari-vh-patch@0.1.0","maintainers":[{"name":"backrunner","email":"dev@backrunner.top"}],"dist":{"shasum":"0410e77336c537d2c4672516fd9b7fce5dd76c7d","tarball":"https://registry.npmjs.org/@any-design/safari-vh-patch/-/safari-vh-patch-0.1.0.tgz","fileCount":6,"integrity":"sha512-yGVdxZOfkPNUFERsmsVG3uDJomrCsdx7kc7W1w9a6LpboVAPg21I+M7L8BbrEI7Ldhk2tulKjmDsEKuadjkvNA==","signatures":[{"sig":"MEQCIGvrOUXCBAAIUigNqlGcKUsi1fRPu9xkoDqNWE5kfT3gAiA1FHCp/+9kwLgRtR/Ar2QEueoJySBWkZeEq6gUJPM2sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlSC4CRA9TVsSAnZWagAAVhEQAIxiQf3fNC2upGEZO2w3\nEwifvf7rP3MTi/K+HPLXOq0NofBSEG9DG4YXGREwSw5e7LMIWVpxRfa1JSUW\nSbSvBnyLPb98bD0jNHJX/mqWSxTqQHocnJwIz7yeBTMIaTrc1MbrP9Rk0emh\noxgaH0hZrk1U1uPq3j2GfWDDBMaN7zBt183ZjGAUCDHm2CU8EqAsrdNLHZwK\neK20lsNOclkWf7Dg+e71MVnd2ER+uZoMYBHiPpb//88y7vMBqttZ6hnt4y+Z\nxT62VN0ioxwLFB+xYBKvxv/7tDj0a1AdvsiPfb4J8y5H1cLuzftL5WPXopHM\nEk63VCgNcssp9EvNIqCSSg2/DdmHFGdxe1Xqb2nRmhd5co/5sadblBHXRJSD\nS30Rf3mGda5SZ2Rgk+TPe/VLTnaRdirfaYmg4M0n5rtFrVP0O8mk7IEaGg4j\nL1mSsb26/sKnqJIWN7aveXC8fNd+Nm4JuqL134lKrZ/sXlwCxXszw/0sRt6U\nb75sVdBm3gzkUkWlCPy5VCTILUkAGVTPSSnORo0YU8MIBJglyD602+zhrmPY\nTCydZ8bjRY8Ts6CsZ6+ni20HNMRmX8ZqrB8JJtF8FuHOR/DOp8kWGjkCyd2v\nGY+MHH9HrXa48R2mueTZfa8BvHTLbo5qnLjv6MVSnpCVYdLwmui94AnlJXZ5\nF/oX\r\n=0O+5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/safari-vh-patch.iife.js","gitHead":"1a6648a8161aa449830dd7623d3fa8a53d70936a","scripts":{"build":"rimraf ./dist && tsc --module commonjs && rollup -c rollup.config.ts && rimraf ./dist/lib","watch":"rollup -c rollup.config.ts -w"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"backrunner","email":"dev@backrunner.top"},"_npmVersion":"8.1.1","description":"Typescript library boilerplate","directories":{},"_nodeVersion":"14.18.1","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.3.1","eslint":"^8.2.0","rimraf":"^3.0.2","rollup":"^2.60.0","prettier":"^2.4.1","typescript":"^4.4.4","@types/node":"^16.11.7","@rollup/plugin-json":"^4.1.0","eslint-config-alloy":"^4.4.0","eslint-config-prettier":"^8.3.0","@rollup/plugin-commonjs":"^21.0.1","rollup-plugin-sourcemaps":"^0.6.3","@typescript-eslint/parser":"^5.4.0","rollup-plugin-typescript2":"^0.31.0","@rollup/plugin-node-resolve":"^13.0.6","@typescript-eslint/eslint-plugin":"^5.4.0"},"_npmOperationalInternal":{"tmp":"tmp/safari-vh-patch_0.1.0_1637163192195_0.8032882323728052","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@any-design/safari-vh-patch","version":"0.2.0","description":"A patch for Safari viewport height with PostCSS plugin","main":"dist/plugin.cjs","module":"dist/plugin.mjs","browser":"dist/safari-vh-patch.min.js","type":"module","typings":"dist/types/plugin.d.ts","exports":{".":{"require":"./dist/plugin.cjs","import":"./dist/plugin.mjs"},"./runtime":"./dist/safari-vh-patch.min.js"},"keywords":["postcss-plugin","safari","viewport","vh","css"],"scripts":{"watch":"rollup -c rollup.config.ts -w","build":"rimraf ./dist && rollup -c rollup.config.ts --configPlugin typescript"},"author":{"name":"BackRunner"},"license":"MIT","homepage":"https://github.com/any-design/safari-vh-patch","repository":{"type":"git","url":"git+https://github.com/any-design/safari-vh-patch.git"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2","@types/node":"^22.13.5","@typescript-eslint/eslint-plugin":"^8.24.1","@typescript-eslint/parser":"^8.24.1","eslint":"^9.21.0","eslint-config-alloy":"^5.1.2","eslint-config-prettier":"^9.1.0","postcss":"^8.5.3","prettier":"^3.5.2","rimraf":"^5.0.10","rollup":"^4.34.8","typescript":"^5.7.3"},"_id":"@any-design/safari-vh-patch@0.2.0","gitHead":"aca59bb05392705bfe0e4158fd04807d8ba5ba43","bugs":{"url":"https://github.com/any-design/safari-vh-patch/issues"},"_nodeVersion":"22.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-weqLSk0oBWSinIayYmmQULIfazS8VQ6JSk+qMVyiRlPjIjNdgfMUdI912glUIkZ+2Jw+sIo1R54r83Dl4aSIQA==","shasum":"b687bc25b422f8f21c5791b7743a27c3a1f0e6da","tarball":"https://registry.npmjs.org/@any-design/safari-vh-patch/-/safari-vh-patch-0.2.0.tgz","fileCount":11,"unpackedSize":8767,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCi2N8jaUu/rYC1Q2gqxArrbeeJgKugzcCsjiZyXBjJTQIhAMalA7dpu2RPSWaek63Dr87acsRA5l/+GySpAWlP56bF"}]},"_npmUser":{"name":"backrunner","email":"dev@backrunner.top"},"directories":{},"maintainers":[{"name":"backrunner","email":"dev@backrunner.top"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/safari-vh-patch_0.2.0_1740418759144_0.08710049198243919"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-17T15:33:12.144Z","modified":"2025-02-24T17:39:19.523Z","0.1.0":"2021-11-17T15:33:12.347Z","0.2.0":"2025-02-24T17:39:19.322Z"},"author":{"name":"BackRunner"},"license":"MIT","keywords":["postcss-plugin","safari","viewport","vh","css"],"description":"A patch for Safari viewport height with PostCSS plugin","maintainers":[{"name":"backrunner","email":"dev@backrunner.top"}],"readme":"# @any-design/safari-vh-patch\n\nFix the viewport height (vh) issue in Safari, especially for PWAs and web apps with dynamic toolbars. Includes both a PostCSS plugin and runtime patch.\n\n## Installation\n\n```bash\nnpm install @any-design/safari-vh-patch\n```\n\n## Usage\n\n### 1. PostCSS Plugin Setup\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: {\n    '@any-design/safari-vh-patch': {\n      // options (optional)\n      variableName: '--vh',     // default\n      keepFallback: true        // default\n    }\n  }\n}\n```\n\n### 2. Add Runtime Script\n\nImport the runtime patch in your entry file:\n\n```js\nimport '@any-design/safari-vh-patch/runtime';\n```\n\n### 3. Use in CSS\n\nThe plugin will automatically transform your vh units:\n\n```css\n.element {\n  height: 100vh;  /* Will be transformed automatically */\n}\n\n/* Outputs: */\n.element {\n  height: 100vh;  /* fallback */\n  height: calc(var(--vh, 1vh) * 100);\n}\n```\n\n## Vite Configuration\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport safariVhPatch from '@any-design/safari-vh-patch'\n\nexport default defineConfig({\n  css: {\n    postcss: {\n      plugins: [\n        safariVhPatch()\n      ]\n    }\n  }\n})\n```\n\n## How it Works\n\n1. The PostCSS plugin transforms vh units in your CSS to use a CSS custom property\n2. The runtime script detects Safari and updates the `--vh` variable when viewport changes\n3. Only applies the fix when needed (Safari browsers)\n\n## Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `variableName` | `string` | `'--vh'` | Custom CSS variable name |\n| `keepFallback` | `boolean` | `true` | Keep original vh value as fallback |\n\n## Implementation Reference\n\nBased on the viewport unit trick: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/\n\n## License\n\nMIT\n","readmeFilename":"Readme.md","homepage":"https://github.com/any-design/safari-vh-patch","repository":{"type":"git","url":"git+https://github.com/any-design/safari-vh-patch.git"},"bugs":{"url":"https://github.com/any-design/safari-vh-patch/issues"}}