sku 15.12.2 → 15.13.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # 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

package/dist/config/storybook.cjs

@@ -1981,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 {
@@ -2084,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);
@@ -2200,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.2";
+var version = "15.13.0";
 var package_default = {
 	name: "sku",
 	version,

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/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.2",
+  "version": "15.13.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./dist/index.d.mts",
   "bin": {
@@ -200,8 +200,8 @@
     "react-dom": "^19.1.0",
     "type-fest": "^5.0.0",
     "vitest": "^4.1.0",
-    "@sku-private/utils": "0.0.0",
-    "@sku-private/tsdown": "0.0.0"
+    "@sku-private/tsdown": "0.0.0",
+    "@sku-private/utils": "0.0.0"
   },
   "scripts": {
     "postinstall": "node ./scripts/postinstall.js",