Merge pull request #62 from SpiriitLabs/dev

Version 3.0.0
SpiriitLabs · Dec 9, 2024 · dd9383b · dd9383b
2 parents fa9b555 + 5f618ba
commit dd9383b
Show file tree

Hide file tree

Showing 23 changed files with 2,704 additions and 2,704 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # vite-plugin-svg-spritemap
 
-> This plugin supports Vite 4 and 5.
+> This plugin supports Vite 5 and 6.
 
 This ViteJS plugin generates a single SVG [spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) with `<symbol>`/`<view>`/`<use>` for each SVG files. It can also generate a stylesheet (CSS/SCSS/Stylus/Less) containing the sprites to be used directly (via a Data URI or SVG fragments).
 
@@ -23,12 +23,15 @@ The plugin outputs can be fully configurable through [options](#🛠-options).
 
 ```shell
 npm i -D @spiriit/vite-plugin-svg-spritemap
+npm i -D svgo #if you need svgo optimization
 
 # yarn
 yarn add -D @spiriit/vite-plugin-svg-spritemap
+yarn add -D svgo #if you need svgo optimization
 
 # pnpm
 pnpm add -D @spiriit/vite-plugin-svg-spritemap
+pnpm add -D svgo #if you need svgo optimization
 ```
 
 ## 👨‍💻 Usage
@@ -246,7 +249,7 @@ ViteJS allows to be use to [serve assets](https://vitejs.dev/guide/backend-integ
 > [!IMPORTANT]
 > To make `vite-plugin-svg-spritemap` works with this kind of environnment, you will need to handle the right url inside your backend if you are on dev or build.
 
-For example, with `<use>` on dev, using direcly the id of the svg (with the `injectSVGOnDev` option).
+For example, with `<use>` on dev, using direcly the id of the svg (with the `injectSvgOnDev` option).
 
 ```html
 <svg>
@@ -261,7 +264,7 @@ And in prod, by putting the correct URL manually thanks to [the manifest.json fi
 </svg>
 ```
 
-To prevent [CORS issue with SVG](https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html) and `<use>`, you can use the `injectSVGOnDev` option. Don't forget to add the HMR script directly above you close body.
+To prevent [CORS issue with SVG](https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html) and `<use>`, you can use the `injectSvgOnDev` option. Don't forget to add the HMR script directly above you close body.
 
 ```html
 <script type="module" src="http://localhost:5173/@vite-plugin-svg-spritemap/client"></script>
@@ -298,8 +301,8 @@ The first argument is a glob path (using [fast-glob](https://github.com/mrmlnc/f
 | output         | `boolean` or `object` or `string`   | `true`  | As a string, set the destination of the file (see [output.filename](#output)).<br> For more control, see [output](#output).<br> Set to false to disable output. |
 | styles         | `false` or `object` or `string`     | `false` | File destination like `src/css/spritemap.css` or [styles object](#styles) |
 | prefix         | `string` or `false`  | `sprite-`    | Define the prefix uses for sprite id in `<symbol>`/`<use>`/`<view>`.<br> Set to false to disable the prefix |
-| svgo           | `boolean` or `object`     | `true`  | Take an SVGO Options object.<br> If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
-| injectSVGOnDev | `boolean`  | `false`   | Inject the SVG Spritemap inside the body on dev |
+| svgo           | `boolean` or `object`     | `false` if SVGO not installed, `true` if SVGO is installed  | Take an SVGO Options object.<br> If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
+| injectSvgOnDev | `boolean`  | `false`   | Inject the SVG Spritemap inside the body on dev |
 | idify          | `(name:string, svg:object) => string`   | `name => options.prefix + name` | Function allowing to customize the id of each symbol of the spritemap svg. |
 | route          | `string`   | `__spritemap` | Change the route name allowing you to have multiple instance of the plugin |
 
@@ -346,7 +349,7 @@ export default {
           },
         ],
       },
-      injectSVGOnDev: true,
+      injectSvgOnDev: true,
       idefy: (name, svg) => `icon-${name}-cheese`,
       styles: {
         lang: 'scss',

diff --git a/demo/_fixtures/scss/style.scss b/demo/_fixtures/scss/style.scss
@@ -1,5 +1,7 @@
-@import './spritemap.scss';
-@import './spritemap-flags.scss';
+@use "sass:map";
+
+@use './spritemap.scss' as *;
+@use './spritemap-flags.scss';
 
 body {
   background-color: #ddd;
@@ -35,8 +37,8 @@ body {
   @each $name, $sprite in $sprites {
     &-#{$name},
     &-#{$name}-mask {
-      width: map-get($sprite, 'width');
-      height: map-get($sprite, 'height');
+      width: map.get($sprite, 'width');
+      height: map.get($sprite, 'height');
     }
   }
 

diff --git a/demo/basic/package.json b/demo/basic/package.json
@@ -11,12 +11,12 @@
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "autoprefixer": "^10.4.20",
-    "less": "^4.2.0",
-    "postcss": "^8.4.47",
-    "sass": "^1.79.4",
-    "stylus": "^0.63.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vite-plugin-inspect": "^0.8.7"
+    "less": "^4.2.1",
+    "postcss": "^8.4.49",
+    "sass": "^1.82.0",
+    "stylus": "^0.64.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-inspect": "^0.10.3"
   }
 }
diff --git a/demo/nuxt/package.json b/demo/nuxt/package.json
@@ -10,10 +10,10 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "nuxt": "^3.13.2",
-    "sass": "^1.79.4",
-    "typescript": "5.6.3",
-    "vue": "^3.5.11",
-    "vue-router": "^4.4.5"
+    "nuxt": "^3.14.1592",
+    "sass": "^1.82.0",
+    "typescript": "5.7.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   }
 }
diff --git a/demo/server/package.json b/demo/server/package.json
@@ -7,17 +7,17 @@
     "preview": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "nitropack": "^2.9.7",
+    "nitropack": "^2.10.4",
     "pug": "^3.0.3"
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "autoprefixer": "^10.4.20",
-    "concurrently": "^9.0.1",
-    "postcss": "^8.4.47",
-    "sass": "^1.79.4",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vite-plugin-inspect": "^0.8.7"
+    "concurrently": "^9.1.0",
+    "postcss": "^8.4.49",
+    "sass": "^1.82.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-inspect": "^0.10.3"
   }
 }
diff --git a/demo/server/vite.config.ts b/demo/server/vite.config.ts
@@ -17,7 +17,7 @@ export default defineConfig({
       './../_fixtures/icons/*.svg',
       {
         prefix: 'icon-',
-        injectSVGOnDev: true,
+        injectSvgOnDev: true,
       },
     ),
     Inspect(),

diff --git a/demo/svelte/package.json b/demo/svelte/package.json
@@ -11,14 +11,14 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.1",
     "@tsconfig/svelte": "^5.0.4",
-    "sass": "^1.79.4",
-    "stylus": "^0.63.0",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "sass": "^1.82.0",
+    "stylus": "^0.64.0",
+    "svelte": "^5.8.1",
+    "svelte-check": "^4.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }
diff --git a/demo/sveltekit/package.json b/demo/sveltekit/package.json
@@ -12,15 +12,15 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.6.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "sass": "^1.79.4",
-    "stylus": "^0.63.0",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.1",
+    "sass": "^1.82.0",
+    "stylus": "^0.64.0",
+    "svelte": "^5.8.1",
+    "svelte-check": "^4.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }
diff --git a/demo/vue/package.json b/demo/vue/package.json
@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.11"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "sass": "^1.79.4",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vue-tsc": "^2.1.6"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "sass": "^1.82.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
   }
 }
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@spiriit/vite-plugin-svg-spritemap",
   "type": "module",
-  "version": "2.3.1",
-  "packageManager": "pnpm@9.12.1",
+  "version": "3.0.0",
+  "packageManager": "pnpm@9.15.0",
   "description": "Generates symbol-based SVG spritemap from all .svg files in a directory",
   "author": "Spiriit",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "dist"
   ],
   "engines": {
-    "node": "^14.18.0 || >=16.0.0"
+    "node": "^18.0.0 || >=20.0.0"
   },
   "scripts": {
     "build": "tsup",
@@ -59,40 +59,45 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "typecheck": "tsc --noEmit --skipLibCheck",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "attw": "pnpm -s dlx @arethetypeswrong/cli --profile node16 --ignore-rules cjs-resolves-to-esm --pack ."
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0",
+    "svgo": "^3.0.0",
+    "vite": "^5.0.0 || ^6.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
+    "svgo": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
   },
   "dependencies": {
-    "@xmldom/xmldom": "^0.9.3",
+    "@xmldom/xmldom": "^0.9.6",
     "fast-glob": "^3.3.2",
     "hash-sum": "^2.0.0",
-    "mini-svg-data-uri": "^1.4.4",
-    "svgo": "^3.3.2"
+    "mini-svg-data-uri": "^1.4.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "3.7.3",
+    "@antfu/eslint-config": "3.11.2",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.10.1",
     "@types/xmldom": "^0.1.34",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^2.1.8",
     "c8": "^10.1.2",
-    "eslint": "^9.12.0",
-    "playwright": "^1.48.0",
-    "rollup": "^4.24.0",
+    "eslint": "^9.16.0",
+    "playwright": "^1.49.0",
+    "rollup": "^4.28.1",
     "svg-element-attributes": "^2.1.0",
-    "tsup": "^8.3.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2",
-    "vue": "^3.5.11"
+    "svgo": "^3.3.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13"
   }
 }