{"id":13034,"library":"customizr","title":"Customizr","description":"Customizr is a build tool designed to optimize Modernizr installations by automatically detecting used feature tests within a project's JavaScript and (S)CSS files and generating a custom, minified Modernizr bundle. It helps developers create lean, performant websites by eliminating unused Modernizr tests, thereby reducing asset size and improving load times. The current stable version is 3.0.5, with recent minor updates indicating active maintenance and compatibility with modern Node.js environments. It operates primarily as a command-line interface tool, offering extensive configuration options via a JSON file. Key differentiators include its intelligent crawling capabilities for automated test detection, a high degree of configurability, and seamless integration with popular build systems like Grunt and Gulp through dedicated wrapper packages. This streamlines the Modernizr optimization process, ensuring only the necessary feature detections are included in the final build.","status":"active","version":"3.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/Modernizr/customizr","tags":["javascript","modernizr","customizr"],"install":[{"cmd":"npm install customizr","lang":"bash","label":"npm"},{"cmd":"yarn add customizr","lang":"bash","label":"yarn"},{"cmd":"pnpm add customizr","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary programmatic entry point is the `init` function for ESM consumption.","wrong":"import customizr from 'customizr';","symbol":"init","correct":"import { init } from 'customizr';"},{"note":"For CommonJS environments, the `init` function is exported as a named property.","wrong":"const customizr = require('customizr');","symbol":"init","correct":"const { init } = require('customizr');"},{"note":"While less common, you can import all named exports as a namespace object in ESM. The `init` function would then be accessed via `Customizr.init`.","wrong":"import Customizr from 'customizr';","symbol":"* as Customizr","correct":"import * as Customizr from 'customizr';"}],"quickstart":{"code":"{\n  \"cache\": true,\n  \"devFile\": false, // Set to your development Modernizr build file if used\n  \"dest\": \"./dist/modernizr-custom.js\",\n  \"options\": [\n    \"addTest\",\n    \"html5printshiv\",\n    \"testProp\"\n  ],\n  \"uglify\": true,\n  \"tests\": [\n    \"cssanimations\",\n    \"csstransitions\",\n    \"flexbox\",\n    \"websockets\"\n  ],\n  \"excludeTests\": [],\n  \"crawl\": true,\n  \"files\": {\n    \"src\": [\n      \"src/**/*.{js,css,scss,less}\",\n      \"!src/lib/**/*\"\n    ]\n  },\n  \"customTests\": [],\n  \"classPrefix\": \"\"\n}\n\n// 1. Save the above JSON as customizr.config.json\n// 2. Create some files in `src/` that use Modernizr tests, e.g.:\n//    src/app.js:\n//    if (Modernizr.flexbox) { console.log('Flexbox supported'); }\n//    else { console.log('No flexbox'); }\n//    src/style.css:\n//    .flexbox { display: flex; }\n//    .no-flexbox { /* fallback styles */ }\n// 3. Run Customizr via CLI:\n//    npx customizr -c customizr.config.json\n//    This will generate `./dist/modernizr-custom.js` with only the detected tests.","lang":"json","description":"Demonstrates creating a configuration file for Customizr and then running it via the command line interface to generate a custom Modernizr build based on detected features in source files."},"warnings":[{"fix":"Upgrade your Node.js installation to version 18 or newer using a version manager like nvm (e.g., `nvm install 18 && nvm use 18`).","message":"Customizr v3.0.0 and above requires Node.js version 18 or higher. Projects running on older Node.js environments must upgrade their Node.js version or remain on a Customizr v2.x release.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use Modernizr's generated CSS classes (e.g., `.flexbox`, `.no-flexbox`) in your stylesheets to correctly trigger detection by Customizr's crawler.","message":"When crawling CSS/SCSS/LESS files, Customizr looks for Modernizr's generated class names (e.g., `.flexbox`, `.no-flexbox`) in selectors, not for actual CSS properties (e.g., `display: flex`). Ensure your CSS follows this pattern for proper detection.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set the `devFile` option in your configuration to the path of your development Modernizr file, or ensure `crawl` is set to `false` if you are manually defining `tests`.","message":"If `crawl` is enabled, specifying a `devFile` in your configuration is crucial. Omitting `devFile` can lead to false positives, as Customizr might crawl your full development Modernizr build, resulting in an overly inclusive custom build.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add the specific test name to the `excludeTests` array in your configuration to explicitly ignore it during the crawling process.","message":"Use the `excludeTests` option to prevent unintended inclusions. For example, if you have a CSS class named `.notification` that is unrelated to the Modernizr Notification API test, `excludeTests: ['notification']` will prevent its inclusion.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"To force a rebuild and ignore the cache, use the `--force` command-line option (`npx customizr -c customizr.config.json --force`) or set `cache: false` in your config temporarily.","message":"The `cache` option (defaulting to `true`) avoids rebuilding Modernizr if criteria are met. While beneficial for performance, unexpected changes in source files not tracked by the caching mechanism might lead to outdated builds. If in doubt, run with `--force` flag.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the path provided with the `-c` or `--config` flag is correct and the file exists, e.g., `npx customizr -c ./customizr.config.json`.","cause":"The command-line interface was invoked with a `--config` flag pointing to a non-existent or inaccessible JSON configuration file.","error":"Error: Config file not found at path/to/config.json"},{"fix":"Include the custom-built Modernizr JavaScript file in your HTML using a `<script>` tag, ensuring it loads before any scripts that depend on the `Modernizr` global object.","cause":"The generated Modernizr file was not correctly included in the HTML document, or it was included after scripts that attempt to use `Modernizr`.","error":"ReferenceError: Modernizr is not defined"},{"fix":"Update your Node.js environment to version 18 or newer. Tools like `nvm` (Node Version Manager) can help switch versions easily: `nvm install 18 && nvm use 18`.","cause":"The installed Node.js version is older than the minimum requirement specified by Customizr (v3.x requires Node.js >=18).","error":"Node.js vX.Y.Z is not supported. Please use Node.js >=18."},{"fix":"Provide a path to your development Modernizr file in the `devFile` option within your configuration (e.g., `\"devFile\": \"./node_modules/modernizr/modernizr.js\"`), or set `crawl: false` if you intend to manually specify all `tests`.","cause":"When Customizr is configured to crawl project files (`crawl: true`), it requires a `devFile` path to exclude the full Modernizr development build from its crawling process, preventing an over-inclusive final build.","error":"Error: 'devFile' must be specified when 'crawl' is true to prevent false positives."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"customizr"}