Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display User CSS and SCSS in Preview Panel #418

Merged
merged 18 commits into from
Oct 26, 2023
Merged

Commits on Oct 17, 2023

  1. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    0448246 View commit details
    Browse the repository at this point in the history
  2. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    bc0dfbb View commit details
    Browse the repository at this point in the history
  3. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    a46412e View commit details
    Browse the repository at this point in the history
  4. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    39ab62a View commit details
    Browse the repository at this point in the history
  5. Add Component CSS imports to state (#402)

    This PR adds a list in `ComponentMetadata` of the file paths to the CSS
    files that each component imports. In `ComponentFile`, a dependency tree
    is used to find all transitive CSS for each component. The
    `dependency-tree` library allows for optimization by passing in already
    parsed dependency trees, so component tree is formed in Parsing
    Orchestrator so that previous dependencies can be accessed.
    
    J=SLAP-2912
    TEST=auto,manual
    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    2df6a00 View commit details
    Browse the repository at this point in the history
  6. Absolute Path Page CSS Imports (#404)

    This PR modifies how page CSS is parsed. Instead of storing relative CSS
    file paths in `cssImports` for `pageState`, we now store absolute CSS
    paths. This is so we can easily dynamically import them in `studio-ui`.
    Since we do this, we have to make sure that when we write back the CSS
    import, it is transformed back into the relative path.
    
    J=SLAP-2912
    TEST=auto,manual
    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    2bfd778 View commit details
    Browse the repository at this point in the history
  7. Add ?inline query param to user CSS imports (#409)

    This PR adds a new plugin that adds the `?inline` query param to all user CSS imports.  This plugin ignores CSS imports from Studio.  The inline parameter tells Vite not to inject the CSS as a styletag into the document head.  We want this because injected CSS will affect studio styling. We also change all Studio CSS styling to include the `?studioCSS` query parameter to make sure that it is ignored by this plugin.
    
    J=SLAP-2912
    TEST=manual
    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    de505ff View commit details
    Browse the repository at this point in the history
  8. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    40bc789 View commit details
    Browse the repository at this point in the history
  9. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    9b1a01f View commit details
    Browse the repository at this point in the history
  10. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    4023c5d View commit details
    Browse the repository at this point in the history
  11. empty commit

    alextaing committed Oct 17, 2023
    Configuration menu
    Copy the full SHA
    0aa9ae9 View commit details
    Browse the repository at this point in the history

Commits on Oct 23, 2023

  1. Configuration menu
    Copy the full SHA
    de44641 View commit details
    Browse the repository at this point in the history
  2. Import CSS and Inject into Iframe (#412)

    This PR adds user styling into the preview iframe. First, Studio
    dynamically imports user CSS and adds it to the head of Studio as a
    disabled style tag. Then, the `IframePortal` injects the style into the
    preview panel depending on the page CSS and the CSS of the components in
    the component tree.
    
    Note that this PR would break acceptance test screenshots since Tailwind
    is not currently configured in e2e-tests, so we turned off screenshots
    in this PR. This will be reverted in the following PR when we add
    Tailwind.
    
    J-SLAP-2912
    TEST=manual
    alextaing authored Oct 23, 2023
    Configuration menu
    Copy the full SHA
    c030a42 View commit details
    Browse the repository at this point in the history

Commits on Oct 24, 2023

  1. Add SCSS support (#419)

    This PR adds SCSS support by showing SCSS styling in Studio's Preview
    Panel.
    
    J=SLAP-2912
    TEST=manual, auto
    alextaing authored Oct 24, 2023
    Configuration menu
    Copy the full SHA
    602e10b View commit details
    Browse the repository at this point in the history
  2. Fix User Styling Race Condition (#420)

    This PR fixes the race condition where the `useInjectUserStyles` hook
    attempts to inject user styles from Studio's parent head before these
    styles have loaded. This issue was resolved by following a similar
    pattern we use for component loading. We keep track of all the styling
    we have imported in a set called `loadedStyling`. As this styling array
    is watched by the `useEffect` in `useInjectUserStyles` so that the
    iframe preview panel is always in sync with styling added to the parent
    head.
    
    One thing that was considered was that when the styles are lazily
    dynamically imported on Studio's first load, this `useEffect` will be
    called multiple times. However, since we have the loading overlay, it
    won't affect the user experience much. Since `loadedStyling` shouldn't
    change in any other case (we don't support new styling file HMR yet), it
    should not trigger excessive calls past the initial load state.
    
    J=SLAP-2976
    TEST=manual (local and Storm)
    alextaing authored Oct 24, 2023
    Configuration menu
    Copy the full SHA
    a47b88a View commit details
    Browse the repository at this point in the history
  3. Version 0.27.0-alpha.1 (#421)

    ## Features
    - We have introduced Collapsible Sidebars (#408).
    - We now support aliased type imports (#411).
    - The TypeScript utility types Omit, Pick, and Required are now
    supported for props in a component's prop interface (#413, #414, #415).
    - The Studio Preview can now display CSS and SCSS styling.
    alextaing authored Oct 24, 2023
    Configuration menu
    Copy the full SHA
    0561ab3 View commit details
    Browse the repository at this point in the history

Commits on Oct 26, 2023

  1. Add Tailwind to Test Site and e2e-tests (#422)

    This PR configures Tailwind in our test site and end-to-end tests. We
    also re-introduce screenshots for Darwin that we turned off in (#412).
    Note that the `loadingOverlay` wait was fixed in our
    `StudioPlaywrightPage`. Before, we waited for a button to be visible as
    a check for the overlay to be gone. However, Playwright only considers
    `hidden` [elements to be not
    visible](https://playwright.dev/docs/actionability#visible), while our
    `loadingOverlay` uses `opacity` to "toggle" visibility. Additionally,
    since Playwright [defaults to fast-forwarding
    transitions](https://playwright.dev/docs/api/class-pageassertions) for
    `toHaveScreenshot`, we shouldn't have to worry about the opacity
    transition time.
    
    I also squeeze in a quick variable rename from `userStyles` to
    `activeStyle` to more accurately describe that we are not injecting all
    user styles, but only the ones on the active page and its component
    tree.
    
    J=SLAP-2912
    TEST=auto, manual
    alextaing authored Oct 26, 2023
    Configuration menu
    Copy the full SHA
    3cd5776 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    09f2b38 View commit details
    Browse the repository at this point in the history