sku 15.12.1 → 15.13.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # sku
 
+## 15.13.0
+
+### Minor Changes
+
+- `webpack`: Add support for Vite-style query parameters when importing SVG files ([#1538](https://github.com/seek-oss/sku/pull/1538))
+
+  To support migration from webpack to Vite, SVG imports in webpack now support the same `raw`, `inline` and `url` query parameters as Vite. This allows you to specify how the SVG should be imported: as a raw string, a base64 data URL, or an asset URL. See [the image asset docs] for more information.
+
+  If your application is still using webpack, it is recommended to run the following codemod to automatically migrate all SVG imports to use the `raw` query parameter:
+
+  ```sh
+  pnpm dlx @sku-lib/codemod svg-import-query-param .
+  ```
+
+  This will ensure consistent SVG import behaviour when the time comes to migrate your application to Vite. The `url` and `inline` query parameters can also be used, however they aren't a drop-in replacement for the existing import behaviour (i.e. without any query paramters).
+
+  [the image asset docs]: https://seek-oss.github.io/sku/#/./docs/extra-features?id=importing-image-assets
+
+### Patch Changes
+
+- `vite`: Align asset inline limit with webpack ([#1538](https://github.com/seek-oss/sku/pull/1538))
+
+  To align with sku's webpack config, image assets imported in a Vite app that are smaller than 10,000 bytes will now be inlined as base64-encoded [`data` URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data). Previously the limit was 4,096 bytes.
+
+- `vocab`: Set `projectRoot` in vocab config to fix crash with `tinyglobby@0.2.16` ([#1542](https://github.com/seek-oss/sku/pull/1542))
+
+## 15.12.2
+
+### Patch Changes
+
+- Update `vite-plugin-cjs-interop` and `@vitejs/plugin-basic-ssl` dependencies to `vite@8`-compatible versions ([#1531](https://github.com/seek-oss/sku/pull/1531))
+
+- Update `svgo-loader` dependency to `^5.0.0` ([#1535](https://github.com/seek-oss/sku/pull/1535))
+
+- Update `picomatch` to `^4.0.4` to address CVE-2026-33671 and CVE-2026-33672 ([#1537](https://github.com/seek-oss/sku/pull/1537))
+
 ## 15.12.1
 
 ### Patch Changes

package/dist/config/storybook.cjs

@@ -1779,10 +1779,7 @@ const makeExternalCssLoaders = (options) => {
 };
 const makeSvgLoaders = () => [{
 	loader: require$8.resolve("svgo-loader"),
-	options: { plugins: [{
-		name: "preset-default",
-		params: { overrides: { removeViewBox: false } }
-	}, {
+	options: { plugins: ["preset-default", {
 		name: "addAttributesToSVGElement",
 		params: { attributes: [{ focusable: false }] }
 	}] }
@@ -1984,6 +1981,10 @@ const validateOptions = (options) => {
 //#region src/config/targets.json
 var browserslistNodeTarget = "node 22.19.0";
 
+//#endregion
+//#region src/services/bundlerConstants.ts
+const assetsInlineLimitBytes = 1e4;
+
 //#endregion
 //#region src/services/webpack/config/plugins/skuWebpackPlugin.ts
 var SkuWebpackPlugin = class {
@@ -2087,13 +2088,34 @@ var SkuWebpackPlugin = class {
 				include: this.include,
 				type: "asset",
 				generator: { emit: target === "browser" },
-				parser: { dataUrlCondition: { maxSize: 1e4 } }
+				parser: { dataUrlCondition: { maxSize: assetsInlineLimitBytes } }
+			},
+			{
+				test: SVG,
+				include: this.include,
+				type: "asset/source",
+				use: makeSvgLoaders()
 			},
 			{
 				test: SVG,
+				resourceQuery: /raw/,
 				include: this.include,
 				type: "asset/source",
 				use: makeSvgLoaders()
+			},
+			{
+				test: SVG,
+				resourceQuery: /inline/,
+				include: this.include,
+				type: "asset/inline",
+				use: makeSvgLoaders()
+			},
+			{
+				test: SVG,
+				resourceQuery: /url/,
+				include: this.include,
+				type: "asset/resource",
+				use: makeSvgLoaders()
 			}
 		];
 		compiler.options.module.rules.push(...rules);
@@ -2203,6 +2225,7 @@ const getVocabConfig = ({ languages }) => {
 		return null;
 	}
 	const result = {
+		projectRoot: process.cwd(),
 		devLanguage: "en",
 		ignore: ["node_modules/sku/**", "node_modules/vocab/**"],
 		languages,

package/dist/packages/sku/package.mjs

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "15.12.1";
+var version = "15.13.0";
 var package_default = {
 	name: "sku",
 	version,
@@ -92,7 +92,7 @@ var package_default = {
 		"@vanilla-extract/jest-transform": "catalog:",
 		"@vanilla-extract/vite-plugin": "catalog:",
 		"@vanilla-extract/webpack-plugin": "catalog:",
-		"@vitejs/plugin-basic-ssl": "^2.1.0",
+		"@vitejs/plugin-basic-ssl": "^2.3.0",
 		"@vitejs/plugin-react": "^6.0.1",
 		"@vocab/core": "^1.6.2",
 		"@vocab/phrase": "^2.2.0",
@@ -142,7 +142,7 @@ var package_default = {
 		"node-html-parser": "^7.0.1",
 		"open": "^10.1.2",
 		"path-to-regexp": "^6.3.0",
-		"picomatch": "^4.0.3",
+		"picomatch": "^4.0.4",
 		"postcss": "^8.5.8",
 		"postcss-loader": "^8.0.0",
 		"prettier": "~3.8.0",
@@ -155,11 +155,11 @@ var package_default = {
 		"serialize-javascript": "^7.0.4",
 		"serve-handler": "^6.1.3",
 		"sort-package-json": "^3.6.0",
-		"svgo-loader": "^4.0.0",
+		"svgo-loader": "^5.0.0",
 		"terser-webpack-plugin": "^5.1.4",
 		"typescript": "~5.9.0",
 		"vite": "catalog:",
-		"vite-plugin-cjs-interop": "^2.4.0",
+		"vite-plugin-cjs-interop": "^3.0.0",
 		"vite-tsconfig-paths": "^6.1.1",
 		"webpack": "^5.105.4",
 		"webpack-bundle-analyzer": "^5.1.1",

package/dist/services/bundlerConstants.mjs

@@ -0,0 +1,5 @@
+//#region src/services/bundlerConstants.ts
+const assetsInlineLimitBytes = 1e4;
+
+//#endregion
+export { assetsInlineLimitBytes };

package/dist/services/vite/plugins/build.mjs

@@ -2,6 +2,7 @@ import { __require } from "../../../_virtual/rolldown_runtime.mjs";
 import { makePluginName } from "../helpers/makePluginName.mjs";
 import { createOutDir, renderEntryChunkName } from "../helpers/bundleConfig.mjs";
 import browserslistToEsbuild from "../helpers/browserslist-to-esbuild.mjs";
+import { assetsInlineLimitBytes } from "../../bundlerConstants.mjs";
 import { createVocabChunks } from "@vocab/vite/chunks";
 
 //#region src/services/vite/plugins/build.ts
@@ -16,6 +17,7 @@ const buildPlugin = ({ skuContext }) => {
 			build: {
 				target: browserslistToEsbuild(skuContext.supportedBrowsers),
 				assetsDir: "",
+				assetsInlineLimit: assetsInlineLimitBytes,
 				rolldownOptions: { output: { codeSplitting: { groups: [{ name: (id, ctx) => {
 					const languageChunkName = createVocabChunks(id, ctx);
 					if (languageChunkName) return languageChunkName;

package/dist/services/vocab/config.mjs

@@ -9,6 +9,7 @@ const getVocabConfig = ({ languages }) => {
 		return null;
 	}
 	const result = {
+		projectRoot: process.cwd(),
 		devLanguage: "en",
 		ignore: ["node_modules/sku/**", "node_modules/vocab/**"],
 		languages,

package/dist/services/webpack/config/utils/loaders.mjs

@@ -25,10 +25,7 @@ const makeExternalCssLoaders = (options) => {
 };
 const makeSvgLoaders = () => [{
 	loader: require.resolve("svgo-loader"),
-	options: { plugins: [{
-		name: "preset-default",
-		params: { overrides: { removeViewBox: false } }
-	}, {
+	options: { plugins: ["preset-default", {
 		name: "addAttributesToSVGElement",
 		params: { attributes: [{ focusable: false }] }
 	}] }

package/dist/webpack-plugin.mjs

@@ -1,6 +1,7 @@
 import { defaultCompilePackages, detectedCompilePackagePaths } from "./context/defaultCompilePackages.mjs";
 import { rootResolutionFileExtensions } from "./config/fileResolutionExtensions.mjs";
 import { browserslistNodeTarget } from "./config/targets.mjs";
+import { assetsInlineLimitBytes } from "./services/bundlerConstants.mjs";
 import { makeExternalCssLoaders, makeJsLoaders, makeSvgLoaders } from "./services/webpack/config/utils/loaders.mjs";
 import { resolvePackage } from "./services/webpack/config/utils/resolvePackage.mjs";
 import { IMAGE, JAVASCRIPT, SVG, TYPESCRIPT } from "./services/webpack/config/utils/index.mjs";
@@ -111,13 +112,34 @@ var SkuWebpackPlugin = class {
 				include: this.include,
 				type: "asset",
 				generator: { emit: target === "browser" },
-				parser: { dataUrlCondition: { maxSize: 1e4 } }
+				parser: { dataUrlCondition: { maxSize: assetsInlineLimitBytes } }
 			},
 			{
 				test: SVG,
 				include: this.include,
 				type: "asset/source",
 				use: makeSvgLoaders()
+			},
+			{
+				test: SVG,
+				resourceQuery: /raw/,
+				include: this.include,
+				type: "asset/source",
+				use: makeSvgLoaders()
+			},
+			{
+				test: SVG,
+				resourceQuery: /inline/,
+				include: this.include,
+				type: "asset/inline",
+				use: makeSvgLoaders()
+			},
+			{
+				test: SVG,
+				resourceQuery: /url/,
+				include: this.include,
+				type: "asset/resource",
+				use: makeSvgLoaders()
 			}
 		];
 		compiler.options.module.rules.push(...rules);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "15.12.1",
+  "version": "15.13.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./dist/index.d.mts",
   "bin": {
@@ -96,7 +96,7 @@
     "@vanilla-extract/jest-transform": "^1.1.21",
     "@vanilla-extract/vite-plugin": "^5.2.1",
     "@vanilla-extract/webpack-plugin": "^2.3.26",
-    "@vitejs/plugin-basic-ssl": "^2.1.0",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
     "@vitejs/plugin-react": "^6.0.1",
     "@vocab/core": "^1.6.2",
     "@vocab/phrase": "^2.2.0",
@@ -146,7 +146,7 @@
     "node-html-parser": "^7.0.1",
     "open": "^10.1.2",
     "path-to-regexp": "^6.3.0",
-    "picomatch": "^4.0.3",
+    "picomatch": "^4.0.4",
     "postcss": "^8.5.8",
     "postcss-loader": "^8.0.0",
     "prettier": "~3.8.0",
@@ -159,11 +159,11 @@
     "serialize-javascript": "^7.0.4",
     "serve-handler": "^6.1.3",
     "sort-package-json": "^3.6.0",
-    "svgo-loader": "^4.0.0",
+    "svgo-loader": "^5.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "typescript": "~5.9.0",
     "vite": "^8.0.1",
-    "vite-plugin-cjs-interop": "^2.4.0",
+    "vite-plugin-cjs-interop": "^3.0.0",
     "vite-tsconfig-paths": "^6.1.1",
     "webpack": "^5.105.4",
     "webpack-bundle-analyzer": "^5.1.1",