Repository navigation
Upgrade to Panda CSS v2 and @microbit/ui 0.6 - #1382
Merged
Merged
Conversation
@microbit/ui 0.6 and ui-patterns 0.8 require Panda ^2.4.0. - Panda v2 bundles the config into a `data:` URL module, so the optional brand preset can no longer be loaded with `require`. Resolve it against the app root and import it by file URL instead. - `eject: true` is gone: v2 adds no presets implicitly. preset-base is now a direct dependency. - @microbit/ui no longer re-exports `css`, `cx` or `styled`, which v2 only extracts when imported from styled-system. Import them from there. - HideSplitViewButton's icon-mode width was not extracted: Panda folds a ternary that tests a ternary-initialised variable to one branch (chakra-ui/panda#4056). Test `text` inline. - v2's AspectRatio renders `style` before `class`; snapshot updated. @parcel/watcher's install script is denied: prebuilt binaries cover the platforms we build on and only `panda --watch` uses it.
|
Preview build will be at |
The column count was computed into a ternary-initialised variable and then compared in the `columns` prop. Panda v2 folds that comparison, so only the one-column rule was emitted and the grid stayed one column at any width (chakra-ui/panda#4056). Test the width inline instead.
A side shorthand such as borderLeft resets that side's colour, and Panda doesn't order it relative to a separate borderColor utility. v2 emits them in a different order from v1, which turned the microphone threshold markers' edges dark. Use properties that don't overlap: separate width/style/colour, a side colour longhand, or a single shorthand that includes the colour.
The link variant sets padding: 0 and the lg size sets padding-inline, at equal specificity. Panda 1 happened to emit lg last, which inset the link to line up with the dialog title; Panda 2 emits link last, so it sat flush. Set the inset on the instance so it no longer depends on emit order.
This file contains hidden or 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
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.
Upgrades to Panda CSS
^2.4.0with@microbit/ui0.6 and@microbit/ui-patterns0.8 (microbit-foundation/ui#166).Changes
panda.config.ts: the optional brand preset is resolved from the app root and imported by file URL, since v2 configs can't userequire.eject: trueis dropped.css,cxandstyledare imported fromstyled-systemrather than@microbit/ui.HideSplitViewButtonand the Ideas grid: workarounds for [v2] Comparing a ternary-initialised variable folds to a constant, so one branch is never extracted chakra-ui/panda#4056, which dropped the icon-mode width and the 2- and 3-column layouts.ModuleOverlayandSideBarTabno longer combine a side-border shorthand withborderColor. Panda doesn't order those relative to each other, and v2's order turned the markers' edges dark.linkvariant (padding: 0) after thelgsize, so it lost the padding v1 gave it by accident.AspectRatiorendersstylebeforeclass.Testing
npm run cipasses.-webkit-appearanceis still emitted for the Safari 14 target.The private brand package needs no changes.