@wix/origami-transforms 0.1.40 → 0.1.41

package/dist/cssPlugins/svg.d.ts

@@ -15,3 +15,4 @@ export function viewBoxOf({ type, viewBox, bbox }: {
 }): any;
 export function scaleSvg(svg: any, info: any, preserveAspectRatio: any): any;
 export function svgDataUrl(svg: any): string;
+export function sizeSvg(svg: any, width: any, height: any): any;

package/dist/cssPlugins/{wixVectorUrls.d.ts → wixUrls.d.ts}

@@ -1,6 +1,6 @@
 /** @typedef {typeof checks[number]} Check */
 /** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
-export const wixVectorUrlsPlugin: import("../transform/types.js").CssTransformPlugin<Check>;
+export const wixUrlsPlugin: import("../transform/types.js").CssTransformPlugin<Check>;
 export type Check = (typeof checks)[number];
 declare const checks: readonly [];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -19,6 +19,7 @@
     "@babel/core": "^7.26.0",
     "@babel/parser": "^7.25.0",
     "@babel/types": "^7.25.2",
+    "@wix/sdk": "^1.21.13",
     "@wix/origami-fonts": "1.0.4",
     "@wix/origami-system-components": "1.10.10",
     "postcss": "^8.5.3",
@@ -75,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "dd0925692f100321bf7450675a2f46b1a81d620bf90847233608e7c8"
+  "falconPackageHash": "573fa6b0fb741a4bb27078f673fa0895c486a65ee23b26a1cf1127e8"
 }

package/src/cssPlugins/index.js

@@ -12,8 +12,8 @@
 // and layout move declarations out of the instance's rule. fonts appends the `@font-face` rules that load the Wix fonts
 // the stylesheet names from Wix's CDN.
 // component-position runs after mixins, so a position a mixin body sets is kept, and before layout compiles the rules.
-// shape-dividers and wix-vector-urls run last: they load the SVGs a stylesheet names from Wix's CDN in `prepare`, and
-// write them in as data URIs.
+// shape-dividers and wix-urls run last: they load the SVGs a stylesheet names from Wix's CDN in `prepare`, and write
+// them in as data URIs; wix-urls links a regular image a `wix:image` url names from Wix's media service, resized.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
 
@@ -28,7 +28,7 @@ import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
 import { spxThemeVariablesPlugin } from './spxThemeVariables/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
-import { wixVectorUrlsPlugin } from './wixVectorUrls.js'
+import { wixUrlsPlugin } from './wixUrls.js'
 
 /** @type {readonly import('../transform/types.js').CssTransformPlugin<string>[]} */
 export const cssPlugins = Object.freeze([
@@ -43,5 +43,5 @@ export const cssPlugins = Object.freeze([
     spxThemeVariablesPlugin,
     spxPlugin,
     shapeDividersPlugin,
-    wixVectorUrlsPlugin,
+    wixUrlsPlugin,
 ])

package/src/cssPlugins/shapeDividers.js

@@ -108,7 +108,7 @@ const checks = /** @type {const} */ ([])
 export const shapeDividersPlugin = {
     checks,
     name: 'shape-dividers',
-    // Last, with wix-vector-urls: it only adds rules, which no other plugin needs to see, and it reads only `--height` as
+    // Last, with wix-urls: it only adds rules, which no other plugin needs to see, and it reads only `--height` as
     // `var(--height)`, so spx converts that var's `--spx()` where it is declared.
     order: 25,
     prepare(root) {

package/src/cssPlugins/svg.js

@@ -88,3 +88,14 @@ export const svgDataUrl = svg => {
         .replace(URL_SYMBOLS, encodeURIComponent)
     return `url("data:image/svg+xml,${escaped}")`
 }
+
+const SIZE = /\s(?:width|height)="[^"]*"/g
+
+/** The SVG drawn at `width` × `height` pixels, its drawing box stretched to that size: what a cursor image, which a
+ * browser draws at the image's own size, needs. */
+export const sizeSvg = (svg, width, height) => {
+    const scaled = scaleSvg(svg, svgInfo(svg), 'none')
+    const tag = scaled.match(SVG_TAG)?.[0]
+    if (tag === undefined) return scaled
+    return scaled.replace(tag, tag.replace(SIZE, '').replace(/<svg/, `<svg width="${width}" height="${height}"`))
+}

package/src/cssPlugins/wixUrls.js

@@ -0,0 +1,90 @@
+// Rewrites the urls a value names with Wix's own url schemes, which no browser can load:
+//
+// - `url(wix:vector://v1/<id>.svg)`: vector art, Image's `--maskImage` for one. A live Wix site writes it as a data
+//   URI of the SVG stretched to its drawing's box (Thunderbolt's `replaceWixUrl` and `createSvgCssVar`); this writes
+//   the same data URI in its place.
+// - `url("wix:image://v1/<id>/<name>#originWidth=<w>&originHeight=<h>")`: an image at the size it's displayed at, a
+//   component's `cursor` for one (css-codec/style/cursor.ts). A browser draws a cursor at the image's pixel size, so
+//   the image is requested at that size: a regular image resized by Wix's media service, through @wix/sdk's media
+//   helpers, an SVG shape inlined as a data URI with that width and height (the media service doesn't resize an SVG).
+//
+// Only the url is rewritten: a cursor's hotspot and `auto` fallback stay as written. So does a url that can't be
+// rewritten, with a warning. And only the CSS this stage renders is rewritten, never the stored bundle: an https
+// cursor in style.css would be read back as plain CSS, not as the component's cursor.
+
+import { getImageUrl, getScaledToFillImageUrl } from '@wix/sdk/media'
+import { loadedSvg, loadSvgs, scaleSvg, sizeSvg, svgDataUrl, svgInfo } from './svg.js'
+
+// A quoted url runs to its closing quote: a file name encoded with encodeURIComponent keeps `(`, `)` and `'`.
+const WIX_URL = /url\(\s*(['"]?)(wix:(vector|image):\/\/v1\/(.+?))\1\s*\)/gi
+const HAS_WIX_URL = /wix:(?:vector|image):\/\//i
+
+const isSvg = id => id.endsWith('.svg')
+
+/** Every wix url in the stylesheet: its scheme, its path after `v1/`, and the url itself. */
+const wixUrls = root => {
+    const urls = []
+    root.walkDecls(declaration => {
+        for (const [, , wixUrl, scheme, path] of declaration.value.matchAll(WIX_URL)) urls.push({ scheme: scheme.toLowerCase(), path, wixUrl })
+    })
+    return urls
+}
+
+/** The ids of the SVGs the stylesheet's wix urls name. */
+const svgIdsIn = root => {
+    const ids = new Set()
+    for (const { scheme, path, wixUrl } of wixUrls(root)) {
+        if (scheme === 'vector') ids.add(path)
+        else {
+            const { id, width, height } = getImageUrl(wixUrl)
+            if (isSvg(id) && width && height) ids.add(id)
+        }
+    }
+    return ids
+}
+
+/** The `wix:vector` url `id` as a data URI, or `url` as written when its SVG isn't loaded. */
+const vectorUrl = (url, id, declaration, context) => {
+    const svg = loadedSvg(id)
+    if (svg === undefined) {
+        context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
+        return url
+    }
+    return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))
+}
+
+/** The `wix:image` url `wixUrl` as a loadable url at its size, or `url` as written when it can't be. */
+const imageUrl = (url, wixUrl, declaration, context) => {
+    const { id, width, height } = getImageUrl(wixUrl)
+    if (!width || !height) {
+        context.warn?.(declaration, `The image ${id} has no size: ${url} doesn't end in #originWidth=<w>&originHeight=<h>, so it stays as written`)
+        return url
+    }
+    if (!isSvg(id)) return `url("${getScaledToFillImageUrl(wixUrl, width, height, {})}")`
+    const svg = loadedSvg(id)
+    if (svg === undefined) {
+        context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
+        return url
+    }
+    return svgDataUrl(sizeSvg(svg, width, height))
+}
+
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
+export const wixUrlsPlugin = {
+    checks,
+    name: 'wix-urls',
+    // Last, so a url a mixin or preset copies elsewhere is rewritten wherever it ends up.
+    order: 25,
+    prepare: root => loadSvgs(svgIdsIn(root)),
+    transform(root, context) {
+        root.walkDecls(declaration => {
+            if (!HAS_WIX_URL.test(declaration.value)) return
+            declaration.value = declaration.value.replace(WIX_URL, (url, _quote, wixUrl, scheme, path) =>
+                scheme.toLowerCase() === 'vector' ? vectorUrl(url, path, declaration, context) : imageUrl(url, wixUrl, declaration, context)
+            )
+        })
+    },
+}

package/src/cssPlugins/wixVectorUrls.js

@@ -1,43 +0,0 @@
-// Inlines the vector art a value names with Wix's own url scheme, `url(wix:vector://v1/<id>.svg)`, which no browser
-// can load: Image's `--maskImage`, for one. A live Wix site writes it as a data URI of the SVG stretched to its
-// drawing's box (Thunderbolt's `replaceWixUrl` and `createSvgCssVar`); this writes the same data URI in its place.
-// An SVG that can't be loaded stays as written, with a warning.
-
-import { loadedSvg, loadSvgs, scaleSvg, svgDataUrl, svgInfo } from './svg.js'
-
-const WIX_VECTOR_URL = /url\(\s*(['"]?)wix:vector:\/\/v1\/([^'")\s]+)\1\s*\)/gi
-const HAS_WIX_VECTOR_URL = /wix:vector:\/\//i
-
-/** The ids every `wix:vector` url in the stylesheet names. */
-const idsIn = root => {
-    const ids = new Set()
-    root.walkDecls(declaration => {
-        for (const [, , id] of declaration.value.matchAll(WIX_VECTOR_URL)) ids.add(id)
-    })
-    return ids
-}
-
-const checks = /** @type {const} */ ([])
-/** @typedef {typeof checks[number]} Check */
-
-/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
-export const wixVectorUrlsPlugin = {
-    checks,
-    name: 'wix-vector-urls',
-    // Last, so a url a mixin or preset copies elsewhere is inlined wherever it ends up.
-    order: 25,
-    prepare: root => loadSvgs(idsIn(root)),
-    transform(root, context) {
-        root.walkDecls(declaration => {
-            if (!HAS_WIX_VECTOR_URL.test(declaration.value)) return
-            declaration.value = declaration.value.replace(WIX_VECTOR_URL, (url, _quote, id) => {
-                const svg = loadedSvg(id)
-                if (svg === undefined) {
-                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
-                    return url
-                }
-                return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))
-            })
-        })
-    },
-}