> ## Documentation Index
> Fetch the complete documentation index at: https://docs.y.uno/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK 1.11 upgrade check for custom CSS and JS

> Find custom checkout CSS and JS that targets the old yuno-* class and id names before the Yuno checkout inside VTEX moves from Web SDK 1.6 to 1.11.

The Yuno checkout inside VTEX moves from Web SDK 1.6 to Web SDK 1.11. Since Web SDK 1.9, every class and id the SDK renders is named `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.Yuno` and the `yuno-sdk-ready` event, 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-app` and the express button classes (`yuno-google-pay-button`, `yuno-samsung-pay-button` and their groups).

Use one of the three checks below before the upgrade reaches your store.

## 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.

```js yuno-upgrade-check.browser.js theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
/* Paste in the DevTools console of the live checkout page (payment step open). Reports the SDK
   version on the page and every same-origin CSS rule / inline script that targets a yuno-* name. */
(async () => {
  const MAP_URL = 'https://docs.y.uno/files/validators/web-sdk-1.11-upgrade-check/rename-map.json';
  let map = null;
  try { const r = await fetch(MAP_URL); if (r.ok) map = await r.json(); } catch {}
  if (!map || !map.names) { console.error('[yuno-check] could not load the rename map from', MAP_URL, ': no verdicts given. Check the network tab (CSP, offline) and run again.'); return; }
  const src = [...document.scripts].map(s => s.src).find(s => /sdk-web[^/]*\.y\.uno\/v\d/.test(s)) || '';
  console.log('[yuno-check] SDK bundle on page:', src || 'none found', '| window.Yuno:', !!window.Yuno, '| SdkPayments:', !!window.SdkPayments);
  const hits = [];
  for (const ss of document.styleSheets) { let rules; try { rules = ss.cssRules; } catch { console.warn('[yuno-check] cannot read (cross-origin), check by hand:', ss.href); continue; }
    for (const r of rules) { const t = r.selectorText || r.cssText; for (const m of (t || '').matchAll(/\b[yY]uno-[A-Za-z0-9_-]+/g)) hits.push({ where: ss.href || 'inline <style>', name: m[0], rule: r.selectorText }); } }
  for (const s of document.scripts) if (!s.src) for (const m of s.textContent.matchAll(/\b[yY]uno-[A-Za-z0-9_-]+/g)) hits.push({ where: 'inline <script>', name: m[0] });
  const names = Object.keys(map.names);
  const verdict = n => { const base = map.names[n] ? n : names.filter(k => n.startsWith(k) && /^(__|--)/.test(n.slice(k.length))).sort((a, b) => b.length - a.length)[0]; const e = base && map.names[base]; return !e ? 'not an SDK name' : e.status === 'renamed' ? 'BREAKS -> ' + n.replace(base, e.to) : e.status === 'removed' ? 'BREAKS (removed)' : 'ok'; };
  console.table(hits.map(h => ({ ...h, on_1_11: verdict(h.name) })));
  console.log('[yuno-check]', hits.filter(h => verdict(h.name).startsWith('BREAKS')).length, 'selectors break on SDK 1.11', '(', hits.length, 'yuno-looking names found )');
})();
```

The snippet fetches the rename map from docs.y.uno, so the console needs network access to that host. If the map cannot be loaded it stops with an error instead of reporting a clean result.

The snippet cannot read stylesheets served from another origin. It lists each one as a warning, so check those files by hand or with the scanner below.

## 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](https://docs.y.uno/files/validators/web-sdk-1.11-upgrade-check/rename-map.json) next to it or point `YUNO_RENAME_MAP` at the file.

```js yuno-upgrade-check.mjs theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
#!/usr/bin/env node
// Yuno Web SDK 1.6 -> 1.11 pre-upgrade check for merchant custom CSS/JS.
// Usage: node yuno-upgrade-check.mjs <file-or-dir> [...more]
// Scans .css .scss .less .js .mjs .ts .jsx .tsx .html .vue .liquid .hbs for yuno-* / Yuno-* names and
// reports, per hit, what happens to that name on SDK 1.11. Exit code 1 when something breaks.
// The rename map is read from ./rename-map.json next to this script when present, or from
// YUNO_RENAME_MAP, or fetched from docs.y.uno.
import fs from 'node:fs'; import path from 'node:path';
const MAP_URL = 'https://docs.y.uno/files/validators/web-sdk-1.11-upgrade-check/rename-map.json';
async function loadMap() {
  const local = process.env.YUNO_RENAME_MAP || new URL('./rename-map.json', import.meta.url);
  try { return JSON.parse(fs.readFileSync(local, 'utf8')); } catch {}
  const res = await fetch(MAP_URL);
  if (!res.ok) throw new Error(`cannot load the rename map (${res.status}) from ${MAP_URL}; download it next to this script`);
  return res.json();
}
const MAP = await loadMap();
const EXT = new Set(['.css','.scss','.less','.js','.mjs','.ts','.jsx','.tsx','.html','.vue','.liquid','.hbs']);
const SKIP_DIRS = new Set(['node_modules', '.git', 'dist', 'build']);
const files = [];
const walk = (p) => {
  const st = fs.statSync(p);
  if (st.isDirectory()) {
    for (const f of fs.readdirSync(p)) {
      if (SKIP_DIRS.has(f)) continue; // skip only folders inside the argument, never the argument itself
      walk(path.join(p, f));
    }
  } else if (EXT.has(path.extname(p))) files.push(p);
};
process.argv.slice(2).forEach(a => walk(a));
const NAMES = Object.keys(MAP.names);
const lookup = name => {
  if (MAP.names[name]) return [name, MAP.names[name]];
  // BEM modifier or element of a known block: yuno-status__title--small -> yuno-status__title
  const base = NAMES.filter(k => name.startsWith(k) && /^(__|--)/.test(name.slice(k.length))).sort((a, b) => b.length - a.length)[0];
  return base ? [base, MAP.names[base]] : [null, null];
};
const rows = []; const seen = new Set();
for (const f of files) {
  fs.readFileSync(f, 'utf8').split('\n').forEach((line, i) => {
    for (const m of line.matchAll(/\b[yY]uno-[A-Za-z0-9_-]+/g)) {
      const name = m[0]; const [base, entry] = lookup(name);
      let status, action;
      if (!entry) { status = 'not-sdk'; action = 'not a Yuno SDK 1.6 name: likely your own id/class, no change'; }
      else if (entry.status === 'renamed') { status = 'BREAKS'; action = `rename to ${name.replace(base, entry.to)}`; }
      else if (entry.status === 'removed') { status = 'BREAKS'; action = 'element no longer exists under this name in 1.11: re-check the selector on the 1.11 DOM'; }
      else if (entry.status === 'vtex-layer') { status = 'ok'; action = 'VTEX layer name, unchanged'; }
      else { status = 'ok'; action = 'unchanged (alias kept)'; }
      if (entry?.note && status === 'BREAKS') action += ` (${entry.note})`;
      const key = `${f}:${i + 1}:${name}`; if (seen.has(key)) continue; seen.add(key);
      rows.push({ file: f, line: i + 1, name, status, action });
    }
  });
}
const breaks = rows.filter(r => r.status === 'BREAKS');
for (const r of rows) console.log(`${r.status.padEnd(7)} ${r.file}:${r.line}  ${r.name}  ->  ${r.action}`);
console.log(`\n${files.length} files scanned, ${rows.length} Yuno-looking names, ${breaks.length} break on 1.11.`);
console.log(breaks.length ? 'Fix the BREAKS lines before the upgrade, then test on sandbox (SDK 1.11).' : 'Nothing here depends on the old names.');
process.exit(breaks.length ? 1 : 0);
```

**2. Run it on your files or folders**

```bash theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
node yuno-upgrade-check.mjs checkout6-custom.css checkout6-custom.js my-theme
```

It scans `.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.

Sample output:

```text theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
ok      store/checkout6-custom.css:1  yuno-checkout-root  ->  VTEX layer name, unchanged
BREAKS  store/checkout6-custom.css:2  Yuno-accordion__heading  ->  rename to sdk-payments-accordion__heading
BREAKS  store/checkout6-custom.css:3  Yuno-apple-pay__button  ->  element no longer exists under this name in 1.11: re-check the selector on the 1.11 DOM
not-sdk store/checkout6-custom.css:4  yuno-my-banner  ->  not a Yuno SDK 1.6 name: likely your own id/class, no change

1 files scanned, 4 Yuno-looking names, 2 break on 1.11.
Fix the BREAKS lines before the upgrade, then test on sandbox (SDK 1.11).
```

## Option 3: the rename map

The [rename map](https://docs.y.uno/files/validators/web-sdk-1.11-upgrade-check/rename-map.json) 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:

| Status | Count | Meaning |
| - | - | - |
| `renamed` | 192 | The name exists in 1.11 as `sdk-payments-*`. The `to` field gives the new name. |
| `removed` | 23 | No element with a same-named counterpart exists in 1.11. |
| `unchanged` | 7 | The name still exists in 1.11. |
| `vtex-layer` | 45 | Owned by the VTEX layer. It does 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

1. **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`.
2. **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.
3. **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.

> [!NOTE]
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.