-
Notifications
You must be signed in to change notification settings - Fork 3
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
Commits on Oct 17, 2023
-
Configuration menu - View commit details
-
Copy full SHA for 0448246 - Browse repository at this point
Copy the full SHA 0448246View commit details -
Configuration menu - View commit details
-
Copy full SHA for bc0dfbb - Browse repository at this point
Copy the full SHA bc0dfbbView commit details -
Configuration menu - View commit details
-
Copy full SHA for a46412e - Browse repository at this point
Copy the full SHA a46412eView commit details -
Configuration menu - View commit details
-
Copy full SHA for 39ab62a - Browse repository at this point
Copy the full SHA 39ab62aView commit details -
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
Configuration menu - View commit details
-
Copy full SHA for 2df6a00 - Browse repository at this point
Copy the full SHA 2df6a00View commit details -
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
Configuration menu - View commit details
-
Copy full SHA for 2bfd778 - Browse repository at this point
Copy the full SHA 2bfd778View commit details -
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
Configuration menu - View commit details
-
Copy full SHA for de505ff - Browse repository at this point
Copy the full SHA de505ffView commit details -
Configuration menu - View commit details
-
Copy full SHA for 40bc789 - Browse repository at this point
Copy the full SHA 40bc789View commit details -
Configuration menu - View commit details
-
Copy full SHA for 9b1a01f - Browse repository at this point
Copy the full SHA 9b1a01fView commit details -
Configuration menu - View commit details
-
Copy full SHA for 4023c5d - Browse repository at this point
Copy the full SHA 4023c5dView commit details -
Configuration menu - View commit details
-
Copy full SHA for 0aa9ae9 - Browse repository at this point
Copy the full SHA 0aa9ae9View commit details
Commits on Oct 23, 2023
-
Configuration menu - View commit details
-
Copy full SHA for de44641 - Browse repository at this point
Copy the full SHA de44641View commit details -
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
Configuration menu - View commit details
-
Copy full SHA for c030a42 - Browse repository at this point
Copy the full SHA c030a42View commit details
Commits on Oct 24, 2023
-
This PR adds SCSS support by showing SCSS styling in Studio's Preview Panel. J=SLAP-2912 TEST=manual, auto
Configuration menu - View commit details
-
Copy full SHA for 602e10b - Browse repository at this point
Copy the full SHA 602e10bView commit details -
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)
Configuration menu - View commit details
-
Copy full SHA for a47b88a - Browse repository at this point
Copy the full SHA a47b88aView commit details -
## 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.
Configuration menu - View commit details
-
Copy full SHA for 0561ab3 - Browse repository at this point
Copy the full SHA 0561ab3View commit details
Commits on Oct 26, 2023
-
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
Configuration menu - View commit details
-
Copy full SHA for 3cd5776 - Browse repository at this point
Copy the full SHA 3cd5776View commit details -
Configuration menu - View commit details
-
Copy full SHA for 09f2b38 - Browse repository at this point
Copy the full SHA 09f2b38View commit details