Issue/309 replace ruby sass with dart sass#310
Merged
jonrandahl merged 28 commits intodevfrom Jan 14, 2026
Merged
Conversation
- Replaces sass-rails with dartsass-sprockets to align with modern best practices for Sass compilation in Rails.
- Replaces the `bootstrap-sass` gem with the official `bootstrap` gem for improved compatibility and maintainability. - Includes `autoprefixer-rails` to handle vendor prefixes automatically.
- Configures Autoprefixer to generate source maps to simplify CSS debugging. - Registers a custom processor to handle source map generation. - Installs and uninstalls the custom processor to ensure it's used correctly within the asset pipeline.
- Enables SASS source maps in the development environment for easier CSS debugging.
- Sets SASS output style to compressed for smaller file sizes - Disables SASS source maps in production for better performance
- Updates stylesheet for better readability and consistency - Converts font-size declaration to use rem units for better scalability - Adjusts spacing and alignment of elements
- Refactors the application stylesheet by updating the import syntax for increased clarity. - Removes the now redundant `sass-rails` dependency as part of the spike.
Updates styles in the ppd.scss file following the removal of Sass. - Adjusts font sizes for headings to ensure consistent typography across different screen sizes. - Modifies form group display to utilise flexbox for improved layout control and spacing. - Updates label styles for better alignment and consistency, especially for checkboxes, radio buttons, and date inputs. - Refines form control styling, including width, height, padding, and font size, for a more uniform appearance. - Styles list-inline elements within forms to use inline-flex with a gap for consistent spacing. - Enhances input group addon styling, extending input group text and adjusting padding. - Aligns radio and checkbox elements within horizontal forms for improved visual consistency. - Modifies modal styling, setting a fixed width and adjusting padding and font sizes. - Improves modal header and footer alignment and styling. - Updates close button appearance for consistency. - Styles the help modal's dl-horizontal element using flexbox for improved layout and spacing.
- Updates the data attributes for dismissing modals to be compatible with Bootstrap 5. - Replaces the default button style with an outline style for visual consistency.
- Wraps the email address in a span element. - Allows for more flexible layout of the email address, integrating it from the surrounding paragraph visually.
- Changes `div.form-group` to `fieldset.form-group` for semantic correctness. - Adds a legend to the fieldset to improve accessibility. - Updates the date input field to use a fieldset, improving its grouping and accessibility.
- Replaces `bootstrap-sass` with the `bootstrap` gem for Dart Sass compatibility. - Adds Sass source maps for easier debugging in development. - Includes a custom initialiser to handle Autoprefixer complexities with the latest Bootstrap gem. - Modernises application stylesheets and formats styles for consistency after the Sass migration. - Improves asset compression settings for smaller, faster-loading bundles. - Updates modal dismissal behaviour and form grouping following Bootstrap notation for cleaner markup and better usability.
- Removes duplicated _search_form partial file and its import from the application stylesheet. - Simplifies updates for components in future
- Restores Popper.js as a dependency for Bootstrap.
- Enhances the responsiveness of action buttons across different screen sizes. - Improves the alignment and spacing of actions within forms. - Adjusts button widths to optimise space usage on both small and larger screens.
- Replaces the `lighten` function with `color.adjust` for better Sass compatibility, mitigating deprecation warnings. - Removes media query from heading styles. - Removes the need for extending the input-group-text class. - Update form styles for consistency and responsiveness across screen sizes, improving the user interface.
- Removes the duplicate `dartsass-sprockets` inclusion. - Moves local gem path block into development block
- Prevents SASS deprecation warnings from cluttering the logs when using dependencies. - Provides a cleaner output, aiding in debugging and overall application maintainability.
- Introduces consistent padding to page elements for enhanced visual appeal - Modifies form group spacing for better readability - Adjusts column widths for improved responsiveness
- Restores basic styling for the cookie banner component. - Ensures the banner uses a standard sans-serif font stack for readability. - Applies padding and a bottom border to visually separate the banner.
- Only appends url info if it exists which cleans up the trailing whitespace in current log
- Configures the application to silence SASS deprecation warnings to assist in a smoother transition when migrating away from `@import` syntax to newer `@use` and `@forward` rules. - Also cleans up application required modules by removing unused instead of commenting out
- Removes the sass-rails gem and related dependencies. - Cleans up unused dependencies.
- Introduces a new `update` task that checks for outdated dependencies. - Uses `yarn upgrade-interactive` if Yarn is being used. - Runs `bundle outdated --only-explicit` to check Ruby gems. - Unifies approach to help keep dependencies up to date.
- Unifies the Makefile to streamline the build and deployment processes. - Introduces scripted `help` target approach - Refactors targets for clarity and adds documentation through inline comments, providing help messages for each target. - Simplifies asset compilation and cleaning processes for improved maintainability. - Reorganises targets for readability
- Mirrors approach in other LR Apps - Wraps the error page content in a row and column structure for better layout and responsiveness. - Adds a specific message for the 422 status code, improving user guidance. - Changes "Forbidden" to "Request denied" for clearer communication of access restrictions.
- Prevents future commits of local TODO files.
- Replaces Ruby Sass with Dart Sass and updates the Bootstrap gem to align with modern front-end tooling. - Modernises stylesheets to be compatible with the new Sass toolchain and Bootstrap conventions. - Improves asset compression to reduce bundle sizes and load times. - Updates modal dismissal behaviour and form styling to match the latest Bootstrap notation, enhancing usability. - Converts form groups to semantic fieldsets to improve accessibility. - Enhances error page layout and status messages for a better user experience. - Adds `update` Makefile target for dependency management. - Removes deprecated dependencies and duplicated partials to streamline the codebase. docs: Updates CHANGELOG with release notes for version 2.3.0 Relates to #309
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
Migrated CSS tooling from deprecated
bootstrap-sasstobootstrapgem withDart Sass compatibility, modernising stylesheets and improving asset pipeline.
Specific to ticket #309
Changes
bootstrap-sasswithbootstrapgem for Dart Sass compatibilityupdatetargetsass-railsgemBreaking Changes
None
Checklist
Testing
Unit tests added/updatedBuild & Assets
Process & Quality
Documentation updated