fix: make sheet and edit block compatible with nx2

blocks/edit/da-assets/da-assets.js

@@ -1,4 +1,4 @@
-import { getNx, nxJS } from '../../../scripts/utils.js';
+import { getNx } from '../../../scripts/utils.js';
 import getPathDetails from '../../shared/pathDetails.js';
 import { getRepositoryConfig, getResponsiveImageConfig } from './helpers/config.js';
 import {
@@ -177,9 +177,17 @@ export function buildHandleSelection(
 }
 
 export async function openAssets() {
-  const { loadStyle } = await import(`${getNx()}${nxJS}`);
-  const { loadIms, handleSignIn } = await import(`${getNx()}/utils/ims.js`);
-  const loadScript = (await import(`${getNx()}/utils/script.js`)).default;
+  const nx = getNx();
+  const isNx2 = nx.endsWith('/nx2');
+  const { loadStyle } = await import(`${nx}/utils/utils.js`);
+  // TODO: remove the ternary and the nx v1 branch once nxver=2 is
+  // rolled out on the CDN. Kept for backward compat during the
+  // transition: nx v1 exposes loadScript at utils/script.js; nx2
+  // re-exports it from utils/utils.js.
+  const loadScript = isNx2
+    ? (await import(`${nx}/utils/utils.js`)).loadScript
+    : (await import(`${nx}/utils/script.js`)).default;
+  const { loadIms, handleSignIn } = await import(`${nx}/utils/ims.js`);
 
   const details = await loadIms();
   if (details.anonymous) handleSignIn();
@@ -195,7 +203,10 @@ export async function openAssets() {
     return;
   }
 
-  await loadStyle(import.meta.url.replace('.js', '.css'));
+  const assetSheet = await loadStyle(import.meta.url);
+  if (assetSheet && !document.adoptedStyleSheets.includes(assetSheet)) {
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, assetSheet];
+  }
   await loadScript(ASSET_SELECTOR_URL);
 
   dialog = document.createElement('dialog');

blocks/edit/da-content/da-content.css

@@ -12,7 +12,7 @@
 
   position: relative;
   flex: 0 1 auto;
-  width: var(--grid-container-width);
+  width: var(--se-grid-container-width, var(--grid-container-width));
 }
 
 da-editor {

blocks/edit/da-editor/da-editor.css

@@ -35,7 +35,7 @@
 
 .da-version-title {
   margin: 0;
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   font-size: 18px;
   font-weight: 700;
   color: #000;
@@ -52,14 +52,14 @@
 }
 
 .da-version-action-area button {
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   display: inline-block;
   font-style: normal;
   cursor: pointer;
   padding: 5px 14px;
   line-height: 18px;
   font-size: 15px;
-  border-radius: var(--s2-radius-300);
+  border-radius: var(--s2-corner-radius-800, var(--s2-radius-300));
   outline-offset: 0;
   transition: outline-offset .2s;
   text-decoration: none;
@@ -814,7 +814,7 @@ da-library.hide {
   left: -1px;
   font-size: 13px;
   background-color: rgb(250 129 0);
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   border-radius: 2px;
   font-style: normal;
   font-weight: normal;

blocks/edit/da-library/da-library.css

@@ -22,7 +22,7 @@
   }
 
   input, button {
-    font-family: var(--body-font-family);
+    font-family: var(--s2-font-family, var(--body-font-family));
     font-weight: 400;
   }
 

blocks/edit/da-library/da-library.js

@@ -15,7 +15,7 @@ import {
 } from './helpers/helpers.js';
 
 const sheet = await getSheet('/blocks/edit/da-library/da-library.css');
-const buttons = await getSheet(`${getNx()}/styles/buttons.css`);
+const buttons = await getSheet(`${getNx().replace(/\/nx2$/, '/nx')}/styles/buttons.css`);
 
 const ICONS = [
   '/blocks/edit/img/S2_Icon_ExperienceAdd_20_N.svg',

blocks/edit/da-not-found/da-not-found.js

@@ -1,8 +1,11 @@
 import '../../shared/da-dialog/da-dialog.js';
-import { getNx, getNx2Api, nxJS } from '../../../scripts/utils.js';
+import { getNx, getNx2Api } from '../../../scripts/utils.js';
 
-const { loadStyle } = await import(`${getNx()}${nxJS}`);
-await loadStyle('/blocks/edit/da-not-found/da-not-found.css');
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+const sheet = await loadStyle('/blocks/edit/da-not-found/da-not-found.css');
+if (sheet && !document.adoptedStyleSheets.includes(sheet)) {
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
 
 async function folderHasContents(folderPath) {
   try {

blocks/edit/da-palette/da-palette.css

@@ -33,7 +33,7 @@ input {
 }
 
 button {
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   display: block;
   border: 2px solid #1373e6;
   background: #1373e6;

blocks/edit/da-title/da-title.css

@@ -13,7 +13,7 @@ h1 {
 }
 
 button {
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
 }
 
 da-prepare {
@@ -52,7 +52,7 @@ da-dialog {
 }
 
 .da-title-inner {
-  max-width: var(--grid-container-width);
+  max-width: var(--se-grid-container-width, var(--grid-container-width));
   margin: 0 auto;
   display: block;
   justify-content: space-between;

blocks/edit/da-versions/da-versions.css

@@ -24,7 +24,7 @@
 }
 
 .da-versions-close-btn {
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   line-height: 32px;
   font-weight: 700;
   font-size: 20px;
@@ -173,7 +173,7 @@
 .da-version-new-input {
   border: none;
   border-bottom: 2px solid #C8C8C8;
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
   font-size: 18px;
   font-weight: 700;
   padding: 6px 0;

blocks/edit/edit.css

@@ -0,0 +1,4 @@
+/* TODO: remove once dark-mode styling is complete. */
+.light-scheme, .dark-scheme {
+  color-scheme: light;
+}

blocks/edit/edit.js

@@ -1,10 +1,14 @@
 import getPathDetails from '../shared/pathDetails.js';
 import { contentLogin, livePreviewLogin } from '../shared/utils.js';
-import { getNx2Api } from '../../scripts/utils.js';
+import { getNx, getNx2Api } from '../../scripts/utils.js';
 
 import './da-title/da-title.js';
 import './da-content/da-content.js';
 
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+const styles = await loadStyle(import.meta.url);
+document.adoptedStyleSheets.push(styles);
+
 const EMPTY_DOC = '<body><header></header><main><div></div></main><footer></footer></body>';
 const DOMPARSER = new DOMParser();
 

blocks/edit/prose/plugins/focalPointDialog.js

@@ -1,8 +1,11 @@
 import '../../../shared/da-dialog/da-dialog.js';
-import { getNx, nxJS } from '../../../../scripts/utils.js';
+import { getNx } from '../../../../scripts/utils.js';
 
-const { loadStyle } = await import(`${getNx()}${nxJS}`);
-await loadStyle('/blocks/edit/prose/plugins/focalPointDialog.css');
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+const focalSheet = await loadStyle('/blocks/edit/prose/plugins/focalPointDialog.css');
+if (focalSheet && !document.adoptedStyleSheets.includes(focalSheet)) {
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, focalSheet];
+}
 
 let currentDialog = null;
 let faceApiLoaded = false;

blocks/sheet/da-sheet-preview.css

@@ -12,7 +12,7 @@
   box-shadow: rgb(181 181 181) 0 0 20px 0;
   border-radius: 12px;
   height: 500px;
-  padding: var(--spacing-200);
+  padding: var(--s2-spacing-200, var(--spacing-200));
   overflow: scroll;
   box-sizing: border-box;
 }

blocks/sheet/da-sheet-preview.js

@@ -2,9 +2,9 @@ import { LitElement, html, nothing } from 'da-lit';
 import { getNx } from '../../scripts/utils.js';
 import getPathDetails from '../shared/pathDetails.js';
 
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
-const style = await getStyle('/blocks/sheet/da-sheet-preview.css');
+const style = await loadStyle('/blocks/sheet/da-sheet-preview.css');
 
 class DaSheetPreview extends LitElement {
   static properties = {
@@ -46,7 +46,7 @@ class DaSheetPreview extends LitElement {
   }
 
   renderValue(value) {
-    if (!(value.startsWith('/') || value.startsWith('http'))) return value;
+    if (typeof value !== 'string' || !(value.startsWith('/') || value.startsWith('http'))) return value;
     const links = value.split(',').map((val) => val.replaceAll(' ', ''));
     return links.map((link) => html`<a href="${this.getUrl(link)}" target="_blank">${link}</a> `);
   }

blocks/sheet/da-sheet-tabs.css

@@ -1,7 +1,7 @@
 :host {
   display: flex;
-  gap: var(--spacing-200);
-  margin-bottom: var(--spacing-200);
+  gap: var(--s2-spacing-200, var(--spacing-200));
+  margin-bottom: var(--s2-spacing-200, var(--spacing-200));
   flex-wrap: wrap;
 }
 
@@ -14,7 +14,7 @@ ul {
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--spacing-200);
+  gap: var(--s2-spacing-200, var(--spacing-200));
   flex-wrap: wrap;
 }
 
@@ -38,7 +38,7 @@ input {
 
 button,
 input[type="text"] {
-  font-family: var(--body-font-family);
+  font-family: var(--s2-font-family, var(--body-font-family));
 }
 
 li.active {

blocks/sheet/da-sheet-tabs.js

@@ -1,11 +1,11 @@
 import { LitElement, html, nothing } from 'da-lit';
 import { getNx } from '../../scripts/utils.js';
+import inlinesvg from '../shared/inlinesvg.js';
 import { handleSave } from './utils/utils.js';
 
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
-const { default: getSvg } = await import(`${getNx()}/utils/svg.js`);
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
-const style = await getStyle(import.meta.url);
+const style = await loadStyle(import.meta.url);
 
 const SHEET_TEMPLATE = { minDimensions: [20, 20], sheetName: 'data' };
 const ICONS = [
@@ -31,7 +31,7 @@ class DaSheetTabs extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [style];
-    getSvg({ parent: this.shadowRoot, paths: ICONS });
+    inlinesvg({ parent: this.shadowRoot, paths: ICONS });
     this._names = this.getNames();
     this.showSheet(0);
     this.getPermissions();

blocks/sheet/da-version-review.css

@@ -37,7 +37,7 @@ button {
   padding: 5px 14px;
   line-height: 18px;
   font-size: 15px;
-  border-radius: var(--s2-radius-300);
+  border-radius: var(--s2-corner-radius-800, var(--s2-radius-300));
   outline-offset: 0;
   transition: outline-offset .2s;
   text-decoration: none;

blocks/sheet/da-version-review.js

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'da-lit';
 import { getNx } from '../../scripts/utils.js';
 
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
-const style = await getStyle('/blocks/sheet/da-version-review.css');
+const style = await loadStyle('/blocks/sheet/da-version-review.css');
 
 class DaVersionReview extends LitElement {
   static properties = { data: { type: Object } };

blocks/sheet/sheet.css

@@ -1,4 +1,10 @@
 /* stylelint-disable property-no-vendor-prefix */
+
+/* TODO: remove once dark-mode styling is complete. */
+.light-scheme, .dark-scheme {
+  color-scheme: light;
+}
+
 body {
   background: rgb(250 250 250);
 }
@@ -14,7 +20,7 @@ body {
   display: flex;
   justify-content: center;
   max-width: 83.4%;
-  margin: 0 auto var(--spacing-600) auto;
+  margin: 0 auto var(--s2-spacing-600, var(--spacing-600)) auto;
 }
 
 da-versions,

blocks/sheet/sheet.js

@@ -6,9 +6,12 @@ import { getData } from './utils/index.js';
 import { staleCheck, showDaDialog, restoreVersion } from './utils/utils.js';
 import { convertSheets } from '../edit/utils/helpers.js';
 
-const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
-const style = await getStyle('/blocks/sheet/da-sheet-panes.css');
+const blockStyle = await loadStyle(import.meta.url);
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, blockStyle];
+
+const style = await loadStyle('/blocks/sheet/da-sheet-panes.css');
 
 class DaSheetPanes extends LitElement {
   static properties = {

blocks/sheet/utils/index.js

@@ -1,9 +1,23 @@
-import { getNx, getNx2Api, nxJS } from '../../../scripts/utils.js';
+import { getNx, getNx2Api } from '../../../scripts/utils.js';
 import { handleSave, staleCheck } from './utils.js';
 import '../da-sheet-tabs.js';
 
-const { loadStyle } = await import(`${getNx()}${nxJS}`);
-const loadScript = (await import(`${getNx()}/utils/script.js`)).default;
+const nx = getNx();
+const isNx2 = nx.endsWith('/nx2');
+const { loadStyle } = await import(`${nx}/utils/utils.js`);
+// TODO: remove the ternary and the nx v1 branch once nxver=2 is rolled
+// out on the CDN. Kept for backward compat during the transition:
+// nx v1 exposes loadScript at utils/script.js; nx2 re-exports it from
+// utils/utils.js.
+const loadScript = isNx2
+  ? (await import(`${nx}/utils/utils.js`)).loadScript
+  : (await import(`${nx}/utils/script.js`)).default;
+
+async function adoptStyle(href) {
+  const sheet = await loadStyle(href);
+  if (!sheet || document.adoptedStyleSheets.includes(sheet)) return;
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
 
 const SHEET_TEMPLATE = { minDimensions: [20, 20], sheetName: 'data' };
 
@@ -151,7 +165,7 @@ export async function getData(input) {
 export default async function init(el, data) {
   const suppliedData = data || await getData(el.details);
 
-  await loadStyle('/deps/jspreadsheet-ce/dist/jspreadsheet.css');
+  await adoptStyle('/deps/jspreadsheet-ce/dist/jspreadsheet.css');
   await loadScript('/deps/jspreadsheet-ce/dist/index.js');
   await loadScript('/deps/jsuites/dist/jsuites.js');
 

test/fixtures/nx/utils/utils.js

@@ -4,6 +4,8 @@ export const loadStyle = async () => {
   return sheet;
 };
 
+export const loadScript = async () => {};
+
 export const DA_ADMIN = 'https://admin.da.live';
 
 let _hashState = {};