Import CSS and Inject into Iframe #412
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
nmanu1
reviewed
Oct 16, 2023
e2e-tests/__screenshots__/undefined-menu-button.spec.ts/renders-undefined-menu-button-1.png
Outdated
Show resolved
Hide resolved
alextaing
force-pushed
the
dev/inject-css-into-iframe
branch
2 times, most recently
from
95b2793
to
94d0a2d
Compare
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 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
nmanu1
reviewed
Oct 23, 2023
packages/studio-plugin/tests/__fixtures__/PageFile/brokenCssImport.tsx
Outdated
Show resolved
Hide resolved
nmanu1
reviewed
Oct 23, 2023
alextaing
force-pushed
the
dev/inject-css-into-iframe
branch
from
da31a52
to
1f4fc4c
Compare
nmanu1
reviewed
Oct 23, 2023
nmanu1
approved these changes
Oct 23, 2023
alextaing
added a commit
that referenced
this pull request
Oct 26, 2023
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
added a commit
that referenced
this pull request
Oct 26, 2023
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](#412 (comment)). J=SLAP-2912
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.
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
IframePortalinjects 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