SDK: use Babel to scope styles for Calypso components #26851
Closed
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
In this patch I'm doing two things at once to reach the goal of using Calypso UI components: pulling in the UI code and pulling in the styles. As you may note I'm bringing in the entirety of the Calypso styles since the framework styles are monolithic. This has the immediate drawback that the stylesheet is over a megabyte in size, but the immediate advantage that we can import Calypso UI and not have to write it all ourselves. If this turns out to be a good path then we will obviously have to optimize the CSS, which is already in the plans. As the SDK and Calypso framework improves we should see that bundled CSS drop down to very small sizes. Currently the framework isn't ready to split apart the CSS though I'm afraid.
Previously we were pulling in the top-level stylesheet from Calypso and we were doing so from the top of the extension code. This pulled in over a megabyte of CSS and required us to be aware of Calypso's styling and style paths. In this change I have updated the `Card` and `Ribbon` components so that they explicitly import their SASS dependencies. This allows us to pull in _only_ the required style when building the extension. The output dropped from a megabyte to three kilobytes.
> - configuration.module.rules[2].exclude should be one of these:
> RegExp | non-empty string | function | [RegExp | non-empty string | function | (recursive) | object { and?, exclude?, include?, not?, or?, test? }] | object { and?, exclude?, include?, not?, or?, test? }
Setting it to `undefined` would work as well.
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.
Based on the previous experiment to scope our CSS (#26683).
This automates the other part — injecting the scope CSS selector in components.
Instead of manually adding
.calypsoto the block's code, injects namespace to each JSX element when importing components from Calypso.Input:
Output:
We can now use scoped CSS that applies only to Calypso components:
Testing
Grab files from
client/gutenberg/extensions/editor-notes/buildand load them in Gutenberg.Observe elements imported from Calypso have
data-calypsoattributes in them.