Display User CSS and SCSS in Preview Panel #418
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
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
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
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
This PR adds SCSS support by showing SCSS styling in Studio's Preview Panel. J=SLAP-2912 TEST=manual, auto
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)
## 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.
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
changed the title
Merged
alextaing
added a commit
that referenced
this pull request
Oct 30, 2023
## 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 (#418). - Undo keyboard shortcuts (`cmd+z` for OS X, and `ctrl+z` for other OSes) are now supported in Studio (#417). ## Changes - `_server.tsx` and `_client.tsx` are now reserved template names for PagesJS Repos (#423). ## Fixes - Miscellaneous viewport bugs have been fixed (#424).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
At long last, this PR allows users to view their CSS and SCSS styling in the Preview Panel. This base of this feature is complete, however, it does have a known edge case which we have a maintenance item to address. When using third party styling imports, Studio will not resolve aliased file paths to style files. See this thread.
J=SLAP-2912