fix(styles): scope bk-utilities layer to .bk-root / .bk-portal-content#139
Merged
Conversation
The compiled stylesheet imports the full Tailwind utility set into a
global `bk-utilities` layer. Because consumers import styles.css into the
host document, those ~1485 generic utilities (`hidden`, `table-cell`, …)
apply document-wide and override host styles, breaking Studio reveals.
Add a postcss post-build step that wraps the `bk-utilities` layer's rules
in `@scope (.bk-root, .bk-portal-content) { … }`, so utilities apply only
under the package's own roots (and their subtree) and nowhere else. Bare
`@scope` selectors match the scope root itself, so `.bk-root`'s own
utilities still resolve. `bk-theme` vars stay global (no collisions).
Closes ENG-5125.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
block-kitchen | 8e10dae | Commit Preview URL Branch Preview URL |
Jul 02 2026, 03:28 AM |
Add the postcss direct-dependency specifier so `pnpm install --frozen-lockfile` passes in CI. Resolves to 8.5.15, already present transitively. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Extract the layer-wrapping logic into an exported pure `scopeUtilities` function and add a unit test: verifies utilities get wrapped in @scope, the ordering statement and bk-theme layer stay global, and the one-body-expected guard throws. Also drop the stray ticket ref from the file header comment. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Summary
Scope the compiled
bk-utilitiescascade layer to the package's own roots so its ~1485 generic Tailwind utilities apply only under.bk-root/.bk-portal-content(and their descendants), instead of leaking into the whole host document.Why
styles.cssimports the full Tailwind utility set into a globalbk-utilitieslayer. Consumers (e.g. Studio)import '@tightknitai/block-kitchen/styles.css'into the host document, so those generic utilities (hidden,table-cell, …) apply document-wide. Studio ranksbk-utilitieslast to make the Builder render, which lets bk's.hiddenoverride host styles app-wide, breaking every non-mdhidden → showreveal. See ENG-5125 / ENG-5124.What changed
scripts/scope-utilities.mjs(new) — postcss post-build step. Parses the compiled stylesheet, finds the single@layer bk-utilities { … }block, and wraps its rules in@scope (.bk-root, .bk-portal-content) { … }. Parses structure (not regex) so the minified input stays safe; postcss preserves each rule's minified raws, so no re-minify step is needed. Throws unless it finds exactly one utilities-layer body (guards against future Tailwind emission changes).package.json—build:cssnow runs the script aftertailwindcss --minify; addedpostcssas an explicit devDependency (was a non-hoisted pnpm transitive, unresolvable at the top level under strict node_modules).Bare
@scopeselectors match the scope root itself, so.bk-root's own utilities (flex h-full …) still resolve — a plain descendant-combinator wrap would miss the roots.bk-theme(CSS custom properties) and Tailwind's internalpropertieslayer stay global; vars don't collide.Test plan
pnpm typecheckpnpm lintpnpm testbuild:csspipeline against the real compiled stylesheet: exactly one@scopeinserted, output re-parses with postcss, braces balanced. Verified a bare<span class="hidden sm:table-cell">outside.bk-rootis no longer clobbered..bk-root; dialogs/popovers under.bk-portal-contentstill styled, incl. dark mode).Notes for reviewer
dev:css(watch) intentionally does not run the scope step — local dev renders under.bk-rootso unscoped output is fine there.web-studio-start, revert the@layerorder stopgap and remove the!importantworkarounds.🤖 Generated with Claude Code