Registry / devops / rollup-plugin-sprite

rollup-plugin-sprite

library0.1.2jsnpmunverified

A Rollup plugin that generates a sprite sheet from a set of images using spritesmith and outputs corresponding SASS/LESS/Stylus/CSS mixins. Current stable version: 0.1.2. Infrequently updated; last commit 2019. Differentiates by integrating sprite generation into the Rollup build pipeline, automating the creation of CSS sprites and mixins directly from source images. Compared to standalone tools like grunt-sprite or gulp.spritesmith, this plugin offers seamless bundling with Rollup, reducing build configuration overhead.

devops web-framework

npm install rollup-plugin-sprite

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SPRI

rollup-plugin-sprite

devopsjavascriptv0.1.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import spritesmith from 'rollup-plugin-sprite'

✗ const spritesmith = require('rollup-plugin-sprite')

CommonJS require may not work if the package is ESM-only; check bundler configuration. Default import is recommended.

spritesmith (named export)

✓ import { spritesmith } from 'rollup-plugin-sprite'

✗ import spritesmith from 'rollup-plugin-sprite'

The package exports a default function; named export 'spritesmith' does not exist. Use default import.

SpritePlugin (TypeScript type)

✓ import type { SpritePlugin } from 'rollup-plugin-sprite'

✗ import { SpritePlugin } from 'rollup-plugin-sprite'

If using TypeScript, import types explicitly with `import type`. Not all versions have type definitions.

Demonstrates basic plugin configuration: source glob, target image and CSS paths, output directory, and spritesmith options.

import spritesmith from 'rollup-plugin-sprite'; import { defineConfig } from 'rollup'; export default defineConfig({ input: 'src/main.js', output: { dir: 'dist', format: 'cjs' }, plugins: [ spritesmith({ src: { cwd: 'src/ui/images/sprite', glob: '**/*.png' }, target: { image: 'src/ui/images/sprite.png', css: 'src/ui/sass/sprite.scss' }, cssImageRef: '../images/sprite.png', output: { image: 'dist/images/sprite.png' }, spritesmithOptions: { padding: 5 } }) ] });

Debug

Known issues

deprecatedPackage last updated in 2019; may not support newer Rollup versions (v3+).

fix

Consider using alternative sprite plugins like 'rollup-plugin-sprite-svg' or update manually.

affects: >=3.0

gotchaThe 'cssImageRef' option must match the 'target.image' interpolation for correct path resolution.

fix

Ensure both use same interpolations (e.g., if target.image uses [hash], cssImageRef should too).

affects: *

gotchaThe plugin uses spritesmith internally; ensure spritesmith dependencies (e.g., canvas) are installed for image processing.

fix

Install optional dependencies like 'canvas' if default image processing fails.

affects: *

breakingRollup configuration hook 'buildStart' signature changed in v2 causing plugin failure.

fix

Update plugin or use Rollup v1.x or v3.x with compatibility wrapper.

affects: >=2.0 <3.0

Errors

Common errors & fixes

Error: Cannot find module 'spritesmith'

Missing dependency 'spritesmith' not auto-installed by npm.

fix

Run 'npm install spritesmith' to install it as a direct dependency.

TypeError: spritesmith is not a function

Using named import instead of default import.

fix

Use default import: import spritesmith from 'rollup-plugin-sprite'

Error: 'buildStart' hook called without context

Rollup version mismatch; hook API changed in v2.

fix

Use Rollup v1.x or upgrade plugin.

Upgrade

Version history

0.1.2latest on npm

Audit

Dependencies

spritesmithrequiredCore dependency for sprite sheet generation; provides image packing and layout algorithms.

spritesheet-templatesrequiredRenders CSS/SASS/LESS/Stylus mixins from sprite metadata.

rolluprequiredPeer dependency; plugin requires Rollup to function.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/linjinying/rollup-plugin-sprite ↗

packagehttps://www.npmjs.com/package/rollup-plugin-sprite ↗