@open-xchange/vite-plugin-icon-sprite 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## `1.2.0` – 2026-Mar-13
+
+- added: support for Vite 8
+
 ## `1.1.1` – 2025-Sep-09
 
 - chore: bump dependencies

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,7 +16,7 @@ Common configuration options for SVG sprites and PNG sprites.
 
 #### Option `format`
 
-- Type: `"svg" | "png"`
+- Type: `'svg' | 'png'`
 - _required_
 
 The file format specifier of the icon sprite, and the source images. Depending on the value of this option, the plugin expects various file-format specific options (see below).
@@ -44,16 +44,16 @@ Example how to consume the SVG sprite in source code:
 ```ts
 // path/to/source.ts
 
-import svgSprite from "virtual:svg/my-icons.svg"
+import svgSprite from 'virtual:svg/my-icons.svg'
 
 // insert the SVG sprite into the DOM to be able to refer to the <symbol> elements
-document.createElement("div").innerHTML = svgSprite
+document.createElement('div').innerHTML = svgSprite
 
 // create an SVG element referring to an icon in the sprite
 function createIcon(id: string): SVGElement {
-  const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use")
-  useEl.setAttribute("href", "#my-icon")
-  const iconEl = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  const useEl = document.createElementNS('http://www.w3.org/2000/svg', 'use')
+  useEl.setAttribute('href', '#my-icon')
+  const iconEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   iconEl.append(useEl)
   return iconEl
 }
@@ -64,9 +64,9 @@ function createIcon(id: string): SVGElement {
 - Type: `string`
 - _required_
 
-The module name of the SVG sprite to be generated (with ".svg" extension).
+The module name of the SVG sprite to be generated (with '.svg' extension).
 
-The SVG markup of the sprite can be imported from the virtual module path `"virtual:svg/[spriteName]"`.
+The SVG markup of the sprite can be imported from the virtual module path `'virtual:svg/[spriteName]'`.
 
 #### Option `idPrefix`
 
@@ -80,17 +80,17 @@ A prefix to be added to all icon identifiers declared in the mapping file. By de
 ```ts
 // vite.config.ts
 
-import { defineConfig } from "vite" // or "vitest/config"
-import spritePlugin from "@open-xchange/vite-plugin-icon-sprite"
+import { defineConfig } from 'vite' // or 'vitest/config'
+import spritePlugin from '@open-xchange/vite-plugin-icon-sprite'
 
 export default defineConfig(() => {
   plugins: [
     spritePlugin({
-      format: "svg",
-      imagesPath: "src/icons/images",
-      mappingPath: "src/icons/svg-mapping.yaml",
-      spriteName: "icons.svg",
-      idPrefix: "svg-",
+      format: 'svg',
+      imagesPath: 'src/icons/images',
+      mappingPath: 'src/icons/svg-mapping.yaml',
+      spriteName: 'icons.svg',
+      idPrefix: 'svg-',
     }),
   ],
 })
@@ -98,8 +98,8 @@ export default defineConfig(() => {
 
 - Collects all SVG files in the directory `src/icons/images`.
 - Uses the icon mapping in `src/icons/svg-mapping.yaml`.
-- Creates a virtual import `"virtual:svg/icons.svg"`.
-- Prefixes all icon identifiers with `svg-`, e.g. the icon key `my-icon` in the mapping file will result in the icon identifier `"svg-my-icon"` in source code.
+- Creates a virtual import `'virtual:svg/icons.svg'`.
+- Prefixes all icon identifiers with `svg-`, e.g. the icon key `my-icon` in the mapping file will result in the icon identifier `'svg-my-icon'` in source code.
 
 ### PNG Sprites
 
@@ -110,7 +110,7 @@ The plugin collects multiple PNG files, and generates a virtual imports for one
 - Type: `string`
 - _required_
 
-The module name for the CSS file (with ".css" extension). The generated CSS markup can be imported from `"virtual:png/[cssName]"`.
+The module name for the CSS file (with '.css' extension). The generated CSS markup can be imported from `'virtual:png/[cssName]'`.
 
 #### Option `cssIconSize`
 
@@ -129,40 +129,41 @@ Additional padding around all icons to be generated in the sprites, in CSS pixel
 #### Option `cssIconSelector`
 
 - Type: `string`
-- Default: `"i.png-icon"`
+- Default: `'i.png-icon'`
 
 The CSS selector for a PNG icon element to be used in all generated CSS rules.
 
 #### Option `rootLocaleAttr`
 
 - Type: `string`
-- Default: `"lang"`
+- Default: `'lang'`
 
 Name of the root element's attribute containing the locale identifier. Needed to generate CSS selectors for localized icons.
 
 #### Option `spriteColorType`
 
-- Type: `"source" | "monochrome" | "alpha"`
-- Default: `"source"`
+- Type: `'source' | 'monochrome' | 'alpha'`
+- Default: `'source'`
 
 Specifies how to generate the sprite PNG files.
 
 | Value | Description |
 | - | - |
-| `"source"` | The source PNGs will be copied into the generated sprites unmodified. They will contain three color channels, and an alpha channel. |
-| `"monochrome"` | The generated sprites will be converted to monochrome. They will contain a gray channel and an alpha channel. |
-| `"alpha"` | Only the alpha channels of the source PNGs will be copied into the generated sprites. They will contain a single gray channel representing the original alpha channels. |
+| `'source'` | The source PNGs will be copied into the generated sprites unmodified. They will contain three color channels, and an alpha channel. |
+| `'monochrome'` | The generated sprites will be converted to monochrome. They will contain a gray channel and an alpha channel. |
+| `'alpha'` | Only the alpha channels of the source PNGs will be copied into the generated sprites. They will contain a single gray channel representing the original alpha channels. |
 
 #### Option `spriteFillType`
 
-- Type: `"background" | "mask"`
-- Default: `"background"`
+- Type: `'background' | 'mask'`
+- Default: `'background'`
 
 Specifies how the sprites are supposed to be used in CSS rules.
 
 | Value | Description |
-| `"background"` | The sprites will be attached via "background-image". |
-| `"mask"` | The sprites will be attached via "mask-image". |
+| - | - |
+| `'background'` | The sprites will be attached via 'background-image'. |
+| `'mask'` | The sprites will be attached via 'mask-image'. |
 
 All related CSS properties (e.g. `background-position` vs. `mask-position` etc.) will be generated accordingly.
 
@@ -173,7 +174,7 @@ All related CSS properties (e.g. `background-position` vs. `mask-position` etc.)
 
 List of all icon sprites with different icon sizes to be generated.
 
-- The keys of the dictionary are the module names of the PNG sprites (with ".png" extension). The generated PNG sprite can be imported from `"virtual:png/[key]"`.
+- The keys of the dictionary are the module names of the PNG sprites (with '.png' extension). The generated PNG sprite can be imported from `'virtual:png/[key]'`.
 
 - The values of the dictionary contain configuration options for the PNG sprite:
 
@@ -187,25 +188,25 @@ List of all icon sprites with different icon sizes to be generated.
 ```ts
 // vite.config.ts
 
-import { defineConfig } from "vite" // or "vitest/config"
-import spritePlugin from "@open-xchange/vite-plugin-icon-sprite"
+import { defineConfig } from 'vite' // or 'vitest/config'
+import spritePlugin from '@open-xchange/vite-plugin-icon-sprite'
 
 export default defineConfig(() => {
   plugins: [
     spritePlugin({
-      format: "png",
-      imagesPath: "src/icons/images",
-      mappingPath: "src/icons/png-mapping.yaml",
-      cssName: "icons.css",
+      format: 'png',
+      imagesPath: 'src/icons/images',
+      mappingPath: 'src/icons/png-mapping.yaml',
+      cssName: 'icons.css',
       cssIconSize: 16,
       cssIconPadding: 1,
-      cssIconSelector: "i.my-icon",
-      rootLocaleAttr: "data-icon-locale",
-      spriteColorType: "alpha",
-      spriteFillType: "mask",
+      cssIconSelector: 'i.my-icon',
+      rootLocaleAttr: 'data-icon-locale',
+      spriteColorType: 'alpha',
+      spriteFillType: 'mask',
       sprites: {
-        "icons1.png": { factor: 1, src: "[path]_16.png" },
-        "icons2.png": { factor: 2, src: "[path]_32.png" },
+        'icons1.png': { factor: 1, src: '[path]_16.png' },
+        'icons2.png': { factor: 2, src: '[path]_32.png' },
       },
     }),
   ]
@@ -214,10 +215,10 @@ export default defineConfig(() => {
 
 - Collects all PNG files in the directory `src/icons/images`. The images must exist in two sizes (16px and 32px), their file names must end with `_16.png` and `_32.png` respectively (according to the options `cssIconSize` and `sprites->factor`).
 - Uses the icon mapping in `src/icons/png-mapping.yaml`.
-- Creates the virtual imports `"virtual:svg/icons.css"`, `"virtual:svg/icons1.png"`, and `"virtual:svg/icons2.png"`.
+- Creates the virtual imports `'virtual:svg/icons.css'`, `'virtual:svg/icons1.png'`, and `'virtual:svg/icons2.png'`.
 - Adds one pixel padding around all icons in the PNG sprites.
 - Generates CSS selectors for `<i>` elements with CSS class `my-icon`.
-- Generates `:root[data-icon-locale]` CSS selectors for localized icons (i.e., the UI locale code must be stored in the root element's attribute "data-icon-locale").
+- Generates `:root[data-icon-locale]` CSS selectors for localized icons (i.e., the UI locale code must be stored in the root element's attribute 'data-icon-locale').
 - Generates PNG sprites consisting of an 8-bit alpha channel only.
 - Generates CSS rules using CSS mask (instead of background).
 
@@ -235,7 +236,7 @@ The plugin expects an icon mapping file (plugin option `mappingPath`) which is a
 
 - Only the base name of the source image file must be specified relative to the configured root directory of the image files. It must not contain the image size suffix (_PNG only_), nor a file extension (`.svg` or `.png`). See examples below.
 
-- Localized icons will be described by a dictionary mapping the ISO language identifiers (as comma-separated strings) to the image base names (as described above). The special locale code `"*"` is mandatory, and defines a default icon for unlisted locales. See examples below.
+- Localized icons will be described by a dictionary mapping the ISO language identifiers (as comma-separated strings) to the image base names (as described above). The special locale code `'*'` is mandatory, and defines a default icon for unlisted locales. See examples below.
 
 #### Icon Mapping Examples
 
@@ -253,7 +254,7 @@ my-icon: commons/icon1
 other-icon: commons/icon2
 ```
 
-In source code, the icons can be used with the identifiers `"my-icon"` and `"other-icon"`.
+In source code, the icons can be used with the identifiers `'my-icon'` and `'other-icon'`.
 
 ##### Example 2: Simple PNG Icons
 
@@ -281,7 +282,7 @@ other-icon: commons/icon2
 # svg-mapping.yaml
 
 my-icon:
-  "*": commons/icon1
+  '*': commons/icon1
   de,fr: commons/icon2
   sv: commons/icon3
 ```
@@ -294,7 +295,7 @@ This package provides a JSON schema that can be used for validation in editors.
 
 ##### JSON Mapping File
 
-Add the path to the schema file as property `"$schema"` to the mapping file:
+Add the path to the schema file as property `'$schema'` to the mapping file:
 
 ```json
 // mapping.json
@@ -325,4 +326,4 @@ In VS Code, the plugin [redhat.vscode-yaml](https://marketplace.visualstudio.com
 
 ### Logging
 
-By default, warning messages and error messages will be logged to the shell. The environment variable `PLUGIN_REPLACE_ICON_SPRITE` can be used to change the log level of this plugin. Possible values are `info`, `warn`, `error`, and `silent`.
+By default, warning messages and error messages will be logged to the shell. The environment variable `PLUGIN_ICON_SPRITE_LOGLEVEL` can be used to change the log level of this plugin. Possible values are `info`, `warn`, `error`, and `silent`.

package/dist/helper.d.ts

@@ -1,7 +1,7 @@
-import { type PluginHelperConfig, PluginHelper } from "@open-xchange/vite-helper";
+import { type PluginHelperConfig, PluginHelper } from '@open-xchange/vite-helper';
 /**
  * Common configuration options (independent from the icon file format) for the
- * plugin "@open-xchange/vite-plugin-icon-sprite".
+ * plugin '@open-xchange/vite-plugin-icon-sprite'.
  *
  * @template FormatT
  *  The file format specifier of the icon sprite, and the source images.
@@ -16,15 +16,15 @@ export interface SpritePluginBaseOptions<FormatT extends string> {
      */
     imagesPath: string;
     /**
-     * Path to the JSON or YAML configuration file containing the mapping
-     * between icon identifiers and SVG source file names.
+     * Path to the JSON or YAML configuration file containing the mapping between
+     * icon identifiers and SVG source file names.
      */
     mappingPath: string;
 }
 /**
  * Internal configuration of a `SpritePluginHelper` instance.
  */
-export type SpritePluginConfig = Required<Pick<PluginHelperConfig, "pluginIndex" | "virtualModules">>;
+export type SpritePluginConfig = Required<Pick<PluginHelperConfig, 'pluginIndex' | 'virtualModules'>>;
 /**
  * Represents a single entry in an icon mapping configuration file (a mapping
  * between icon identifier, path to source image, and language code for

package/dist/helper.js

@@ -1,6 +1,6 @@
-import { dictEntries } from "@open-xchange/vite-helper/utils";
-import { resolvePath } from "@open-xchange/vite-helper/file";
-import { PluginHelper } from "@open-xchange/vite-helper";
+import { dictEntries } from '@open-xchange/vite-helper/utils';
+import { resolvePath } from '@open-xchange/vite-helper/file';
+import { PluginHelper } from '@open-xchange/vite-helper';
 // class SpritePluginHelper ===================================================
 /**
  * Plugin helper for all icon file formats.
@@ -17,8 +17,8 @@ export class SpritePluginHelper extends PluginHelper {
             ...config,
             virtualPrefix: options.format,
             loggerPrefix: options.format,
-            logLevelEnvVar: "PLUGIN_ICON_SPRITE_LOGLEVEL",
-            cacheSrcFiles: [options.imagesPath + "/**/*." + options.format, options.mappingPath],
+            logLevelEnvVar: 'PLUGIN_ICON_SPRITE_LOGLEVEL',
+            cacheSrcFiles: [options.imagesPath + '/**/*.' + options.format, options.mappingPath],
         });
         this.options = options;
     }
@@ -34,15 +34,15 @@ export class SpritePluginHelper extends PluginHelper {
      *  The entries of the configuration file.
      */
     async readIconMapping() {
-        const schemaPath = resolvePath("./mapping-schema.json", import.meta.url);
+        const schemaPath = resolvePath('./mapping-schema.json', import.meta.url);
         const mappingDict = await this.readConfig(this.options.mappingPath, { schema: schemaPath });
         // convert to array of `IconMappingEntry`
         const iconMapping = [];
         for (const [iconId, entry] of dictEntries(mappingDict)) {
-            const iconDict = (typeof entry === "string") ? { "*": entry } : entry;
+            const iconDict = (typeof entry === 'string') ? { '*': entry } : entry;
             for (const [languages, iconPath] of dictEntries(iconDict)) {
-                for (const iconLang of languages.split(",")) {
-                    if (iconLang === "*") {
+                for (const iconLang of languages.split(',')) {
+                    if (iconLang === '*') {
                         iconMapping.push({ iconId, iconPath });
                     }
                     else {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import type { Plugin } from "vite";
-import { type SvgSpritePluginOptions } from "./plugin-svg.js";
-import { type PngSpritePluginOptions } from "./plugin-png.js";
+import type { Plugin } from 'vite';
+import { type SvgSpritePluginOptions } from './plugin-svg.js';
+import { type PngSpritePluginOptions } from './plugin-png.js';
 /**
  * Configuration options for generating icon sprites from SVG or PNG source
  * images.

package/dist/index.js

@@ -1,5 +1,5 @@
-import { svgSpritePlugin } from "./plugin-svg.js";
-import { pngSpritePlugin } from "./plugin-png.js";
+import { svgSpritePlugin } from './plugin-svg.js';
+import { pngSpritePlugin } from './plugin-png.js';
 // plugin =====================================================================
 /**
  * A plugin for Vite to generate an icon sprite file from multiple SVG or PNG
@@ -13,7 +13,7 @@ import { pngSpritePlugin } from "./plugin-png.js";
  */
 export default function iconSpritePlugin(options) {
     switch (options.format) {
-        case "svg": return svgSpritePlugin(import.meta.url, options);
-        case "png": return pngSpritePlugin(import.meta.url, options);
+        case 'svg': return svgSpritePlugin(import.meta.url, options);
+        case 'png': return pngSpritePlugin(import.meta.url, options);
     }
 }

package/dist/mapping-schema.json

@@ -1,32 +1,32 @@
 {
-    "$schema": "http://json-schema.org/draft-07/schema",
-    "title": "Icon mapping for SVG or PNG icon sprites",
-    "description": "A dictionary that maps icon identifiers to source SVG or PNG image files.",
-    "type": "object",
-    "properties": {
-        "$schema": {
-            "type": "string",
-            "format": "uri-reference"
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Icon mapping for SVG or PNG icon sprites",
+  "description": "A dictionary that maps icon identifiers to source SVG or PNG image files.",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "format": "uri-reference"
+    }
+  },
+  "patternProperties": {
+    "^[a-z0-9]+(-[a-z0-9]+)*$": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "object",
+          "patternProperties": {
+            "^(\\*|[a-z]+(,[a-z]+)*)$": {
+              "type": "string"
+            }
+          },
+          "required": ["*"],
+          "additionalProperties": false
         }
-    },
-    "patternProperties": {
-        "^[a-z0-9]+(-[a-z0-9]+)*$": {
-            "anyOf": [
-                {
-                    "type": "string"
-                },
-                {
-                    "type": "object",
-                    "patternProperties": {
-                        "^(\\*|[a-z]+(,[a-z]+)*)$": {
-                            "type": "string"
-                        }
-                    },
-                    "required": ["*"],
-                    "additionalProperties": false
-                }
-            ]
-        }
-    },
-    "additionalProperties": false
+      ]
+    }
+  },
+  "additionalProperties": false
 }

package/dist/plugin-png.d.ts

@@ -1,13 +1,13 @@
-import type { Plugin } from "vite";
-import { type Dict } from "@open-xchange/vite-helper/utils";
-import { type SpritePluginBaseOptions } from "./helper.js";
+import type { Plugin } from 'vite';
+import { type Dict } from '@open-xchange/vite-helper/utils';
+import { type SpritePluginBaseOptions } from './helper.js';
 /**
  * Configuration options for generating PNG sprites from PNG source images.
  */
-export interface PngSpritePluginOptions extends SpritePluginBaseOptions<"png"> {
+export interface PngSpritePluginOptions extends SpritePluginBaseOptions<'png'> {
     /**
-     * Module name for the CSS file (with ".css" extension). The generated CSS
-     * markup can be imported from `"virtual:png/[cssName]"`.
+     * Module name for the CSS file (with '.css' extension). The generated CSS
+     * markup can be imported from `'virtual:png/[cssName]'`.
      */
     cssName: string;
     /**
@@ -15,8 +15,8 @@ export interface PngSpritePluginOptions extends SpritePluginBaseOptions<"png"> {
      */
     cssIconSize: number;
     /**
-     * Additional padding around all icons to be generated in the sprites, in
-     * CSS pixels.
+     * Additional padding around all icons to be generated in the sprites, in CSS
+     * pixels.
      *
      * @default 0
      */
@@ -25,56 +25,55 @@ export interface PngSpritePluginOptions extends SpritePluginBaseOptions<"png"> {
      * The CSS selector for a PNG icon element to be used in all generated CSS
      * rules.
      *
-     * @default "i.png-icon"
+     * @default 'i.png-icon'
      */
     cssIconSelector?: string;
     /**
      * Name of the root element's attribute containing the locale identifier.
      * Needed to generate CSS selectors for localized icons.
      *
-     * @default "lang"
+     * @default 'lang'
      */
     rootLocaleAttr?: string;
     /**
      * Specifies how to generate the sprite PNG files.
      *
-     * - `"source"`: The source PNGs will be copied into the generated sprites
-     *   unmodified. They will contain three color channels and an alpha
-     *   channel.
-     * - `"monochrome"`: The generated sprites will be converted to monochrome.
+     * - `'source'`: The source PNGs will be copied into the generated sprites
+     *   unmodified. They will contain three color channels and an alpha channel.
+     * - `'monochrome'`: The generated sprites will be converted to monochrome.
      *   They will contain a gray channel and an alpha channel.
-     * - `"alpha"`: Only the alpha channels of the source PNGs will be copied
+     * - `'alpha'`: Only the alpha channels of the source PNGs will be copied
      *   into the generated sprites. They will contain a single gray channel
      *   representing the original alpha channels.
      *
-     * @default "source"
+     * @default 'source'
      */
-    spriteColorType?: "source" | "monochrome" | "alpha";
+    spriteColorType?: 'source' | 'monochrome' | 'alpha';
     /**
      * Specifies how the sprites are supposed to be used in CSS rules.
      *
-     * - `"background"`: The sprites will be attached via "background-image".
-     * - `"mask"`: The sprites will be attached via "mask-image".
+     * - `'background'`: The sprites will be attached via 'background-image'.
+     * - `'mask'`: The sprites will be attached via 'mask-image'.
      *
-     * All related CSS properties (e.g. "(background|mask)-position" etc.) will
+     * All related CSS properties (e.g. '(background|mask)-position' etc.) will
      * be generated accordingly.
      *
-     * @default "background"
+     * @default 'background'
      */
-    spriteFillType?: "background" | "mask";
+    spriteFillType?: 'background' | 'mask';
     /**
      * List of all icon sprites to be generated.
      *
-     * - The keys of the dictionary are the module names of the PNG sprites
-     *   (with ".png" extension). The generated sprite PNG file can be imported
-     *   from `"virtual:png/[key]"`.
-     * - "factor" is the scaling factor (a multiplier for "cssIconSize"). All
+     * - The keys of the dictionary are the module names of the PNG sprites (with
+     *   '.png' extension). The generated sprite PNG file can be imported from
+     *   `'virtual:png/[key]'`.
+     * - 'factor' is the scaling factor (a multiplier for 'cssIconSize'). All
      *   source PNG files must have the effective pixel size (`cssIconSize *
      *   factor`).
-     * - "src" specifies the pattern used to build the path of the source PNG
-     *   files. MUST contain the placeholder "[path]" that will be replaced
-     *   with the base paths contained in the icon mapping file referred in the
-     *   option "mappingFile".
+     * - 'src' specifies the pattern used to build the path of the source PNG
+     *   files. MUST contain the placeholder '[path]' that will be replaced with
+     *   the base paths contained in the icon mapping file referred in the option
+     *   'mappingFile'.
      */
     sprites: Dict<{
         factor: number;
@@ -86,7 +85,7 @@ export interface PngSpritePluginOptions extends SpritePluginBaseOptions<"png"> {
  * files.
  *
  * @param index
- *  URL of the index source file of this plugin.
+ *  URL of the index source file of this plugin (`import.meta.url`).
  *
  * @param options
  *  Plugin configuration options.

package/dist/plugin-png.js

@@ -1,11 +1,11 @@
-import { Jimp, PNGColorType } from "jimp";
-import { onceFn } from "@open-xchange/vite-helper/utils";
-import { Cache } from "@open-xchange/vite-helper/cache";
-import { SpritePluginHelper } from "./helper.js";
+import { Jimp, PNGColorType } from 'jimp';
+import { onceFn } from '@open-xchange/vite-helper/utils';
+import { Cache } from '@open-xchange/vite-helper/cache';
+import { SpritePluginHelper } from './helper.js';
 // constants ==================================================================
 const FILL_VENDOR_PREFIXES = {
     background: [],
-    mask: ["webkit"],
+    mask: ['webkit'],
 };
 // functions ==================================================================
 /**
@@ -15,12 +15,15 @@ const FILL_VENDOR_PREFIXES = {
  *  The length to be emitted.
  *
  * @returns
- *  The passed length with "px" unit.
+ *  The passed length with 'px' unit.
  */
 function px(value) {
-    return value ? `${value}px` : "0";
+    return value ? `${value}px` : '0';
 }
 // class PngSpritePluginHelper ================================================
+/**
+ * Implementation helper for PNG to sprite conversion.
+ */
 class PngSpritePluginHelper extends SpritePluginHelper {
     #parseMappingOnce;
     // constructor ------------------------------------------------------------
@@ -30,10 +33,10 @@ class PngSpritePluginHelper extends SpritePluginHelper {
             virtualModules: [options.cssName, ...Object.keys(options.sprites)],
         }, {
             cssIconPadding: 0,
-            cssIconSelector: "i.png-icon",
-            rootLocaleAttr: "lang",
-            spriteColorType: "source",
-            spriteFillType: "background",
+            cssIconSelector: 'i.png-icon',
+            rootLocaleAttr: 'lang',
+            spriteColorType: 'source',
+            spriteFillType: 'background',
             ...options,
         });
         this.#parseMappingOnce = onceFn(() => this.#parseMapping());
@@ -50,10 +53,10 @@ class PngSpritePluginHelper extends SpritePluginHelper {
         const { cssName } = this.options;
         // try to resolve cached version of generated file
         return await this.generateModule(cssName, async () => {
-            this.info("generating CSS markup %f", cssName);
+            this.info('generating CSS markup %f', cssName);
             // parse mapping file which collects icon paths, CSS selectors, and entry positions
             const cssMarkup = (await this.#parseMappingOnce()).cssMarkup;
-            this.info("CSS markup %f generated successfully", cssName);
+            this.info('CSS markup %f generated successfully', cssName);
             return cssMarkup;
         });
     }
@@ -77,11 +80,11 @@ class PngSpritePluginHelper extends SpritePluginHelper {
         // shortcuts to plugin options
         const { imagesPath, cssIconSize, cssIconPadding, spriteColorType } = this.options;
         // check configuration
-        this.ensure(factor > 0, "invalid scaling factor in configuration for sprite %f", spriteName);
-        this.ensure(srcPattern.includes("[path]"), "placeholder [path] expected in configuration for sprite %f", spriteName);
+        this.ensure(factor > 0, 'invalid scaling factor in configuration for sprite %f', spriteName);
+        this.ensure(srcPattern.includes('[path]'), 'placeholder [path] expected in configuration for sprite %f', spriteName);
         // try to resolve cached version of generated file
         return await this.generateModule(spriteName, async () => {
-            this.info("generating sprite %f", spriteName);
+            this.info('generating sprite %f', spriteName);
             // parse mapping file which collects icon paths, CSS selectors, and entry positions
             const { cssSpriteWidth, cssSpriteHeight, entries } = await this.#parseMappingOnce();
             // new image data is not clean out-of-the-box, explicitly fill with zeros
@@ -91,17 +94,17 @@ class PngSpritePluginHelper extends SpritePluginHelper {
                 // expected pixel size for the current scaling factor
                 const size = cssIconSize * factor;
                 // load and parse the source image file
-                const path = imagesPath + "/" + srcPattern.replace("[path]", iconPath);
+                const path = imagesPath + '/' + srcPattern.replace('[path]', iconPath);
                 const buffer = await this.readBuffer(path);
                 const image = await Jimp.fromBuffer(buffer);
                 // validate the image size
                 const { width, height } = image.bitmap;
-                this.ensure((width === size) && (height === size), "wrong image width in %f (expected %s but got %s)", path, `${size}x${size}`, `${width}x${height}`);
+                this.ensure((width === size) && (height === size), 'wrong image width in %f (expected %s but got %s)', path, `${size}x${size}`, `${width}x${height}`);
                 // insert source image into the sprite
                 sprite.blit({ src: image, x: (x + cssIconPadding) * factor, y: (y + cssIconPadding) * factor });
             }
             // copy alpha of all pixels to RGB channels (alpha channel will be exported as greyscale without alpha)
-            if (spriteColorType === "alpha") {
+            if (spriteColorType === 'alpha') {
                 for (let d = sprite.bitmap.data, i = 0, l = d.length; i < l; i += 4) {
                     d.fill(d[i + 3], i, i + 3); // copy A to RGB
                     d[i + 3] = 255; // set A to full opacity
@@ -113,11 +116,11 @@ class PngSpritePluginHelper extends SpritePluginHelper {
                 monochrome: PNGColorType.GRAYSCALE_ALPHA,
                 alpha: PNGColorType.GRAYSCALE,
             }[spriteColorType];
-            const spriteBuffer = await sprite.getBuffer("image/png", { colorType });
+            const spriteBuffer = await sprite.getBuffer('image/png', { colorType });
             // convert to base64 encoded data URL
-            const spriteDataUrl = `data:image/png;base64,${spriteBuffer.toString("base64")}`;
+            const spriteDataUrl = `data:image/png;base64,${spriteBuffer.toString('base64')}`;
             const moduleSource = `export default ${JSON.stringify(spriteDataUrl)};`;
-            this.info("sprite %f generated successfully", spriteName);
+            this.info('sprite %f generated successfully', spriteName);
             return moduleSource;
         });
     }
@@ -154,32 +157,32 @@ class PngSpritePluginHelper extends SpritePluginHelper {
         // generates a background/mask CSS property definition with correct vendor prefixes
         const fillProp = (name, value) => {
             const prop = `${spriteFillType}-${name}: ${value};`;
-            return prefixes.map(prefix => `-${prefix}-${prop} `).join("") + prop;
+            return prefixes.map(prefix => `-${prefix}-${prop} `).join('') + prop;
         };
         // the contents of the resulting CSS file with icon definitions
         const cssLines = [
             `${cssIconSelector} {`,
-            "  display: inline-block;",
+            '  display: inline-block;',
             `  width: ${px(cssTileSize)};`,
             `  height: ${px(cssTileSize)};`,
-            "  flex: 0 0 auto;",
-            `  ${fillProp("size", `${px(cssSpriteWidth)} ${px(cssSpriteHeight)}`)}`,
-            `  ${fillProp("origin", "content-box")}`,
-            "}",
+            '  flex: 0 0 auto;',
+            `  ${fillProp('size', `${px(cssSpriteWidth)} ${px(cssSpriteHeight)}`)}`,
+            `  ${fillProp('origin', 'content-box')}`,
+            '}',
             `${cssIconSelector}[data-icon-id="none"] { visibility: hidden; }`,
         ];
         // generate all sprite entries as an array
         const entries = Array.from(selectorMap, ([iconPath, selectors], index) => {
             const x = cssTileSize * (index % rowLength);
             const y = cssTileSize * Math.floor(index / rowLength);
-            const prop = fillProp("position", `${px(-x)} ${px(-y)}`);
+            const prop = fillProp('position', `${px(-x)} ${px(-y)}`);
             for (const selector of selectors) {
                 cssLines.push(`${selector} { ${prop} }`);
             }
             return { iconPath, x, y };
         });
         // create the resulting CSS markup as string
-        const cssMarkup = cssLines.join("\n") + "\n";
+        const cssMarkup = cssLines.join('\n') + '\n';
         return { cssMarkup, cssSpriteWidth, cssSpriteHeight, entries };
     }
 }
@@ -189,7 +192,7 @@ class PngSpritePluginHelper extends SpritePluginHelper {
  * files.
  *
  * @param index
- *  URL of the index source file of this plugin.
+ *  URL of the index source file of this plugin (`import.meta.url`).
  *
  * @param options
  *  Plugin configuration options.
@@ -204,7 +207,7 @@ export function pngSpritePlugin(index, options) {
     const helper = new PngSpritePluginHelper(index, options);
     // create and return the plugin object
     return {
-        name: "@open-xchange/vite-plugin-icon-sprite/png",
+        name: '@open-xchange/vite-plugin-icon-sprite/png',
         // initialize file system cache for generated modules
         async configResolved(viteConfig) {
             await helper.initializeCache(viteConfig);
@@ -215,7 +218,7 @@ export function pngSpritePlugin(index, options) {
         },
         // load the PNG icon files, generate final PNG sprites and CSS file
         async load(moduleId) {
-            // only handle the target modules specified in "resolveId"
+            // only handle the target modules specified in 'resolveId'
             const target = helper.matchVirtualModuleId(moduleId);
             if (!target) {
                 return;
@@ -230,7 +233,7 @@ export function pngSpritePlugin(index, options) {
                 return await helper.generateSpriteModule(target, factor, src);
             }
             // invalid module identifier
-            helper.fail("unknown output file %f", target);
+            helper.fail('unknown output file %f', target);
             return undefined;
         },
     };

package/dist/plugin-svg.d.ts

@@ -1,18 +1,18 @@
-import type { Plugin } from "vite";
-import { type SpritePluginBaseOptions } from "./helper.js";
+import type { Plugin } from 'vite';
+import { type SpritePluginBaseOptions } from './helper.js';
 /**
  * Configuration options for generating an SVG sprite from SVG source images.
  */
-export interface SvgSpritePluginOptions extends SpritePluginBaseOptions<"svg"> {
+export interface SvgSpritePluginOptions extends SpritePluginBaseOptions<'svg'> {
     /**
-     * Module name of the SVG sprite to be generated (with ".svg" extension).
-     * The SVG markup of the sprite can be imported from the virtual module
-     * path `"virtual:svg/[spriteName]"`.
+     * Module name of the SVG sprite to be generated (with '.svg' extension). The
+     * SVG markup of the sprite can be imported from the virtual module path
+     * `'virtual:svg/[spriteName]'`.
      */
     spriteName: string;
     /**
-     * A prefix to be added to all icon identifiers declared in the mapping
-     * file. By default, no prefix will be added.
+     * A prefix to be added to all icon identifiers declared in the mapping file.
+     * By default, no prefix will be added.
      */
     idPrefix?: string;
 }
@@ -21,7 +21,7 @@ export interface SvgSpritePluginOptions extends SpritePluginBaseOptions<"svg"> {
  * files.
  *
  * @param index
- *  URL of the index source file of this plugin.
+ *  URL of the index source file of this plugin (`import.meta.url`).
  *
  * @param options
  *  Plugin configuration options.

package/dist/plugin-svg.js

@@ -1,14 +1,17 @@
-import { basename } from "node:path";
-import SVGSprite from "svg-sprite";
-import { SpritePluginHelper } from "./helper.js";
+import { basename } from 'node:path';
+import SVGSprite from 'svg-sprite';
+import { SpritePluginHelper } from './helper.js';
 // class SvgSpritePluginHelper ================================================
+/**
+ * Implementation helper for SVG to sprite conversion.
+ */
 class SvgSpritePluginHelper extends SpritePluginHelper {
     constructor(index, options) {
         super({
             pluginIndex: index,
             virtualModules: options.spriteName,
         }, {
-            idPrefix: "",
+            idPrefix: '',
             ...options,
         });
     }
@@ -24,17 +27,17 @@ class SvgSpritePluginHelper extends SpritePluginHelper {
         const { imagesPath, idPrefix, spriteName } = this.options;
         // try to resolve cached version of generated file
         return await this.generateModule(spriteName, async () => {
-            this.info("compiling sprite %f", spriteName);
+            this.info('compiling sprite %f', spriteName);
             // create a reverse map from icon filenames to icon identifiers
             const iconIdMap = new Map();
             // create the core SVG spriter
             const spriter = new SVGSprite({
                 shape: {
                     id: {
-                        generator: name => iconIdMap.get(name) ?? "",
+                        generator: name => iconIdMap.get(name) ?? '',
                     },
                     spacing: {
-                        box: "icon",
+                        box: 'icon',
                     },
                     dimension: {
                         maxWidth: 16,
@@ -45,10 +48,10 @@ class SvgSpritePluginHelper extends SpritePluginHelper {
                     xmlDeclaration: false,
                     // - remove all <style> elements declaring a class with fill color
                     // - remove all class attribute referring to the class from <style>
-                    // - add "fill" attribute to all <symbol> elements
+                    // - add 'fill' attribute to all <symbol> elements
                     transform: markup => markup
-                        .replace(/<style>.*?<\/style>/g, "")
-                        .replace(/class=".*?" ?/g, "")
+                        .replace(/<style>.*?<\/style>/g, '')
+                        .replace(/class=".*?" ?/g, '')
                         .replace(/<symbol /g, '<symbol fill="currentColor" '),
                 },
                 mode: {
@@ -63,7 +66,7 @@ class SvgSpritePluginHelper extends SpritePluginHelper {
             for (const { iconId, iconPath, iconLang } of await this.readIconMapping()) {
                 const path = `${imagesPath}/${iconPath}.svg`;
                 // icon identifier with configured prefix and language suffix
-                const idSuffix = iconLang ? `;${iconLang}` : "";
+                const idSuffix = iconLang ? `;${iconLang}` : '';
                 iconIdMap.set(basename(path), idPrefix + iconId + idSuffix);
                 // read SVG source image, insert into spriter instance
                 const markup = await this.readText(path);
@@ -71,9 +74,9 @@ class SvgSpritePluginHelper extends SpritePluginHelper {
             }
             // compile the SVG sprite
             const result = (await spriter.compileAsync()).result;
-            const spriteMarkup = result.symbol.sprite.contents.toString("utf8");
+            const spriteMarkup = result.symbol.sprite.contents.toString('utf8');
             const moduleCode = `export default ${JSON.stringify(spriteMarkup)};`;
-            this.info("sprite %f generated successfully", spriteName);
+            this.info('sprite %f generated successfully', spriteName);
             return moduleCode;
         });
     }
@@ -84,7 +87,7 @@ class SvgSpritePluginHelper extends SpritePluginHelper {
  * files.
  *
  * @param index
- *  URL of the index source file of this plugin.
+ *  URL of the index source file of this plugin (`import.meta.url`).
  *
  * @param options
  *  Plugin configuration options.
@@ -97,7 +100,7 @@ export function svgSpritePlugin(index, options) {
     const helper = new SvgSpritePluginHelper(index, options);
     // create and return the plugin object
     return {
-        name: "@open-xchange/vite-plugin-icon-sprite/svg",
+        name: '@open-xchange/vite-plugin-icon-sprite/svg',
         // initialize file system cache for generated modules
         async configResolved(viteConfig) {
             await helper.initializeCache(viteConfig);
@@ -108,7 +111,7 @@ export function svgSpritePlugin(index, options) {
         },
         // load the SVG icon files, generate final SVG sprite
         async load(moduleId) {
-            // only handle the output file specified in "resolveId"
+            // only handle the output file specified in 'resolveId'
             if (!helper.matchVirtualModuleId(moduleId)) {
                 return null;
             }

package/dist/tsconfig.json

@@ -1,7 +1,7 @@
 {
-    "$schema": "https://json.schemastore.org/tsconfig",
-    "extends": "../../../tsconfig.shared.json",
-    "compilerOptions": {
-        "outDir": "../dist"
-    }
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../../tsconfig.shared.json",
+  "compilerOptions": {
+    "outDir": "../dist"
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-xchange/vite-plugin-icon-sprite",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Vite plugin that builds icon sprites from SVG or PNG icon files",
   "repository": {
     "type": "git",
@@ -11,38 +11,30 @@
   "engines": {
     "node": ">=20.18"
   },
-  "packageManager": "yarn@4.9.4",
   "type": "module",
   "exports": "./dist/index.js",
   "files": [
     "dist",
     "CHANGELOG.*"
   ],
-  "scripts": {
-    "prepack": "yarn build && yarn lint",
-    "clean": "premove dist",
-    "build": "yarn clean && tsc --project src/tsconfig.json && cpx \"src/*.json\" dist/",
-    "lint": "tsc && tsc --project src/tsconfig.json --noEmit && eslint ."
-  },
   "dependencies": {
-    "@open-xchange/vite-helper": "^1.1.1",
     "jimp": "^1.6.0",
-    "svg-sprite": "^2.0.4"
+    "svg-sprite": "^2.0.4",
+    "@open-xchange/vite-helper": "^1.2.2"
   },
   "devDependencies": {
-    "@open-xchange/linter-presets": "^1.9.0",
-    "@types/node": "^24.3.1",
     "@types/pngjs": "^6.0.5",
     "@types/svg-sprite": "^0.0.39",
     "@types/vinyl": "^2.0.12",
-    "cpx2": "^8.0.0",
-    "eslint": "^9.35.0",
-    "jiti": "^2.5.1",
-    "premove": "^4.0.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.5"
+    "vite": "^8.0.0",
+    "@open-xchange/linter-presets": "^1.18.4"
   },
   "peerDependencies": {
-    "vite": "^6.0.0 || ^7.0.0"
+    "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+  },
+  "scripts": {
+    "build": "pnpm clean && tsc --project src/tsconfig.json && cpx \"src/*.json\" dist/",
+    "clean": "premove dist",
+    "lint": "tsc && tsc --project src/tsconfig.json --noEmit && eslint ."
   }
 }