{"id":27362,"library":"rollup-plugin-sprite","title":"rollup-plugin-sprite","description":"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.","status":"maintenance","version":"0.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/linjinying/rollup-plugin-sprite","tags":["javascript","rollup","rollup-plugin","rollup-plugin-sprite","spritesmith","sprite"],"install":[{"cmd":"npm install rollup-plugin-sprite","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-sprite","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-sprite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for sprite sheet generation; provides image packing and layout algorithms.","package":"spritesmith","optional":false},{"reason":"Renders CSS/SASS/LESS/Stylus mixins from sprite metadata.","package":"spritesheet-templates","optional":false},{"reason":"Peer dependency; plugin requires Rollup to function.","package":"rollup","optional":false}],"imports":[{"note":"CommonJS require may not work if the package is ESM-only; check bundler configuration. Default import is recommended.","wrong":"const spritesmith = require('rollup-plugin-sprite')","symbol":"default","correct":"import spritesmith from 'rollup-plugin-sprite'"},{"note":"The package exports a default function; named export 'spritesmith' does not exist. Use default import.","wrong":"import spritesmith from 'rollup-plugin-sprite'","symbol":"spritesmith (named export)","correct":"import { spritesmith } from 'rollup-plugin-sprite'"},{"note":"If using TypeScript, import types explicitly with `import type`. Not all versions have type definitions.","wrong":"import { SpritePlugin } from 'rollup-plugin-sprite'","symbol":"SpritePlugin (TypeScript type)","correct":"import type { SpritePlugin } from 'rollup-plugin-sprite'"}],"quickstart":{"code":"import spritesmith from 'rollup-plugin-sprite';\nimport { defineConfig } from 'rollup';\n\nexport default defineConfig({\n  input: 'src/main.js',\n  output: {\n    dir: 'dist',\n    format: 'cjs'\n  },\n  plugins: [\n    spritesmith({\n      src: {\n        cwd: 'src/ui/images/sprite',\n        glob: '**/*.png'\n      },\n      target: {\n        image: 'src/ui/images/sprite.png',\n        css: 'src/ui/sass/sprite.scss'\n      },\n      cssImageRef: '../images/sprite.png',\n      output: {\n        image: 'dist/images/sprite.png'\n      },\n      spritesmithOptions: {\n        padding: 5\n      }\n    })\n  ]\n});","lang":"javascript","description":"Demonstrates basic plugin configuration: source glob, target image and CSS paths, output directory, and spritesmith options."},"warnings":[{"fix":"Consider using alternative sprite plugins like 'rollup-plugin-sprite-svg' or update manually.","message":"Package last updated in 2019; may not support newer Rollup versions (v3+).","severity":"deprecated","affected_versions":">=3.0"},{"fix":"Ensure both use same interpolations (e.g., if target.image uses [hash], cssImageRef should too).","message":"The 'cssImageRef' option must match the 'target.image' interpolation for correct path resolution.","severity":"gotcha","affected_versions":"*"},{"fix":"Install optional dependencies like 'canvas' if default image processing fails.","message":"The plugin uses spritesmith internally; ensure spritesmith dependencies (e.g., canvas) are installed for image processing.","severity":"gotcha","affected_versions":"*"},{"fix":"Update plugin or use Rollup v1.x or v3.x with compatibility wrapper.","message":"Rollup configuration hook 'buildStart' signature changed in v2 causing plugin failure.","severity":"breaking","affected_versions":">=2.0 <3.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install spritesmith' to install it as a direct dependency.","cause":"Missing dependency 'spritesmith' not auto-installed by npm.","error":"Error: Cannot find module 'spritesmith'"},{"fix":"Use default import: import spritesmith from 'rollup-plugin-sprite'","cause":"Using named import instead of default import.","error":"TypeError: spritesmith is not a function"},{"fix":"Use Rollup v1.x or upgrade plugin.","cause":"Rollup version mismatch; hook API changed in v2.","error":"Error: 'buildStart' hook called without context"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}