@wix/origami-transforms 0.1.47 → 0.1.49

package/dist/cssPlugins/spx/calls.d.ts

@@ -1,4 +1,6 @@
-export const THEME_SPX: "--theme-spx(";
+export const SPX: "--spx(";
+export const LAYOUT_SPX: "--layout-spx(";
 export function lowerCalls(declaration: import("postcss").Declaration, resolve: (value: number) => string, invalidCall: () => Error): void;
-export function lowerThemeCalls(declaration: import("postcss").Declaration, resolve: (value: number, themeRefWidth: number) => string, invalidCall: () => Error): void;
-export function toThemeCalls(value: string, themeRefWidth: number): string;
+export function lowerLayoutCalls(declaration: import("postcss").Declaration, resolve: (value: number, layoutRefWidth: number) => string, invalidCall: () => Error): void;
+export function toLayoutCalls(value: string, layoutRefWidth: string | number): string;
+export function toFixedCalls(value: string): string;

package/dist/cssPlugins/spxRuleRefWidth/index.d.ts

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

package/dist/cssPlugins/spxRuleRefWidth/utils/rewriteUtils.d.ts

@@ -0,0 +1 @@
+export function resolveLayoutCalls(value: string, settings: import("./settingsUtils.js").SpxSettings): string;

package/dist/cssPlugins/spxRuleRefWidth/utils/settingsUtils.d.ts

@@ -0,0 +1,7 @@
+export function enclosingRuleOf(node: import("postcss").Node): import("postcss").Rule | undefined;
+export function readSpxSettings(rule: import("postcss").Rule): SpxSettings;
+export function hasValidSettings({ refWidth, resolver }: SpxSettings): boolean;
+export type SpxSettings = {
+    refWidth: string | undefined;
+    resolver: string | undefined;
+};

package/dist/cssPlugins/spxRuleRefWidth/utils/sourceUtils.d.ts

@@ -0,0 +1 @@
+export function isOwnRuleSource(node: import("postcss").Node, context: import("../../../transform/types.js").TransformContext): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -24,7 +24,7 @@
     "@wix/origami-system-components": "1.10.12",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
-    "@wix/origami-bi": "0.17.0"
+    "@wix/origami-bi": "0.18.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -76,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "3d57c6f49d1ce052c6e91ff5ef6e908c8eb281127ecbdb7fd3ea9924"
+  "falconPackageHash": "4250ddaa493ddd10cf58d5397ca1f88ce598f45125e41df45c22d2aa"
 }

package/src/cssPlugins/index.js

@@ -11,6 +11,8 @@
 // authored one. custom-enums runs after mixins as well, so an enum a mixin body sets is resolved, and before presets
 // 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.
+// spx-rule-ref-width runs after mixins and custom enums and before presets and layout, so each layout.css and style.css
+// rule's `--spx()` is fixed against that rule's own settings before declarations move to wrappers.
 // component-position runs after mixins, so a position a mixin body sets is kept, and before layout compiles the rules.
 // 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.
@@ -26,6 +28,7 @@ import { presetsPlugin } from './presets.js'
 import { shapeDividersPlugin } from './shapeDividers.js'
 import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
+import { spxRuleRefWidthPlugin } from './spxRuleRefWidth/index.js'
 import { spxThemeVariablesPlugin } from './spxThemeVariables/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
 import { wixUrlsPlugin } from './wixUrls.js'
@@ -37,6 +40,7 @@ export const cssPlugins = Object.freeze([
     mixinsPlugin,
     customEnumsPlugin,
     stackChildrenPlugin,
+    spxRuleRefWidthPlugin,
     presetsPlugin,
     componentPositionPlugin,
     layoutPlugin,

package/src/cssPlugins/spx/README.md

@@ -20,9 +20,10 @@ The desktop border declaration still applies on mobile. At a 390px viewport, it
 be 4px again because its reference width is now 390. If the build replaces `4 / 1280`
 with a constant, the mobile reference-width override can no longer affect that border.
 
-This applies to regular component styles as well as container layouts. There is one
-SPX conversion path for all declarations. Layout first moves content and overflow
-styles onto their runtime wrappers; this plugin then converts every `--spx(number)`.
+This applies to any stylesheet except a site's own `layout.css` and `style.css`, whose rules
+each use their own settings (see [Layout calls](#layout-calls)). There is one SPX conversion
+path for all declarations. Layout first moves content and overflow styles onto their runtime
+wrappers; this plugin then converts every `--spx(number)`.
 
 ## What the browser calculates
 
@@ -67,18 +68,27 @@ SPX expression resolves where the variable is declared; inheriting the variable
 re-evaluate it using a child's settings. So `../spxThemeVariables/` copies the SPX-dependent theme
 variables onto capped containers.
 
-## Theme calls
+## Layout calls
 
-`../spxThemeVariables/` rewrites each theme `--spx(N)` as `--theme-spx(N, W)`, W being the theme's
-reference width; authors never write it. It compiles like `--spx(N)` but divides by the literal W
-instead of `var(--spx-ref-width, 1280)`, so a copied theme value keeps its theme size while still
-following the section's cap and scaling factor. N must be a literal number and W a positive one.
+`--layout-spx(N, W)` is internal; authors never write it. It compiles like `--spx(N)` but divides by the literal W
+instead of `var(--spx-ref-width, 1280)`, with the resolver switch fixed at 1. N must be a literal number and W a
+positive one. Two plugins write it:
+
+- **Theme:** `../spxThemeVariables/` rewrites each theme `--spx(N)` with W the theme's reference width, so a copied
+  theme value keeps its theme size while still following the section's cap and scaling factor. The theme `:root` is
+  `scale`, so the fixed switch matches its value there.
+- **Own rule:** in a site-owned `layout.css` or `style.css`, `../spxRuleRefWidth/` settles each `--spx(N)` at build
+  time from the settings of its own rule (the rule holding the `@origami-target`, for target lines), as the live site
+  does. A value a mixin brings from another stylesheet keeps the cascade. A scale rule gets W from its
+  `--spx-ref-width` or 1280. A rule with no settings, or set to `fixed`, gets `Npx`. A rule with an invalid setting,
+  or a reference width that isn't a whole number, keeps its `--spx()` calls, so this plugin reports the setting's
+  check or compiles them as usual.
 
 ## Files and boundaries
 
 - `index.js` removes the SPX function definition and visits declarations.
 - `cascade.js` translates resolver settings and generates browser-evaluated expressions.
-- `calls.js` parses literal numeric `--spx()` and `--theme-spx()` calls and rejects unsupported arguments.
+- `calls.js` parses literal numeric `--spx()` and `--layout-spx()` calls and rejects unsupported arguments.
 
 Reference widths must be positive numbers and resolver modes must be `scale` or `fixed`.
 Stoppers and `--content-max-width` are not validated.

package/src/cssPlugins/spx/calls.js

@@ -1,8 +1,9 @@
 import { fail } from './index.js'
 const CALL = /--spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*\)/g
-const THEME_CALL = /--theme-spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*,\s*(\d+\.?\d*|\.\d+)\s*\)/g
+const LAYOUT_CALL = /--layout-spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*,\s*(\d+\.?\d*|\.\d+)\s*\)/g
 
-export const THEME_SPX = '--theme-spx('
+export const SPX = '--spx('
+export const LAYOUT_SPX = '--layout-spx('
 
 /** Replace literal SPX calls, reporting unsupported arguments at their declaration.
  * @param {import('postcss').Declaration} declaration
@@ -10,30 +11,39 @@ export const THEME_SPX = '--theme-spx('
  * @param {() => Error} invalidCall
  */
 export const lowerCalls = (declaration, resolve, invalidCall) => {
-    if (!declaration.value.includes('--spx(')) return
+    if (!declaration.value.includes(SPX)) return
     declaration.value = declaration.value.replace(CALL, (_, literal) => resolve(Number(literal)))
-    if (declaration.value.includes('--spx(')) throw fail('non_literal_spx_argument', invalidCall())
+    if (declaration.value.includes(SPX)) throw fail('non_literal_spx_argument', invalidCall())
 }
 
 /**
  * @param {import('postcss').Declaration} declaration
- * @param {(value: number, themeRefWidth: number) => string} resolve
+ * @param {(value: number, layoutRefWidth: number) => string} resolve
  * @param {() => Error} invalidCall
  */
-export const lowerThemeCalls = (declaration, resolve, invalidCall) => {
-    if (!declaration.value.includes(THEME_SPX)) return
-    declaration.value = declaration.value.replace(THEME_CALL, (call, literal, themeRefWidthLiteral) => {
-        const themeRefWidth = Number(themeRefWidthLiteral)
-        if (themeRefWidth <= 0) return call
+export const lowerLayoutCalls = (declaration, resolve, invalidCall) => {
+    if (!declaration.value.includes(LAYOUT_SPX)) return
+    declaration.value = declaration.value.replace(LAYOUT_CALL, (call, literal, refWidthLiteral) => {
+        const refWidth = Number(refWidthLiteral)
+        if (refWidth <= 0) return call
         const number = Number(literal)
-        return resolve(number, themeRefWidth)
+        return resolve(number, refWidth)
     })
-    if (declaration.value.includes(THEME_SPX)) throw invalidCall()
+    if (declaration.value.includes(LAYOUT_SPX)) throw invalidCall()
 }
 
 /**
  * @param {string} value
- * @param {number} themeRefWidth
+ * @param {string | number} layoutRefWidth
  */
-export const toThemeCalls = (value, themeRefWidth) =>
-    value.replace(CALL, (_, literal) => `--theme-spx(${literal}, ${themeRefWidth})`)
+export const toLayoutCalls = (value, layoutRefWidth) =>
+    value.replace(CALL, (_, literal) => `--layout-spx(${literal}, ${layoutRefWidth})`)
+
+/** @param {string} literal */
+const toPixels = literal => {
+    const number = Number(literal)
+    return `${number}px`
+}
+
+/** @param {string} value */
+export const toFixedCalls = value => value.replace(CALL, (_, literal) => toPixels(literal))

package/src/cssPlugins/spx/cascade.js

@@ -1,31 +1,36 @@
 import { fail } from './index.js'
-import { lowerCalls, lowerThemeCalls } from './calls.js'
+import { lowerCalls, lowerLayoutCalls } from './calls.js'
 
 // Keep arithmetic at the call site: an inherited derived custom property would already
 // be computed against its parent's settings. Only the numeric resolver switch inherits.
 const SCALE = 'var(--origami-spx-scale, 1)'
-const FLOOR = `calc(0.5px * ${SCALE})`
+const LAYOUT_SCALE = '1'
+/** @param {string} scale */
+const floorAt = scale => `calc(0.5px * ${scale})`
+const FLOOR = floorAt(SCALE)
 /**
  * @param {string} cap
  * @param {string} [divisor]
+ * @param {string} [scale]
  */
-const unitCappedAt = (cap, divisor = 'var(--spx-ref-width, 1280)') =>
-    `(${SCALE} * (clamp(var(--spx-stopper-min, 0px), var(--scaling-factor, 100vw), min(var(--spx-stopper-max, 99999px), ${cap})) - var(--scrollbar-width, 0px)) / ${divisor} + (1 - ${SCALE}) * 1px)`
+const unitCappedAt = (cap, divisor = 'var(--spx-ref-width, 1280)', scale = SCALE) =>
+    `(${scale} * (clamp(var(--spx-stopper-min, 0px), var(--scaling-factor, 100vw), min(var(--spx-stopper-max, 99999px), ${cap})) - var(--scrollbar-width, 0px)) / ${divisor} + (1 - ${scale}) * 1px)`
 const UNIT = unitCappedAt('var(--content-max-width, 99999px)')
 const UNCAPPED_UNIT = unitCappedAt('99999px')
 
 /** @param {import('postcss').Declaration} declaration */
-const compileThemeCalls = declaration => {
+const compileLayoutCalls = declaration => {
     const cap = declaration.prop === '--content-max-width' ? '99999px' : 'var(--content-max-width, 99999px)'
-    lowerThemeCalls(
+    const floor = floorAt(LAYOUT_SCALE)
+    lowerLayoutCalls(
         declaration,
-        (number, themeRefWidth) => {
+        (number, refWidth) => {
             if (number === 0) return '0px'
-            const divisor = String(themeRefWidth)
-            const unit = unitCappedAt(cap, divisor)
-            return number < 0 ? `min(calc(-1 * ${FLOOR}), ${number} * ${unit})` : `max(${FLOOR}, ${number} * ${unit})`
+            const divisor = String(refWidth)
+            const unit = unitCappedAt(cap, divisor, LAYOUT_SCALE)
+            return number < 0 ? `min(calc(-1 * ${floor}), ${number} * ${unit})` : `max(${floor}, ${number} * ${unit})`
         },
-        () => declaration.error('SPX calls --theme-spx() without a literal number and a positive literal theme reference width')
+        () => declaration.error('SPX calls --layout-spx() without a literal number and a positive literal reference width')
     )
 }
 
@@ -53,7 +58,7 @@ export const compileCascadeDeclaration = declaration => {
     ) {
         throw fail('invalid_spx_reference_width', declaration.error('SPX reference width must be positive'))
     }
-    compileThemeCalls(declaration)
+    compileLayoutCalls(declaration)
     const unit = declaration.prop === '--content-max-width' ? UNCAPPED_UNIT : UNIT
     lowerCalls(
         declaration,

package/src/cssPlugins/spx/index.js

@@ -1,3 +1,4 @@
+import { SPX } from './calls.js'
 import { compileCascadeDeclaration } from './cascade.js'
 
 export const checks = /** @type {const} */ (['unsupported_spx_resolver', 'invalid_spx_reference_width', 'non_literal_spx_argument'])
@@ -13,7 +14,7 @@ export const spxPlugin = {
     order: 20,
     transform(root) {
         root.walkAtRules('function', atRule => {
-            if (atRule.params.trimStart().startsWith('--spx(')) atRule.remove()
+            if (atRule.params.trimStart().startsWith(SPX)) atRule.remove()
         })
         root.walkDecls(compileCascadeDeclaration)
     },

package/src/cssPlugins/spxRuleRefWidth/index.js

@@ -0,0 +1,30 @@
+import { SPX } from '../spx/calls.js'
+import { resolveLayoutCalls } from './utils/rewriteUtils.js'
+import { enclosingRuleOf, hasValidSettings, readSpxSettings } from './utils/settingsUtils.js'
+import { isOwnRuleSource } from './utils/sourceUtils.js'
+
+/**
+ * @param {import('postcss').Declaration} declaration
+ * @param {import('../../transform/types.js').TransformContext} context
+ */
+const rewriteDeclaration = (declaration, context) => {
+    if (!declaration.value.includes(SPX) || !isOwnRuleSource(declaration, context)) return
+    const rule = enclosingRuleOf(declaration)
+    if (rule === undefined) return
+    const settings = readSpxSettings(rule)
+    if (!hasValidSettings(settings)) return
+    declaration.value = resolveLayoutCalls(declaration.value, settings)
+}
+
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../../transform/types.js').CssTransformPlugin<Check>} */
+export const spxRuleRefWidthPlugin = {
+    checks,
+    name: 'spx-rule-ref-width',
+    order: 12,
+    transform(root, context) {
+        root.walkDecls(declaration => rewriteDeclaration(declaration, context))
+    },
+}

package/src/cssPlugins/spxRuleRefWidth/utils/rewriteUtils.js

@@ -0,0 +1,23 @@
+import { toFixedCalls, toLayoutCalls } from '../../spx/calls.js'
+
+const DEFAULT_REF_WIDTH = '1280'
+const DEFAULT_RESOLVER = 'scale'
+
+/** @param {import('./settingsUtils.js').SpxSettings} settings */
+const resolveSpxAs = ({ refWidth, resolver }) => resolver ?? (refWidth === undefined ? 'fixed' : DEFAULT_RESOLVER)
+
+/**
+ * @param {string} value
+ * @param {import('./settingsUtils.js').SpxSettings} settings
+ */
+const toScaledCalls = (value, { refWidth = DEFAULT_REF_WIDTH }) => toLayoutCalls(value, refWidth)
+
+/**
+ * @param {string} value
+ * @param {import('./settingsUtils.js').SpxSettings} settings
+ */
+export const resolveLayoutCalls = (value, settings) => {
+    const resolver = resolveSpxAs(settings)
+    if (resolver === 'fixed') return toFixedCalls(value)
+    return toScaledCalls(value, settings)
+}

package/src/cssPlugins/spxRuleRefWidth/utils/settingsUtils.js

@@ -0,0 +1,47 @@
+/**
+ * @typedef {object} SpxSettings
+ * @property {string | undefined} refWidth
+ * @property {string | undefined} resolver
+ */
+
+/**
+ * @param {import('postcss').Node} node
+ * @returns {import('postcss').Rule | undefined}
+ */
+export const enclosingRuleOf = node => {
+    let current = node.parent
+    while (current !== undefined && current.type !== 'rule') current = current.parent
+    return current?.type === 'rule' ? /** @type {import('postcss').Rule} */ (current) : undefined
+}
+
+/**
+ * @param {import('postcss').Rule} rule
+ * @param {string} prop
+ */
+const lastValueOf = (rule, prop) => {
+    const declarations = rule.nodes.filter(
+        /** @returns {node is import('postcss').Declaration} */ node => node.type === 'decl' && node.prop === prop
+    )
+    return declarations.at(-1)?.value.trim()
+}
+
+/**
+ * @param {import('postcss').Rule} rule
+ * @returns {SpxSettings}
+ */
+export const readSpxSettings = rule => {
+    const refWidth = lastValueOf(rule, '--spx-ref-width')
+    const resolver = lastValueOf(rule, '--spx-resolver-type')
+    return { refWidth, resolver }
+}
+
+const WHOLE_NUMBER = /^\d+$/
+
+/** @param {string | undefined} refWidth */
+const isValidRefWidth = refWidth => refWidth === undefined || (WHOLE_NUMBER.test(refWidth) && Number(refWidth) > 0)
+
+/** @param {string | undefined} resolver */
+const isValidResolver = resolver => resolver === undefined || resolver === 'scale' || resolver === 'fixed'
+
+/** @param {SpxSettings} settings */
+export const hasValidSettings = ({ refWidth, resolver }) => isValidRefWidth(refWidth) && isValidResolver(resolver)

package/src/cssPlugins/spxRuleRefWidth/utils/sourceUtils.js

@@ -0,0 +1,18 @@
+import { basename } from 'node:path'
+import { relativeToSite } from '../../../transform/relativeToSite.js'
+
+const OWN_RULE_FILES = new Set(['layout.css', 'style.css'])
+
+/** @param {string} relative */
+const isDependency = relative => relative.split(/[\\/]/).includes('node_modules')
+
+/**
+ * @param {import('postcss').Node} node
+ * @param {import('../../../transform/types.js').TransformContext} context
+ */
+export const isOwnRuleSource = (node, context) => {
+    const file = node.source?.input.file
+    if (!file || !OWN_RULE_FILES.has(basename(file))) return false
+    const relative = context.layout ? relativeToSite(context.layout.root, file) : file
+    return relative !== undefined && !isDependency(relative)
+}

package/src/cssPlugins/spxThemeVariables/README.md

@@ -5,10 +5,10 @@ A custom property resolves `--spx()` where it is declared, so theme variables on
 - **Theme:** the `:root` rules from `src/global/themes/theme.css`, at the top level or under one `(max-width: Npx)` `@media`. Theme variables are their custom properties except the SPX settings. Without a site folder in the context, the plugin does nothing.
 - **Cascade:** at a breakpoint, the theme value of a variable is the one CSS gives `:root` there: among desktop, that breakpoint and every wider one, the declaration that comes last in the stylesheet wins, whatever the widths. So a wider block written after a narrower one overrides it.
 - **Restate:** a theme variable holding `--spx(` that a breakpoint inherits, through the cascade, from a breakpoint with another `--spx-ref-width` is re-declared on that breakpoint's last theme `:root`, widest breakpoint first, so it is tagged with the breakpoint's own reference width, like the `:root` value it had before. When a narrower breakpoint that sets the variable comes before that `:root`, the restatement goes in a new `:root` block of that breakpoint placed just before the narrower one, so the narrower value still wins. `var()` readers are not restated, and neither is a value written after that last `:root`, since the restatement would lose to it.
-- **Tag:** each theme `--spx(N)` becomes `--theme-spx(N, W)`, W being that breakpoint's `--spx-ref-width`, so a section's own reference width never changes it.
+- **Tag:** each theme `--spx(N)` becomes `--layout-spx(N, W)`, W being that breakpoint's `--spx-ref-width`, so a section's own reference width never changes it.
 - **Capped:** a section whose desktop rule sets `--content-max-width`.
-- **Copied:** desktop copies every SPX-dependent variable (it holds `--theme-spx(` or reads one through `var()`, at any depth), except `--content-max-width`. Each breakpoint copies the variables whose cascade winner it sets that are SPX-dependent or override a wider copy, plus inherited ones that first become SPX-dependent there. Copies are written widest first, so each breakpoint copy holds the value `:root` has there.
+- **Copied:** desktop copies every SPX-dependent variable (it holds `--layout-spx(` or reads one through `var()`, at any depth), except `--content-max-width`. Each breakpoint copies the variables whose cascade winner it sets that are SPX-dependent or override a wider copy, plus inherited ones that first become SPX-dependent there. Copies are written widest first, so each breakpoint copy holds the value `:root` has there.
 - **Written:** one `@layer origami-theme-copies` at the top, after any `@charset` and `@import`, so it is the lowest layer: any section rule wins, and a copy still beats the value inherited from `:root`. Inside it, one `:where(#a, #b, …)` rule for desktop, then one `@media` per breakpoint, widest first. Sections inside `@scope`, `@supports` or `@container` get their own list, wrapped in a copy of those wrapping at-rules, so the copies keep the section's condition. Copies drop `!important`. Nothing is written without copies or capped sections.
-- **Order:** 16, after layout (15) and before SPX (20), which compiles `--theme-spx()`.
+- **Order:** 16, after layout (15) and before SPX (20), which compiles `--layout-spx()`.
 
 Code: `index.js` runs `stylesheetUtils.js` (scan), `themeUtils.js` (read), `copyPlanUtils.js` (breakpoint order, shared by restate and plan), `restateUtils.js`, `themeUtils.js` (tag), `sectionUtils.js` (with `wrappingAtRuleUtils.js`), `copyPlanUtils.js`, then `writeUtils.js`. Tests: `test/spxThemeVariables.spec.js`.

package/src/cssPlugins/spxThemeVariables/utils/copyPlanUtils.js

@@ -1,4 +1,4 @@
-import { THEME_SPX } from '../../spx/calls.js'
+import { LAYOUT_SPX } from '../../spx/calls.js'
 import { cascadeAt, inheritedBreakpointsOf, themeBreakpointsOf, widestFirst } from './breakpointUtils.js'
 import { DESKTOP } from './cssTreeUtils.js'
 import { CONTENT_MAX_WIDTH } from './sectionUtils.js'
@@ -77,7 +77,7 @@ const collectReaders = (references, seeds) => {
 
 /** @param {VariableMap} variables */
 const findScaleDependent = variables => {
-    const scaledVariables = [...variables].filter(([, declaration]) => declaration.value.includes(THEME_SPX))
+    const scaledVariables = [...variables].filter(([, declaration]) => declaration.value.includes(LAYOUT_SPX))
     const scaledProps = scaledVariables.map(([prop]) => prop)
     const scaled = new Set(scaledProps)
     const references = buildReferenceMap(variables)

package/src/cssPlugins/spxThemeVariables/utils/restateUtils.js

@@ -1,4 +1,5 @@
 import { cascadeAt, maxWidthOf, refWidthAt } from './breakpointUtils.js'
+import { SPX } from '../../spx/calls.js'
 import { isAtRule } from './cssTreeUtils.js'
 
 /** @typedef {import('./breakpointUtils.js').CascadedVariable} CascadedVariable */
@@ -12,8 +13,6 @@ import { isAtRule } from './cssTreeUtils.js'
  * @property {number} refWidth
  */
 
-const SPX_CALL = '--spx('
-
 /**
  * @param {ThemeVariables} theme
  * @param {string} breakpoint
@@ -31,7 +30,7 @@ const lastIndexAt = ({ rules }, breakpoint) => {
 const needsRestate = (theme, target, [, source]) => {
     if (source.breakpoint === target.breakpoint) return false
     if (source.index > target.index) return false
-    if (!source.declaration.value.includes(SPX_CALL)) return false
+    if (!source.declaration.value.includes(SPX)) return false
     const sourceRefWidth = refWidthAt(theme, source.breakpoint)
     return sourceRefWidth !== target.refWidth
 }

package/src/cssPlugins/spxThemeVariables/utils/themeUtils.js

@@ -1,4 +1,4 @@
-import { toThemeCalls } from '../../spx/calls.js'
+import { toLayoutCalls } from '../../spx/calls.js'
 import { refWidthAt, resolveRefWidths } from './breakpointUtils.js'
 import { DESKTOP, isCustomProperty } from './cssTreeUtils.js'
 
@@ -85,6 +85,6 @@ export const tagThemeVariables = (themeRules, theme) => {
     for (const { breakpoint, declarations } of themeRules) {
         const refWidth = refWidthAt(theme, breakpoint)
         const variables = declarations.filter(({ prop }) => isThemeVariable(prop))
-        for (const declaration of variables) declaration.value = toThemeCalls(declaration.value, refWidth)
+        for (const declaration of variables) declaration.value = toLayoutCalls(declaration.value, refWidth)
     }
 }