Code editor preview doesn't include CSS for dependencies of dependencies

Created on 23 April 2025, 23 days ago

Overview

The code editor preview includes CSS for imported components. However, it doesn't do that for components imported by any of the imported components. In other words: dependencies of dependencies.

Proposed resolution

  1. Stop-gap solution: include CSS from all code components.
  2. Proper solution: implement ?with_deps query param on the /xb/api/auto-saves/css/js_component/{componentName} endpoint.

User interface changes

None.

πŸ› Bug report
Status

Active

Version

0.0

Component

Theme builder

Created by

πŸ‡³πŸ‡±Netherlands balintbrews Amsterdam, NL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @balintbrews
  • πŸ‡³πŸ‡±Netherlands balintbrews Amsterdam, NL

    Assigning for review to land the stop-gap solution, then we'll leave the issue open for the proper one.

  • Pipeline finished with Failed
    23 days ago
    Total: 1157s
    #480760
  • Pipeline finished with Skipped
    23 days ago
    #480768
  • First commit to issue fork.
  • πŸ‡³πŸ‡±Netherlands balintbrews Amsterdam, NL

    Stop-gap solution done. 🚒

  • πŸ‡¦πŸ‡ΊAustralia larowlan πŸ‡¦πŸ‡ΊπŸ.au GMT+10

    I tinkered a bit with the ?withDeps option and it doesn't really work because for published components the CSS is written to disk so we can't get a different version based on a url param.

    I was thinking what about we add a new controller /xb/api/code-component/css-preview that takes a URL param for the imports we need.

    So then in Preview.tsx we'd just hit `xb/api/code-components/css-preview?components[]=code&components[]=hero` where we're basically requesting all of the import names we parsed from the AST.

    Then that controller can just include the CSS for each of them, including their deps.

  • πŸ‡³πŸ‡±Netherlands balintbrews Amsterdam, NL

    #7: Would the new controller take care of returning the CSS for the dependencies (and their dependencies, recursively) of the import names we pass? I assume yes, otherwise we'd be back to why I chose the stop-gap solution where we would need to parse all dependencies recursively to be able to pass all component names.

  • πŸ‡¦πŸ‡ΊAustralia larowlan πŸ‡¦πŸ‡ΊπŸ.au GMT+10

    Yes and it would be smart enough to know to load the autosave version if a draft existed

Production build 0.71.5 2024