Extract viewport breakpoint utilities to opt-in file#28
Merged
codeslash-net merged 4 commits intomainfrom May 6, 2026
Merged
Conversation
…@container - New css/slashed-utilities-viewport.css: sm:/md:/lg:/xl: viewport @media utility prefix classes extracted from slashed-utilities.css. Opt-in, not included in slashed-full.css. Load after slashed-full.css when needed. To customise breakpoints, copy this one file and find-replace the four em values — no other framework file needs touching. - slashed-utilities.css: sm:/md:/lg:/xl: blocks removed (~400 lines). Pointer comment replaces them. cq-* container-query utilities and all feature/preference @media variants (dark:/light:/print:/motion-*) remain. Header comment updated to document the split. - slashed-core.css: .alternate now uses @container (min-width: 48em) instead of @media, with container-type: inline-size added to .alternate itself. Consistent with every other layout primitive in the file. slashed-full.css now contains zero viewport-size @media rules. - build-bundle.sh: mention slashed-utilities-viewport.css in the bundle header. - cheatsheet.html: responsive section updated to document cq-* as primary path and sm:/md: as opt-in escape hatch via the new file. https://claude.ai/code/session_01HXBTBxk2YTCvs62tE3Qm28
…ewport split - docs/UTILITIES.md: rewrite responsive variants section — cq-* as preferred path, slashed-utilities-viewport.css as opt-in, updated breakpoint customisation instructions (one file, four find-replace passes). - docs/INSTALLATION.md: add slashed-utilities-viewport.css to file structure table with correct size and description; update slashed-full.css byte count. - cheatsheet.html: fix .hidden, .order-*, and other stale references that still described sm:/md: as part of the main bundle. https://claude.ai/code/session_01HXBTBxk2YTCvs62tE3Qm28
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughThis release extracts viewport breakpoint utilities into an opt-in stylesheet and migrates the ChangesResponsive Utilities Restructuring
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 8✅ Passed checks (8 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 (4)
ROADMAP.md (1)
216-225:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRefresh breakpoint-scope wording in roadmap notes.
This section still scopes hardcoded
sm/md/lg/xlbreakpoints toslashed-utilities.css, but those viewport prefixes now reside inslashed-utilities-viewport.css.🤖 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 `@ROADMAP.md` around lines 216 - 225, Update the roadmap note to reflect that the hardcoded `sm/md/lg/xl` viewport prefixes are not in `slashed-utilities.css` anymore but now live in `slashed-utilities-viewport.css`; change the sentence that currently scopes those breakpoints to `slashed-utilities.css` so it instead references `slashed-utilities-viewport.css`, keep the rest of the note about `@custom-media` and the scope reduction intact, and ensure the scope-note line referencing `slashed-core.css` and `@container` queries is left unchanged.CLAUDE.md (1)
60-60:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdjust breakpoint gotcha to the new file layout.
Line 60 still says the four breakpoints live only in
slashed-utilities.css; it should now referenceslashed-utilities-viewport.cssforsm:/md:/lg:/xl:utilities.🤖 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 `@CLAUDE.md` at line 60, Update the documentation sentence that currently states the four breakpoints live only in slashed-utilities.css to reflect the new layout: mention that the sm:/ md:/ lg:/ xl: breakpoint utilities now live in slashed-utilities-viewport.css (while noting that layout primitives in slashed-core.css using `@container` remain unaffected); replace the reference to slashed-utilities.css with slashed-utilities-viewport.css and keep the same breakpoint values (sm: 30em / md: 48em / lg: 64em / xl: 80em).docs/INSTALLATION.md (1)
82-82:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix stale version in the pinning guidance example.
Line 82 still uses
@0.6.5.0; it should match the current release shown above (@0.6.6.0) to avoid copy/paste drift.🤖 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 `@docs/INSTALLATION.md` at line 82, Update the stale version string in the installation pinning example: replace the outdated token "@0.6.5.0" with the current release "@0.6.6.0" in the INSTALLATION.md example so the copy/paste guidance matches the release noted above.CONTRIBUTING.md (1)
104-105:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate breakpoint-location gotcha to match the new viewport split.
Line 104 currently says breakpoints live only in
slashed-utilities.css, but viewport breakpoint utilities now live inslashed-utilities-viewport.css. This can misdirect maintainers editing responsive utilities.🤖 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 `@CONTRIBUTING.md` around lines 104 - 105, Update the "breakpoints are hardcoded" note to reflect the new split: change the statement that viewport breakpoint utilities live only in `slashed-utilities.css` to say viewport breakpoint utilities now live in `slashed-utilities-viewport.css` (while retaining that layout primitives in `slashed-core.css` use `@container` queries and are unaffected); make sure to mention the specific breakpoint names `sm/md/lg/xl` and their em values remain defined in the viewport utilities file so maintainers know which file to edit.
🧹 Nitpick comments (2)
css/slashed-utilities-viewport.css (1)
37-436: ⚡ Quick winAlign breakpoint source-of-truth with repo guideline (or update the guideline in the same change).
This file hardcodes30em/48em/64em/80em, but the current utilities guideline still states those values live only inslashed-utilities.css. Please resolve that contract mismatch to prevent future drift.As per coding guidelines: “
**/*utilities*.css: Breakpoints are hardcoded only inslashed-utilities.css; the four values … live in that file only.”🤖 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 `@css/slashed-utilities-viewport.css` around lines 37 - 436, This file duplicates the breakpoint literals in the media queries (`@media` (min-width: 30em), (min-width: 48em), (min-width: 64em), (min-width: 80em)), violating the guideline that breakpoints must be defined only in slashed-utilities.css; fix by removing the hardcoded em values here and referencing the canonical breakpoints (either via the CSS custom properties or by moving the `@media` rules into the single source-of-truth in slashed-utilities.css), or alternatively update the guideline in the same PR if you intend to change where breakpoints live; ensure the unique media queries in slashed-utilities-viewport.css (the four `@media` blocks) are replaced to consume the centralized breakpoint variables or relocated to slashed-utilities.css so the repo retains one true definition.docs/INSTALLATION.md (1)
244-249: ⚡ Quick winConsider adding an explicit opt-in note for viewport utilities in modular loading.
The modular snippet is valid, but a short adjacent note for
slashed-utilities-viewport.css(whensm:/md:/lg:/xl:classes are needed) would prevent integration confusion.🤖 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 `@docs/INSTALLATION.md` around lines 244 - 249, Add a short opt-in note next to the modular CSS list explaining that responsive viewport utilities require adding slashed-utilities-viewport.css; mention the specific file name "slashed-utilities-viewport.css" and call out the responsive prefixes (sm:/ md:/ lg:/ xl:) so integrators know to include that stylesheet when they rely on viewport utility classes alongside slashed/css/tokens-default.css, slashed/css/slashed-core.css, slashed/css/slashed-components.css, and slashed/css/slashed-utilities.css.
🤖 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 `@CHANGELOG.md`:
- Around line 15-26: Add a dedicated "### Breaking" section to this release
entry and list the removal of viewport breakpoint utilities from
slashed-full.css (the sm:/ md:/ lg:/ xl: utility prefixes) as a breaking change;
mention that these classes are now in the new opt-in file
slashed-utilities-viewport.css and note the `.alternate` layout primitive change
from `@media` to `@container` and that slashed-full.css no longer contains
zero-width `@media` viewport rules so consumers who only load the bundle will be
affected.
- Around line 32-45: The changelog currently contradicts itself by referencing
container-query prefixes `cq-sm:`/`cq-md:`/`cq-lg:`/`cq-xl:` in the first
paragraph but later stating retained utilities are `cq-xs:` through `cq-lg:`;
pick one canonical range and make both references consistent (either change the
first paragraph to use `cq-xs:` through `cq-lg:` or change the later sentence to
include `cq-xl:`), updating both the inline example list and the “retained
utilities” sentence so all mentions of `cq-*` prefixes (`cq-xs:`, `cq-sm:`,
`cq-md:`, `cq-lg:`, `cq-xl:`) match exactly.
---
Outside diff comments:
In `@CLAUDE.md`:
- Line 60: Update the documentation sentence that currently states the four
breakpoints live only in slashed-utilities.css to reflect the new layout:
mention that the sm:/ md:/ lg:/ xl: breakpoint utilities now live in
slashed-utilities-viewport.css (while noting that layout primitives in
slashed-core.css using `@container` remain unaffected); replace the reference to
slashed-utilities.css with slashed-utilities-viewport.css and keep the same
breakpoint values (sm: 30em / md: 48em / lg: 64em / xl: 80em).
In `@CONTRIBUTING.md`:
- Around line 104-105: Update the "breakpoints are hardcoded" note to reflect
the new split: change the statement that viewport breakpoint utilities live only
in `slashed-utilities.css` to say viewport breakpoint utilities now live in
`slashed-utilities-viewport.css` (while retaining that layout primitives in
`slashed-core.css` use `@container` queries and are unaffected); make sure to
mention the specific breakpoint names `sm/md/lg/xl` and their em values remain
defined in the viewport utilities file so maintainers know which file to edit.
In `@docs/INSTALLATION.md`:
- Line 82: Update the stale version string in the installation pinning example:
replace the outdated token "@0.6.5.0" with the current release "@0.6.6.0" in the
INSTALLATION.md example so the copy/paste guidance matches the release noted
above.
In `@ROADMAP.md`:
- Around line 216-225: Update the roadmap note to reflect that the hardcoded
`sm/md/lg/xl` viewport prefixes are not in `slashed-utilities.css` anymore but
now live in `slashed-utilities-viewport.css`; change the sentence that currently
scopes those breakpoints to `slashed-utilities.css` so it instead references
`slashed-utilities-viewport.css`, keep the rest of the note about
`@custom-media` and the scope reduction intact, and ensure the scope-note line
referencing `slashed-core.css` and `@container` queries is left unchanged.
---
Nitpick comments:
In `@css/slashed-utilities-viewport.css`:
- Around line 37-436: This file duplicates the breakpoint literals in the media
queries (`@media` (min-width: 30em), (min-width: 48em), (min-width: 64em),
(min-width: 80em)), violating the guideline that breakpoints must be defined
only in slashed-utilities.css; fix by removing the hardcoded em values here and
referencing the canonical breakpoints (either via the CSS custom properties or
by moving the `@media` rules into the single source-of-truth in
slashed-utilities.css), or alternatively update the guideline in the same PR if
you intend to change where breakpoints live; ensure the unique media queries in
slashed-utilities-viewport.css (the four `@media` blocks) are replaced to consume
the centralized breakpoint variables or relocated to slashed-utilities.css so
the repo retains one true definition.
In `@docs/INSTALLATION.md`:
- Around line 244-249: Add a short opt-in note next to the modular CSS list
explaining that responsive viewport utilities require adding
slashed-utilities-viewport.css; mention the specific file name
"slashed-utilities-viewport.css" and call out the responsive prefixes (sm:/ md:/
lg:/ xl:) so integrators know to include that stylesheet when they rely on
viewport utility classes alongside slashed/css/tokens-default.css,
slashed/css/slashed-core.css, slashed/css/slashed-components.css, and
slashed/css/slashed-utilities.css.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 43191376-e726-44f2-a262-bfcbdb867319
📒 Files selected for processing (19)
CHANGELOG.mdCLAUDE.mdCONTRIBUTING.mdREADME.mdROADMAP.mdbin/build-bundle.shcheatsheet.htmlcss/slashed-animations.csscss/slashed-components.csscss/slashed-core.csscss/slashed-experimental.csscss/slashed-full.csscss/slashed-utilities-viewport.csscss/slashed-utilities-visual.csscss/slashed-utilities.csscss/tokens-default.csscss/tokens-legacy.cssdocs/INSTALLATION.mddocs/UTILITIES.md
- CHANGELOG: add ### Breaking section documenting sm:/md:/lg:/xl: removal from slashed-full.css; fix cq-xl: typo → cq-xs: in Added section - CLAUDE.md: update stale breakpoint gotcha to reference slashed-utilities-viewport.css (not slashed-utilities.css) - CONTRIBUTING.md: same gotcha update with find-replace workaround note - INSTALLATION.md: bump @0.6.5.0 → @0.6.6.0 in pinning prose; add viewport utilities opt-in comment to modular loading section - ROADMAP.md: update @Custom-Media scope note to reference slashed-utilities-viewport.css and 0.6.6.0 context https://claude.ai/code/session_01HXBTBxk2YTCvs62tE3Qm28
Default value stats are noise once the token is overridden. Non-obvious WCAG traps (--warning, disabled, decorative) retain their comments. https://claude.ai/code/session_01HXBTBxk2YTCvs62tE3Qm28
Owner
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
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
2 participants
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
Extracts the
sm:/md:/lg:/xl:viewport-breakpoint utility classes fromslashed-utilities.cssinto a new opt-in fileslashed-utilities-viewport.css. After this release,slashed-full.csscontains zero viewport-size@mediarules — only feature and preference queries remain in the essential bundle.Projects using container-query utilities (
cq-sm:/cq-md:/cq-lg:/cq-xl:) and fluid tokens do not need to load the new file. Projects requiring custom breakpoints now only need to copy and modifyslashed-utilities-viewport.css(four find-replace passes on em values) rather than touching the entire framework.Also converts
.alternatelayout primitive from@mediato@containerqueries, making it responsive to its own container width instead of the viewport.Changes
New file:
css/slashed-utilities-viewport.css(436 lines)sm:/md:/lg:/xl:responsive utility classes@layer slashed.utilities(layer order already established byslashed-full.css)Modified:
css/slashed-utilities.cssandcss/slashed-full.css@mediablockscq-*:) remain includedModified:
css/slashed-core.css.alternatelayout primitive: changed from@media (min-width: 48em)to@container (min-width: 48em)container-type: inline-sizeto.alternatebase ruleUpdated: Version bumped to
0.6.6.0across all filesUpdated:
CHANGELOG.md,docs/UTILITIES.md,docs/INSTALLATION.md, and other documentationChecklist
slashed-full.cssregenerated (bin/build-bundle.sh)CHANGELOG.mdentry addedROADMAP.mdupdatedcheatsheet.htmland docs updatedhttps://claude.ai/code/session_01HXBTBxk2YTCvs62tE3Qm28
Summary by CodeRabbit
New Features
Chores
Documentation