# @bolt/critical-path-polyfills > A small batch of inline-friendly cross-browser polyfills used in the Bolt Design System Latest version **2.19.0** (published 2020-03-04) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @bolt/critical-path-polyfills pnpm add @bolt/critical-path-polyfills yarn add @bolt/critical-path-polyfills bun add @bolt/critical-path-polyfills ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.19.0 | | Published | 2020-03-04 | | First published | 2019-08-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 9.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Salem Ghoweri | | Maintainers | dmorse, evanlovely, mikemai2awesome, remydenton, sghoweri | | Keywords | design system, bolt design system, critical path, polyfills, cross browser | ## Links - npm: https://www.npmjs.com/package/@bolt/critical-path-polyfills - Repository: https://github.com/bolt-design-system/bolt/tree/master/packages/polyfills/critical-path-polyfills - Homepage: https://boltdesignsystem.com - Issues: https://github.com/bolt-design-system/bolt/issues - npm.io page: https://npm.io/package/@bolt/critical-path-polyfills ## Alternatives - [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads - [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads - [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads - [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads - [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads ## Recent versions - 2.19.0 (latest) — 2020-03-04 - 2.28.1-canary.13800.5.0 (canary) — 2020-11-29 - 2.6.0-beta.2 (next) — 2019-08-27 - 2.28.1-canary.13799.5.0 — 2020-11-27 - 2.28.1-canary.13789.5.0 — 2020-11-25 - 2.28.1-canary.13775.5.0 — 2020-11-23 - 2.28.1-canary.13770.5.0 — 2020-11-20 - 2.28.1-canary.13763.5.0 — 2020-11-20 - 2.28.1-canary.13748.5.0 — 2020-11-19 - 2.28.1-canary.13737.5.0 — 2020-11-17 - 2.28.1-canary.13732.5.0 — 2020-11-15 - 2.28.1-canary.13729.5.0 — 2020-11-13 - 2.28.1-canary.13719.5.0 — 2020-11-13 - 2.28.1-canary.13713.5.0 — 2020-11-06 - 2.28.1-canary.13706.5.0 — 2020-11-05 - … 346 more at https://npm.io/package/@bolt/critical-path-polyfills/versions ## README # Critical Path Polyfills A small batch of cross-browser polyfills (element.closest and element.matches) meant to be inlined and run at the the browser's [critical rendering path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/). ## Install **For NPM Users:** ``` npm install @bolt/critical-path-polyfills ``` **For Yarn Users:** ``` yarn add @bolt/critical-path-polyfills ``` ## Usage The `@bolt/critical-path-polyfills` package is already pre-compiled to use in the browser (no compiling required!) so this package's Javascript can get copied over and inlined right onto the page. For those using the Bolt Design System's Webpack build (used under the hood in `@bolt/build-tools`), you can automatically copy this file over to your `build` directory by adding a `copy` config option to the `.boltrc.js` file. ```javascript copy: [ { from: require.resolve(`@bolt/critical-path-polyfills`), to: path.join(__dirname, '../www/build'), // update to custom build directory if needed }, // ... ] ``` For developers already using the Bolt Design System's Twig templates & Twig Extensions, this JavaScript file can _also_ get automatically inlined onto the page! To do this, first make sure the `@bolt-assets` Twig namespace config has been added to your `.boltrc.js` config: ```javascript // .boltrc.js extraTwigNamespaces: { 'bolt-assets': { recursive: true, paths: ['../www/build'], }, }, ] ``` Finally, update the main Twig template that's responsible for adding JavaScript / CSS to the main site ``. Specifically, this package's Javascript needs to get inlined before _ANY_ 3rd party Javascript gets loaded! Preferably this means: 1. Adding a script tag right at the top of the Twig template's `` tag 2. Checking to make sure the `@bolt-assets/bolt-critical-path-polyfills.cjs.js` file exists (using the fileExists Bolt Twig Extension) 3. And if that file does exist, inlining the contents via `{{ inline("@bolt-assets/bolt-critical-path-polyfills.cjs.js") }}` ```html {# boilerplate code to grab the webpack manifest config file and look up the assets compiled #} {% if bolt.data.config.lang is iterable %} {% set lang = bolt.data.config.lang[0] %} {% else %} {% set lang = bolt.data.config.lang %} {% endif %} {% set manifestConfigFile = "@bolt-assets/bolt-webpack-manifest#{lang != "" ? "-" ~ lang : ""}.json" %} {% set assets = [] %} {% if fileExists(manifestConfigFile) %} {% set assets = get_data(manifestConfigFile) %} {% endif %} {% if fileExists("@bolt-assets/bolt-critical-path-polyfills.cjs.js") %} {% endif %} ``` --- _Source: https://npm.io/package/@bolt/critical-path-polyfills · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._