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

Created on 23 April 2025, 1 day 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
    1 day ago
    Total: 1157s
    #480760
  • Pipeline finished with Skipped
    1 day 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