feat: develop brand-openedx locally with "tutor dev" + fix legacy MFE theme CSS URLs

[arbirali]

Description

This PR makes it possible to work on a local brand-openedx checkout and see style changes live in tutor dev, and fixes the theme CSS URLs used by the legacy MFEs.

1. Local brand-openedx development (feat)

Until now, the MFEs always loaded the theme CSS from the published brand-openedx repository, so style changes could only be tested after pushing them.

This adds a new INDIGO_BRAND_OPENEDX_PATH setting. When it is set, in development mode:

• A new indigo-brand service builds the local brand-openedx checkout and serves its CSS at http://localhost:3000.
• It rebuilds automatically when files change:
  • paragon/*.scss → rebuilds core.css only (~10 s)
  • paragon/tokens/** → rebuilds all CSS (~2 min)
  • dist/ is not deleted during rebuilds, so the previous CSS keeps being served.
• All MFEs (legacy and frontend-base) load core.css, light.css and dark.css from the local service. This overrides the theme URLs set by other plugins, such as tutor-contrib-paragon.

If the path doesn't point to a brand-openedx checkout, tutor config save fails with a clear error message.

Production (tutor local, tutor k8s) is not affected: the settings are only rendered in the development LMS settings and the dev docker-compose file. When the setting is unset (the default), the rendered environment is unchanged.

New settings:

Setting	Default
INDIGO_BRAND_OPENEDX_PATH	""
INDIGO_BRAND_OPENEDX_DEV_PORT	3000
INDIGO_BRAND_OPENEDX_DEV_DOCKER_IMAGE	docker.io/node:22

2. Fix: legacy MFE theme CSS loaded from raw.githubusercontent.com (fix)

PARAGON_THEME_URLS, used by the legacy MFEs, pointed to raw.githubusercontent.com. That host serves files as text/plain with X-Content-Type-Options: nosniff, so browsers refuse to apply them as stylesheets. The legacy MFEs then silently fall back to the default Paragon theme. These URLs now use jsDelivr, which serves text/css, like the frontend-base theme URLs already do. Same repository, branch and files.

This is a separate commit, so it can be cherry-picked onto other branches.

Testing instructions

Local brand development

1. Clone the brand repository and point Indigo to it:

   git clone <brand-openedx-repository-url> /path/to/brand-openedx
   tutor config save --set INDIGO_BRAND_OPENEDX_PATH=/path/to/brand-openedx
   tutor dev launch

2. Run tutor dev logs -f indigo-brand and wait for the server to start. Then open http://localhost:3000/light.css; it should show CSS.
3. Open an MFE. In the browser's Network tab, core.css, light.css and dark.css should load from localhost:3000.
4. Edit paragon/_overrides.scss (for example body { outline: 5px solid red; }). After the rebuild, a hard refresh should show the change.
5. Change color.primary.base in paragon/tokens/src/themes/light/color.json. After the full rebuild (~2 min), a hard refresh should show the new primary color.
6. Run tutor config save --unset INDIGO_BRAND_OPENEDX_PATH && tutor dev launch. The CSS should load from jsDelivr again, and the indigo-brand service should not be running.
7. Run tutor config save --set INDIGO_BRAND_OPENEDX_PATH=/nope. It should fail with a clear error message.
8. With the path set, production.py should not contain any localhost:3000 URL.

Legacy MFE theme URLs

1. Without INDIGO_BRAND_OPENEDX_PATH, open a legacy MFE (e.g. learning).
2. light.min.css and dark.min.css should load from cdn.jsdelivr.net as text/css.
3. There should be no "Refused to apply style … MIME type ('text/plain')" error in the console.

Notes

• jsDelivr may cache branch URLs for up to ~12 hours. After pushing brand changes, the cache can be purged at https://purge.jsdelivr.net/gh/<owner>/<repo>@<branch>/dist/<file>.min.css.
• The development builds update the dist/ and paragon/build/ folders of the local brand-openedx checkout.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GnPNrsTx73ShPB6Kc6FWac

[Faraz32123]

Tested locally with tutor dev against a brand-openedx checkout: SCSS edits (learning + learner dashboard) and design token changes both rebuild and show up in the MFEs. LGTM 👍

One small thing: the SCSS watcher only watches paragon/, but paragon/_dark.scss imports ../themes/dark/_utilities.scss and ../themes/dark/_extras.scss, so edits to the dark theme files don't trigger a rebuild. Adding --watch themes to the first nodemon call should fix it:

npx nodemon --legacy-watch --on-change-only --watch paragon --watch themes \\
  --ignore 'paragon/build/**' --ignore 'paragon/tokens/**' \\
  --ext scss,css --exec "$$CORE_BUILD" &

[arbirali]

Tested locally with tutor dev against a brand-openedx checkout: SCSS edits (learning + learner dashboard) and design token changes both rebuild and show up in the MFEs. LGTM 👍

One small thing: the SCSS watcher only watches paragon/, but paragon/_dark.scss imports ../themes/dark/_utilities.scss and ../themes/dark/_extras.scss, so edits to the dark theme files don't trigger a rebuild. Adding --watch themes to the first nodemon call should fix it:

npx nodemon --legacy-watch --on-change-only --watch paragon --watch themes \\
  --ignore 'paragon/build/**' --ignore 'paragon/tokens/**' \\
  --ext scss,css --exec "$$CORE_BUILD" &

Good catch, thanks! paragon/_dark.scss imports themes/dark/_utilities.scss and themes/dark/_extras.scss, so edits there weren't triggering a rebuild. Fixed in 72055b5: the SCSS watcher now also watches themes/, and the README mentions it. Checked that editing themes/dark/_extras.scss rebuilds core.css, and that brand forks without a themes/ folder still work.