# rollup-plugin-material-all

> Develop with @material/web/all.js - Build what's needed.

Latest version **1.2.3** (published 2026-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-material-all
pnpm add rollup-plugin-material-all
yarn add rollup-plugin-material-all
bun add rollup-plugin-material-all
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2026-08-19 |
| First published | 2023-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Valentin Degenne |
| Maintainers | vdegenne |
| Keywords | rollup-plugin, vite-plugin, web-components, material-web, material-you, material-design, build |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-material-all
- Repository: https://github.com/vdegenne/rollup-plugin-material-all
- Homepage: https://github.com/vdegenne/rollup-plugin-material-all#readme
- Issues: https://github.com/vdegenne/rollup-plugin-material-all/issues
- npm.io page: https://npm.io/package/rollup-plugin-material-all

## Dependencies (2)

- [fast-glob](https://npm.io/package/fast-glob.md) ^3.3.2
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2026-08-19
- 1.2.2 — 2024-02-19
- 1.2.1 — 2024-02-03
- 1.2.0 — 2024-01-19
- 1.1.0 — 2024-01-14
- 1.0.6 — 2024-01-14
- 1.0.5 — 2024-01-09
- 1.0.4 — 2024-01-09
- 1.0.3 — 2024-01-09
- 1.0.2 — 2024-01-09
- 1.0.1 — 2023-12-09
- 1.0.0 — 2023-11-04

## README

<p align="center">
<img src="https://github.com/vdegenne/rollup-plugin-material-all-monorepo/assets/2827383/d1be1a5c-3c8b-4d24-857e-4ed159cdb1de">
</p>

### Rollup/Vite plugin that imports only the elements needed during runtime.

(So you can use `@material/web/all.js` during development and don't have to worry writing imports yourself ✨)

## Install

```bash
npm add -D rollup-plugin-material-all
```

_(You'll also need to install `@material/web` separately)_

## Usage

### 🛠️ During development

_do not use the plugin,_ all you need to do is to import the `all.js` module from the core library somewhere in your source:

```js
import '@material/web/all.js';
```

That's it _!_

### 📦 At build time

import the plugin like so

`rollup.config.js`:

```js
import {materialAll} from 'rollup-plugin-material-all';

// Required to prevent using the plugin during development
const DEV = process.env.NODE_ENV == 'DEV';

export default {
	plugins: [
		DEV ? {} : materialAll(),
		// other plugins...
	],
};
```

<details>
<summary>Or using Vite</summary>

`vite.config.js`:

```js
import {materialAll} from 'rollup-plugin-material-all';
import {defineConfig} from 'vite';

export default defineConfig({
	plugins: [
		// Won't be used during dev
		materialAll(),
	],
});
```

</details>

## Details

The plugin will scan your sources to find all md-\* elements used in your code.  
By default this pattern will be used: `src/**/*.{js,ts,jsx,tsx}`  
but you can always specify a different value in the options:

```js
materialAll({
	// Only ts files
	include: 'src/**/*.ts',
});
```

### Resolution Mode

If not specified `rollup-plugin-material-all` will use the `perFile` resolution mode (which is probably what you will need), there are 2 different methods:

- `perFile`: Elements are imported in each individual file where they are being used. Use this method to improve code-splitting as your bundler will have a better understanding of your app's module dependencies graph.
- `all`: All imports of elements found in the sources will be written in place of `@material/web/all.js`. Use this method if you'd rather want to bundle all your elements in one location which is not recommended since it can increase your page initial load time.

### Additional elements

Sometimes md-\* elements are imported from external libraries, in that case `additionalElements` can be used to specify these elements:

```js
materialAll({
	additionalElements: ['md-circular-progress', 'md-dialog'],
});
```

## License

MIT

---
_Source: https://npm.io/package/rollup-plugin-material-all · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._