vite-plugin-modernizr

A Vite plugin to generate and use a custom Modernizr build based on a JSON config.

Installation

npm install --save-dev vite-plugin-modernizr

Then add the plugin to your Vite config:

import modernizrPlugin from 'vite-plugin-modernizr'

export default defineConfig(() => {
	return {
		plugins: [
			modernizrPlugin({
				global: true,
			}),
		],
	}
})

Configuration

The plugin supports the following options:

|Name|Type|Description| |----|----|-----------| |global|boolean|Whether to set Modernizr as a global on window of not. Default false.|

Usage

Create a Modernizr config JSON file and name it modernizr.json or anything ending in .modernizr.json or modernizrrc. Import it in a JavaScript file:

import Modernizr from './modernizr.json'

or if you have set the global: true option, you can probably simply use:

import './modernizr.json'

Your modernizr.json should look something like:

{
	"options": [
		"domPrefixes",
		"html5shiv",
		"prefixed",
		"prefixedCSS",
		"prefixes",
		"setClasses",
		"testAllProps",
		"testProp",
		"testStyles"
	],
	"feature-detects": [
		"css/animations",
		"css/backdropfilter",
		"css/transforms",
		"css/transforms3d",
		"css/transitions",
		"css/flexbox",
		"css/flexboxlegacy",
		"css/objectfit",
		"svg",
		"touchevents"
	]
}