feat: serve CSS from dist-branch SHA + add Layouts admin tab - #165
Conversation
|
Warning Review limit reached
More reviews will be available in 51 minutes and 24 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (30)
📒 Files selected for processing (11)
📝 WalkthroughWalkthroughThis PR introduces a new "Layouts" tab to the admin UI for managing CSS grid, container, and layout-related custom properties. It extends the admin backend (registry, token defaults, CSS generator) and frontend (Svelte component, routing) to support these settings. Concurrently, the release workflow is updated to publish built CSS bundles to a pinned commit SHA on the dist-release branch, with the PHP constant and CDN URL generation revised to reference that SHA. ChangesLayouts Tab Feature
CSS Distribution & SHA Pinning
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
CSS bundles are no longer tracked in the main branch. Instead: - A new SLASHED_BRICKS_DIST_SHA constant in slashed-bricks.php holds the commit SHA of the dist branch at release time. jsDelivr serves from this SHA (immutable, cached forever), so CDN behaviour is identical to before but without CSS files bloating main. - SLASHED_BRICKS_CSS_REF is kept for version comparison only (the dashboard "update available" widget). DIST_SHA is now the CDN ref. - The CDN URL path no longer includes /dist/ prefix because the dist branch has CSS files at its root (not in a subdirectory). - version-sync.yml now pushes CSS to the dist branch during the release workflow and captures the resulting commit SHA, storing it back into slashed-bricks.php before committing to main. - dist/*.css and dist/*.map are gitignored. Local dev still works: npm run build populates dist/ locally, and the plugin's symlink-mode fallback detects and serves local files automatically. https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
Adds a Layouts token tab to the Svelte admin panel, allowing users to override container widths, grid column minimums, switcher threshold, bento grid settings, and all other layout-primitive CSS variables (sidebar, cover, frame, reel, imposter, equal-cols) without editing CSS. - Register 'layouts' as a token tab in Tab_Registry - Add get_layouts() defaults to Token_Defaults - Add generate_layout_declarations() to CSS_Generator for all --sf-* layout vars - Create LayoutsTab.svelte with Basic (containers/grid/switcher/bento) and Advanced (content-grid/sidebar/cover/frame/reel/imposter/equal-cols) sections - Wire LayoutsTab into App.svelte https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
346d4a5 to
fbd1e87
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
integrations/bricks/slashed-bricks.php (1)
70-75:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDocstring is now stale.
The function docstring still says the URL is "pinned to an immutable release tag (see SLASHED_BRICKS_CSS_REF)", but
slashed_bricks_get_css_url()now pins toSLASHED_BRICKS_DIST_SHA(the dist-branch commit SHA). Update the wording so the doc matches the implementation.✏️ Suggested fix
- * Defaults to the jsDelivr CDN pinned to an immutable release tag - * (see SLASHED_BRICKS_CSS_REF) so the plugin works without any local - * file setup. The specific file (essential / optimal / full) is chosen + * Defaults to the jsDelivr CDN pinned to the immutable dist-branch commit + * SHA (see SLASHED_BRICKS_DIST_SHA) so the plugin works without any local + * file setup. The specific file (essential / optimal / full) is chosen🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@integrations/bricks/slashed-bricks.php` around lines 70 - 75, Update the stale docstring for slashed_bricks_get_css_url to reflect that the URL is now pinned to the dist-branch commit SHA (SLASHED_BRICKS_DIST_SHA) rather than the immutable release tag SLASHED_BRICKS_CSS_REF; change the wording to mention SLASHED_BRICKS_DIST_SHA as the pin source and keep the rest of the description about local copy precedence and css_bundle selection intact so the doc matches the implementation.
🧹 Nitpick comments (1)
.github/workflows/version-sync.yml (1)
82-110: ⚡ Quick winAvoid interpolating release-tag input directly into
runscripts.
${{ steps.ver.outputs.tag }}(lines 85, 96) derives fromgithub.event.release.tag_name, an attacker-influenceable value that is expanded into the shell before execution (the${{ steps.dist.outputs.sha }}on line 107 is git-derived and safe). Pass it viaenvand reference the shell variable instead to eliminate the template-injection surface flagged by static analysis.🔒 Example hardening for the tag value
env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + RELEASE_TAG: ${{ steps.ver.outputs.tag }} GIT_AUTHOR_NAME: github-actions[bot] ... run: | set -euo pipefail ... - echo "release-tag: ${{ steps.ver.outputs.tag }}" + echo "release-tag: ${RELEASE_TAG}" ... - git commit -m "build: dist for ${{ steps.ver.outputs.tag }}" + git commit -m "build: dist for ${RELEASE_TAG}"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/version-sync.yml around lines 82 - 110, The workflow currently interpolates steps.ver.outputs.tag directly into the run script (used when writing SOURCE.txt and in the git commit message), which is user-controllable; change the step to pass the tag through the environment (e.g., set env: RELEASE_TAG: ${{ steps.ver.outputs.tag }}) and replace every literal ${{ steps.ver.outputs.tag }} in the run block with the safe shell variable $RELEASE_TAG (use proper quoting when embedding into SOURCE.txt and the git commit message). Keep the existing handling of steps.dist.outputs.sha (DIST_SHA) as-is, and ensure the sed replacement for SLASHED_BRICKS_DIST_SHA continues to use the safe DIST_SHA variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/workflows/version-sync.yml:
- Around line 105-113: The sed update step ("Update SLASHED_BRICKS_DIST_SHA in
PHP") runs while the workflow is on the orphan dist-release branch where
integrations/bricks/slashed-bricks.php was removed; move the sed invocation so
it runs after the "Switch back to main working tree" (i.e., checkout main) so
the file exists and the edit persists, and ensure the workflow does not run sed
while on the orphan branch created by git checkout --orphan dist-release / git
rm -rf .; also verify that main has the other versioned edits
(SLASHED_BRICKS_CSS_REF, SLASHED_BRICKS_VERSION, package.json) from the release
flow so you won’t accidentally drop those bumps when committing the DIST_SHA
change.
In @.gitignore:
- Around line 16-21: Update the header comment above the dist entries to replace
the stale workflow reference "publish-dist.yml" with the correct workflow name
"version-sync.yml" (or ".github/workflows/version-sync.yml") so the comment
correctly states that the dist branch is published by version-sync.yml; modify
the comment text that currently mentions "the `dist` branch (publish-dist.yml)"
to "the `dist` branch (version-sync.yml)" in the .gitignore block containing
dist/slashed-bricks.zip, dist/*.css, dist/*.map.
---
Outside diff comments:
In `@integrations/bricks/slashed-bricks.php`:
- Around line 70-75: Update the stale docstring for slashed_bricks_get_css_url
to reflect that the URL is now pinned to the dist-branch commit SHA
(SLASHED_BRICKS_DIST_SHA) rather than the immutable release tag
SLASHED_BRICKS_CSS_REF; change the wording to mention SLASHED_BRICKS_DIST_SHA as
the pin source and keep the rest of the description about local copy precedence
and css_bundle selection intact so the doc matches the implementation.
---
Nitpick comments:
In @.github/workflows/version-sync.yml:
- Around line 82-110: The workflow currently interpolates steps.ver.outputs.tag
directly into the run script (used when writing SOURCE.txt and in the git commit
message), which is user-controllable; change the step to pass the tag through
the environment (e.g., set env: RELEASE_TAG: ${{ steps.ver.outputs.tag }}) and
replace every literal ${{ steps.ver.outputs.tag }} in the run block with the
safe shell variable $RELEASE_TAG (use proper quoting when embedding into
SOURCE.txt and the git commit message). Keep the existing handling of
steps.dist.outputs.sha (DIST_SHA) as-is, and ensure the sed replacement for
SLASHED_BRICKS_DIST_SHA continues to use the safe DIST_SHA variable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c08e1cad-98fa-4341-adb0-2257fd89d352
⛔ Files ignored due to path filters (30)
dist/slashed.essential.cssis excluded by!**/dist/**dist/slashed.essential.flat.cssis excluded by!**/dist/**dist/slashed.essential.flat.min.cssis excluded by!**/dist/**dist/slashed.essential.flat.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.essential.min.cssis excluded by!**/dist/**dist/slashed.essential.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.full.cssis excluded by!**/dist/**dist/slashed.full.flat.cssis excluded by!**/dist/**dist/slashed.full.flat.min.cssis excluded by!**/dist/**dist/slashed.full.flat.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.full.min.cssis excluded by!**/dist/**dist/slashed.full.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal-components.cssis excluded by!**/dist/**dist/slashed.optimal-components.flat.cssis excluded by!**/dist/**dist/slashed.optimal-components.flat.min.cssis excluded by!**/dist/**dist/slashed.optimal-components.flat.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal-components.min.cssis excluded by!**/dist/**dist/slashed.optimal-components.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal-utilities.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.flat.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.flat.min.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.flat.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal-utilities.min.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal.cssis excluded by!**/dist/**dist/slashed.optimal.flat.cssis excluded by!**/dist/**dist/slashed.optimal.flat.min.cssis excluded by!**/dist/**dist/slashed.optimal.flat.min.css.mapis excluded by!**/dist/**,!**/*.mapdist/slashed.optimal.min.cssis excluded by!**/dist/**dist/slashed.optimal.min.css.mapis excluded by!**/dist/**,!**/*.map
📒 Files selected for processing (11)
.github/workflows/version-sync.yml.gitignoreintegrations/bricks/admin-app/src/App.svelteintegrations/bricks/admin-app/src/components/LayoutsTab.svelteintegrations/bricks/assets/admin-app/app.cssintegrations/bricks/assets/admin-app/app.jsintegrations/bricks/includes/class-css-generator.phpintegrations/bricks/includes/class-tab-registry.phpintegrations/bricks/includes/class-token-defaults.phpintegrations/bricks/slashed-bricks.phpscripts/version-sync.js
- version-sync.yml: move sed/DIST_SHA update to after `git checkout main` so slashed-bricks.php exists when sed runs (was silently failing on orphan branch) - version-sync.yml: pass RELEASE_TAG via env instead of interpolating steps.ver.outputs.tag directly into shell (template-injection hardening) - slashed-bricks.php: update stale docstring to reference SLASHED_BRICKS_DIST_SHA - .gitignore: fix stale workflow reference publish-dist.yml → version-sync.yml https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
Summary
main.dist/*.cssanddist/*.mapare removed from git tracking.SLASHED_BRICKS_DIST_SHAconstant holds the dist-branch commit SHA;SLASHED_BRICKS_CSS_REFis kept as a semver string for version comparison only.version-sync.ymlupdated to push CSS bundles to thedistorphan branch, capture the resulting SHA, and write it back toslashed-bricks.phpon every release.What changed
CDN / dist tracking
integrations/bricks/slashed-bricks.php— addSLASHED_BRICKS_DIST_SHA; CDN URL uses SHA with no/dist/prefixscripts/version-sync.js— note thatDIST_SHAis CI-managed, not bumped here.github/workflows/version-sync.yml— push to dist branch after build, capture SHA, update PHP.gitignore— ignoredist/*.cssanddist/*.mapLayouts tab
integrations/bricks/includes/class-tab-registry.php— registerlayoutsas a token tabintegrations/bricks/includes/class-token-defaults.php— addget_layouts()with all 26 layout primitive defaultsintegrations/bricks/includes/class-css-generator.php— addgenerate_layout_declarations()mapping each key to its--sf-*CSS variableintegrations/bricks/admin-app/src/components/LayoutsTab.svelte— new tab component with Basic (containers, grid, switcher, bento) and collapsible Advanced (content-grid, sidebar, cover, frame, reel, imposter, equal-cols) sectionsintegrations/bricks/admin-app/src/App.svelte— import and wire upLayoutsTabTest plan
--sf-*variable into the generated CSS@layer slashed.overridesversion-sync.ymlpushes CSS to dist branch and updatesSLASHED_BRICKS_DIST_SHAin PHP/dist/prefix needed)https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
Generated by Claude Code
Summary by CodeRabbit