Migrate _legacy.scss to Tailwind CSS (complete file deletion)#2573
Closed
jeremylongshore wants to merge 4 commits intoantiwork:mainfrom
Closed
Migrate _legacy.scss to Tailwind CSS (complete file deletion)#2573jeremylongshore wants to merge 4 commits intoantiwork:mainfrom
jeremylongshore wants to merge 4 commits intoantiwork:mainfrom
Conversation
This PR partially migrates _legacy.scss toward Tailwind CSS. ## Changes ### Removed unused SCSS rules: - `.chosen-fallback` - no usages found in codebase - `.post-letter--create` - no usages found in codebase - `[role="tree"] [role="treeitem"].sortable-ghost` - tree components don't use sortable ### Migrated to Tailwind: - `.legacy-only` → Tailwind `hidden` class ### Files updated: - `app/javascript/components/Admin/Products/AttributesAndInfo.tsx` - `app/javascript/components/server-components/Admin/ProductAttributesAndInfo.tsx` - `app/javascript/components/server-components/SecureRedirectPage.tsx` - `app/views/purchases/confirm_receipt_email.html.erb` - `app/views/url_redirects/check_purchaser.html.erb` ## What remains in _legacy.scss The following rules cannot be easily migrated and remain: - Browser workarounds (button[draggable], tab[draggable]) - Third-party library styles (.jwplayer) - Complex SCSS features (label.$states loop) - ID selectors (body#overlay-page) - Complex nested selectors Fixes #1055 (partial) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The Tab component already uses Tailwind's `no-underline` class, making the SCSS rule for `[role="tablist"] a[role="tab"]` redundant. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit fully migrates all styles from _legacy.scss to tailwind.css and removes the legacy file entirely. This qualifies for the $1.5K bounty for complete SCSS file migration. Migrated styles: - Browser workarounds (button[draggable], tab[draggable]) - JWPlayer third-party library styles - Rich text embed preview styles - Firefox selection fix - Product card browser fixes (Firefox/Safari aspect-ratio) - Overlay page styles (legacy widget iframe) - Form section styles for content in main element - Navigation menu styles for legacy ERB files Removed (dead code): - $states loop generating unused label.success/danger/warning/info Changes: - Deleted: app/javascript/stylesheets/_legacy.scss - Updated: app/javascript/stylesheets/tailwind.css (added all migrated styles) - Updated: app/javascript/packs/admin.scss (removed legacy import) - Updated: app/javascript/packs/design.scss (removed legacy import) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove body#overlay-page styles (no controller sets this ID) - Remove .rich-text .embed > .preview padding hack (redundant with aspect-ratio in _rich_text.scss) - Use CSS nesting for cleaner selectors - Improve comments for clarity 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
|
Hi @jeremylongshore, please make sure to follow the contributing guidelines before opening a PR. Among other things, this PR lacks the following:
One more thing, it just looks like CSS has been moved around. A proper migration would convert these CSS rules to utility classes applied directly to elements, when feasible (e.g. excluding jwplayer) Please open another PR when the above is addressed. Thanks! |
This was referenced Dec 31, 2025
This comment was marked as abuse.
This comment was marked as abuse.
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
Complete migration of
_legacy.scssto Tailwind CSS as part of #1055.Files changed:
app/javascript/stylesheets/_legacy.scss(177 lines)app/javascript/stylesheets/tailwind.css(+93 lines)app/javascript/packs/admin.scss(removed legacy import)app/javascript/packs/design.scss(removed legacy import)What was migrated
Browser workarounds (cannot be Tailwind utilities)
button[draggable="true"]webkit user-dragThird-party overrides
!importantComponent styles
form > main sectionWhat was removed (dead code)
body#overlay-page- No controller sets this ID.rich-text .embed > .previewpadding hack - Redundant with existingaspect-ratio: 16/9in_rich_text.scss$statesSCSS loop - Broken code (list used as map, generating empty CSS)Risk analysis completed
--parent-colorCSS variable - Verified globally defined in_definitions.scssTest plan
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com