vite-plugin-image-srcset 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nikita Barinov
+
+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

@@ -0,0 +1,105 @@
+# vite-plugin-image-srcset
+
+Simple Vite plugin to generate `srcset` attributes for responsive images.
+
+Import a single image and get `src` + `srcSet` for 1x/2x/3x pixel densities.
+
+## Installation
+
+```bash
+npm install -D vite-plugin-image-srcset
+# or
+pnpm add -D vite-plugin-image-srcset
+```
+
+## Setup
+
+### 1. Add plugin to Vite config
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { srcSetPlugin } from 'vite-plugin-image-srcset';
+
+export default defineConfig({
+  plugins: [srcSetPlugin()],
+});
+```
+
+### 2. Add types (TypeScript)
+
+Add to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vite-plugin-image-srcset/client"]
+  }
+}
+```
+
+Or add a reference in your `vite-env.d.ts`:
+
+```ts
+  /// <reference types="vite/client" />
++ /// <reference types="vite-plugin-image-srcset/client" />
+```
+
+## Usage
+
+### File structure
+
+The plugin expects images with `@2x` and `@3x` suffixes:
+
+```
+assets/
+  icon.png      # 1x (base)
+  icon@2x.png   # 2x
+  icon@3x.png   # 3x
+```
+
+### Import with `?srcset` query
+
+```tsx
+import icon from './assets/icon.png?srcset';
+
+// icon = { src: '/assets/icon.png', srcSet: '/assets/icon.png 1x, /assets/icon@2x.png 2x, /assets/icon@3x.png 3x' }
+```
+
+### React example
+
+```tsx
+import icon from './assets/icon.png?srcset';
+
+function App() {
+  return <img {...icon} alt="Icon" />;
+}
+```
+
+### HTML example
+
+```ts
+import icon from './assets/icon.png?srcset';
+
+document.body.innerHTML = `<img src="${icon.src}" srcset="${icon.srcSet}" alt="Icon" />`;
+```
+
+## API
+
+The plugin transforms imports with `?srcset` query into an object:
+
+```ts
+interface ImageSrcSet {
+  src: string; // URL to 1x image
+  srcSet: string; // srcset string: "url1 1x, url2 2x, url3 3x"
+}
+```
+
+## Supported formats
+
+- `.png`
+- `.jpg`
+
+## License
+
+MIT

package/client.d.ts

@@ -0,0 +1,13 @@
+declare module '*.png?srcset' {
+  type ImageSrcSet = import('./dist/index').ImageSrcSet;
+  const srcset: ImageSrcSet;
+
+  export default srcset;
+}
+
+declare module '*.jpg?srcset' {
+  type ImageSrcSet = import('./dist/index').ImageSrcSet;
+  const srcset: ImageSrcSet;
+
+  export default srcset;
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface ImageSrcSet {
+    srcSet: string;
+    src: string;
+}
+declare function srcSetPlugin(): Plugin;
+
+export { type ImageSrcSet, srcSetPlugin };

package/dist/index.js

@@ -0,0 +1,37 @@
+// src/index.ts
+import path from "path";
+function srcSetPlugin() {
+  return {
+    name: "vite-plugin-image-srcset",
+    enforce: "pre",
+    transform(_, id) {
+      if (!id.includes("?srcset")) {
+        return null;
+      }
+      const [filePath] = id.split("?");
+      const ext = path.extname(filePath);
+      const baseName = path.basename(filePath, ext);
+      const dir = path.dirname(filePath);
+      const x1 = filePath;
+      const x2 = `${dir}/${baseName}@2x${ext}`;
+      const x3 = `${dir}/${baseName}@3x${ext}`;
+      return {
+        code: `
+          import x1 from '${x1}?url';
+          import x2 from '${x2}?url';
+          import x3 from '${x3}?url';
+
+          export default {
+            srcSet: \`\${x1} 1x, \${x2} 2x, \${x3} 3x\`,
+            src: x1,
+          };
+        `,
+        map: null
+      };
+    }
+  };
+}
+export {
+  srcSetPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import path from 'node:path';\nimport { type Plugin } from 'vite';\n\ninterface ImageSrcSet {\n  srcSet: string;\n  src: string;\n}\n\nfunction srcSetPlugin(): Plugin {\n  return {\n    name: 'vite-plugin-image-srcset',\n    enforce: 'pre',\n    transform(_, id) {\n      if (!id.includes('?srcset')) {\n        return null;\n      }\n\n      const [filePath] = id.split('?');\n      const ext = path.extname(filePath);\n      const baseName = path.basename(filePath, ext);\n      const dir = path.dirname(filePath);\n\n      const x1 = filePath;\n      const x2 = `${dir}/${baseName}@2x${ext}`;\n      const x3 = `${dir}/${baseName}@3x${ext}`;\n\n      return {\n        code: `\n          import x1 from '${x1}?url';\n          import x2 from '${x2}?url';\n          import x3 from '${x3}?url';\n\n          export default {\n            srcSet: \\`\\${x1} 1x, \\${x2} 2x, \\${x3} 3x\\`,\n            src: x1,\n          };\n        `,\n        map: null,\n      };\n    },\n  };\n}\n\nexport { srcSetPlugin };\nexport type { ImageSrcSet };\n"],"mappings":";AAAA,OAAO,UAAU;AAQjB,SAAS,eAAuB;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU,GAAG,IAAI;AACf,UAAI,CAAC,GAAG,SAAS,SAAS,GAAG;AAC3B,eAAO;AAAA,MACT;AAEA,YAAM,CAAC,QAAQ,IAAI,GAAG,MAAM,GAAG;AAC/B,YAAM,MAAM,KAAK,QAAQ,QAAQ;AACjC,YAAM,WAAW,KAAK,SAAS,UAAU,GAAG;AAC5C,YAAM,MAAM,KAAK,QAAQ,QAAQ;AAEjC,YAAM,KAAK;AACX,YAAM,KAAK,GAAG,GAAG,IAAI,QAAQ,MAAM,GAAG;AACtC,YAAM,KAAK,GAAG,GAAG,IAAI,QAAQ,MAAM,GAAG;AAEtC,aAAO;AAAA,QACL,MAAM;AAAA,4BACc,EAAE;AAAA,4BACF,EAAE;AAAA,4BACF,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOtB,KAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "vite-plugin-image-srcset",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Simple Vite plugin to generate srcset attributes for images",
+  "author": "Nikita Barinov <nikitabarinov2301@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/nbarinov/vite-plugin-image-srcset#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nbarinov/vite-plugin-image-srcset.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nbarinov/vite-plugin-image-srcset/issues"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "prettier": "^3.8.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "typings": "./dist/index.d.mts",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./client": {
+      "types": "./client.d.ts"
+    }
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "image",
+    "srcset",
+    "responsive",
+    "retina",
+    "hdpi"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "client.d.ts"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "dev": "tsup",
+    "build": "tsup",
+    "format": "prettier --write .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}