sdk-payments-* instead of yuno-* or Yuno-*. For example, Yuno-accordion__heading becomes sdk-payments-accordion__heading.
Nothing throws an error after the upgrade. Custom CSS and JS that targets an old name simply stops applying: a hidden element shows again, a restyled button goes back to the default style, a script that reads an element finds nothing.
These names keep working:
window.Yunoand theyuno-sdk-readyevent, which stay as aliases.- The names owned by the VTEX layer, such as
yuno-checkout-root,yuno-form-root,yuno-external-button-root,yuno-sdk-web-vtex-appand the express button classes (yuno-google-pay-button,yuno-samsung-pay-buttonand their groups).
Option 1: console snippet on the live checkout
Use this to check what the live store loads, including CSS from your theme and apps.1
Open the checkout at the payment step
Open your store’s checkout in Chrome, go to the payment step and make sure the Yuno form is visible.
2
Paste the snippet in the DevTools console
Open DevTools, go to the Console tab, paste the snippet and press Enter.
3
Read the table
The snippet prints the SDK bundle on the page, a table with every CSS rule and inline script that uses a
yuno-* name, and the count of selectors that break on 1.11. The on_1_11 column says BREAKS -> <new name> for a renamed selector, BREAKS (removed) for a name with no counterpart, and ok or not an SDK name otherwise.yuno-upgrade-check.browser.js
Option 2: scanner on your files
Use this on the files you edit:checkout6-custom.css, checkout6-custom.js, a theme folder or a VTEX IO app. It needs Node.js 18 or later.
1
Save the scanner as a file
Copy the script below into a file named
yuno-upgrade-check.mjs. It loads the rename map from docs.y.uno by itself; to run it offline, download the rename map next to it or point YUNO_RENAME_MAP at the file.yuno-upgrade-check.mjs
2
Run it on your files or folders
.css, .scss, .less, .js, .mjs, .ts, .jsx, .tsx, .html, .vue, .liquid and .hbs files and skips node_modules, dist and build folders found inside the paths you pass (a path you pass explicitly is always scanned). A merchant name that only starts like an SDK name, such as yuno-checkout-banner, is reported as not-sdk.3
Read the result
Each line shows the status, the file and line, the name and what to do. The exit code is
1 when at least one name breaks on 1.11 and 0 otherwise, so you can run it in CI.Option 3: the rename map
The rename map is the JSON file both tools read. Use it to look up a name by hand or to build your own check. It lists the 222 class and id names found in the Web SDK 1.6 bundle, plus the VTEX layer names that do not change:
A name that is not in the map is not an SDK 1.6 name. It is most likely your own id or class and needs no change.
What to do with a hit
- Renamed: replace the old name with the new one in your CSS or JS. A selector that has to work before and after the upgrade can list both names, for example
.Yuno-accordion__heading, .sdk-payments-accordion__heading. - Removed: open the checkout on Web SDK 1.11 in sandbox, find the element your rule was meant for and write the selector against the 1.11 DOM. The element may have a different structure or may no longer exist.
- Test before production: ask your technical account manager for a sandbox test of your checkout on Web SDK 1.11 with your custom files applied.
The same renames apply to any merchant on Web SDK 1.6, 1.7 or 1.8 that moves to 1.9 or later, inside or outside VTEX. The scanner and the rename map work the same way for those integrations.