Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BAH-4150] Replace Compass with Grunt-SASS for SASS Compilation #1027

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[BAH-4150] Replace Compass with Grunt-SASS for SASS Compilation #1027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df3d864
Refactor. Update Gruntfile to use Sass instead of Compass and enhance…
ayazurrehman Dec 22, 2024
6d54599
Enhance Gruntfile.js by adding a blank line for improved readability
ayazurrehman Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 32 additions & 14 deletions ui/Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ module.exports = function (grunt) {
nodeModules: 'node_modules'
};


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-01-15 at 8 29 07 AM

@ayazurrehman It seems there is an ESLint error in your Gruntfile.js at line 15 due to multiple consecutive blank lines, which violates the no-multiple-empty-lines rule. This rule enforces that there should not be more than one blank line in the code for better readability and consistency.

To fix this error, you can remove the extra blank line(s) present after line 15.

I also noticed that this might have been added intentionally. Could you explain the reasoning behind this decision? If the blank lines serve a specific purpose, let us know so we can determine the best approach to resolve this issue without affecting the code's intent.

var libraryCSSFiles = [
'components/select2/select2.css',
'components/ngDialog/css/ngDialog.min.css',
Expand Down Expand Up @@ -80,9 +81,9 @@ module.exports = function (grunt) {
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
compass: {
sass: {
files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'],
tasks: ['compass:debug']
tasks: ['sass:debug']
}
},
clean: {
Expand Down Expand Up @@ -162,21 +163,38 @@ module.exports = function (grunt) {
root: '.'
}
},
compass: {
sass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '<%= yeoman.app %>/styles/',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/components',
relativeAssets: true
implementation: require('sass'),
sourceMap: true,
includePaths: [
'<%= yeoman.app %>/components',
'<%= yeoman.app %>/styles'
]
},
dist: {
options: {
outputStyle: 'compressed'
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles',
src: ['**/*.{scss,sass}'],
dest: '<%= yeoman.app %>/styles/',
ext: '.css'
}]
},
dist: {},
debug: {
options: {
debugInfo: true
}
outputStyle: 'expanded'
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles',
src: ['**/*.{scss,sass}'],
dest: '<%= yeoman.app %>/styles/',
ext: '.css'
}]
}
},
// Renames files for browser caching purposes
Expand Down Expand Up @@ -534,7 +552,7 @@ module.exports = function (grunt) {
'eslint',
'copy:nodeModules',
'clean:dist',
'compass:dist',
'sass:dist',
'useminPrepare',
'ngAnnotate',
'concat',
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/appointmentScheduling.css.map
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-01-15 at 8 34 12 AM

@ayazurrehman During the validation of this PR, we observed the following warning appearing multiple times when running the yarn ci command on the new changes:

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

This warning indicates that the @import rules used in your Sass files are outdated and will no longer be supported in future versions of Dart Sass. It is recommended to replace these @import rules with the newer @use or @forward rules, as they offer better modularity and clearer dependency management.

Could you look into these warnings and update the relevant Sass files accordingly? Addressing this will ensure a more seamless and future-proof build process. Let us know if you need any guidance or assistance in resolving this.

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions ui/app/styles/appointments/components.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions ui/app/styles/bahmni-components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ ul li a.back-btn, ul li a.back-btn:hover, button.back-btn, a.back-btn {
line-height: 1;
margin: 0;
padding: 0;
@media screen and(max-width:470px){
@media screen and (max-width: 470px) {
font-size: 22px;
}
}
Expand All @@ -399,7 +399,7 @@ ul li a.back-btn, ul li a.back-btn:hover, button.back-btn, a.back-btn {
}
}
}
@media screen and(max-width:470px){
@media screen and (max-width: 470px) {
padding: 4px 5px 5px;
}
}
Expand Down
29 changes: 28 additions & 1 deletion ui/app/styles/bahmni-helper/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

/*doc
---
title: Colors
Expand Down Expand Up @@ -332,3 +331,31 @@ $primaryItalicFont: "OpenSansItalic";
color: $text;
}
}

// Grid system mixins
@mixin column($x, $columns: 12) {
display: inline;
float: left;
width: $total-width * ((($gutter-width + $column-width) * $x - $gutter-width) / ($gutter-width + $column-width * $columns));
margin: 0 $total-width * ($gutter-width * 0.5) / ($gutter-width + $column-width * $columns);
}

// Additional utility mixins
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}

@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}

@mixin transition($transition...) {
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
2 changes: 1 addition & 1 deletion ui/app/styles/bahmni-layout/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@
margin-right: 10px;
}

@media screen and(max-width:470px) {
@media screen and (max-width: 470px) {
margin: 0;
}
}
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/clinical.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/app/styles/clinical/_consultation.scss
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I encountered an issue while testing the new dist built from the changes in this PR. Specifically, when trying to access the Clinical and Appointments modules, the screen displays as a blank white page with no content rendered.

Although there is a deprecation warning related to the usage of @import in Sass (Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.), I am not certain if this is the root cause of the issue.

Below are my system specifications for reference:

❯ nvm -v  
0.39.7  

❯ npm -v  
10.2.4  

❯ sw_vers  
ProductName: macOS  
ProductVersion: 15.2  
BuildVersion: 24C101  

MacBook Pro (16-inch, 2021) Apple M1 Pro

Could you investigate this issue and identify the potential cause? Let us know if any additional details are needed to troubleshoot this further. Thank you!

Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@

.dosage-days,
.drug-name {
@media screen and(max-width: 1024px) {
@media screen and (max-width: 1024px) {
max-width: 45%;
width: auto;
}
Expand Down
6 changes: 3 additions & 3 deletions ui/app/styles/clinical/_diagnosis.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
box-sizing: border-box;
border-bottom: none;

@media screen and(min-width: 992px) {
@media screen and (min-width: 992px) {
border-bottom: 1px solid $lightGray;
}
}
Expand Down Expand Up @@ -442,7 +442,7 @@
right: 20px;
bottom: 20px;

@media screen and(min-width: 992px) {
@media screen and (min-width: 992px) {
top: 20px;
bottom: auto;
right: 215px;
Expand Down Expand Up @@ -747,7 +747,7 @@
.col2.notes-subscriber {
display: none;

@media screen and(min-width: 768px) {
@media screen and (min-width: 768px) {
display: block;
}
}
Expand Down
4 changes: 2 additions & 2 deletions ui/app/styles/clinical/_patientDashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1507,7 +1507,7 @@ table.treatments-details-table {
width: 50%;
float: left;

@media screen and(max-width:540px) {
@media screen and (max-width:540px) {
width: 100%;
}
}
Expand All @@ -1523,7 +1523,7 @@ table.treatments-details-table {
width: 50%;
}

@media screen and(max-width:540px) {
@media screen and (max-width:540px) {
width: 100%;
}
}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/clinical/_visit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
width: 50%;
}

@media screen and(max-width:540px) {
@media screen and (max-width: 540px) {
width: 100%;
}
}
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/clinicalPrint.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/app/styles/common/_bahmniGlobal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ u,
}

.print {
@media screen and(max-width: 700px) {
@media screen and (max-width: 700px) {
display: none;
}
}
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/home.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/app/styles/home/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ $gutter-width: 0;
$columns: 12;
$total-width: 100%;

@import "compass";
@import "bahmni-helper/variables";

/*** grid form elements css start ***/
.form-field-inline {
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/print.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ui/app/styles/registration.css.map
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions ui/app/styles/registrationPrint.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
"grunt": "^1.0.3",
"grunt-comment-toggler": "^0.2.2",
"grunt-contrib-clean": "2.0.0",
"grunt-contrib-compass": "1.1.1",
"grunt-contrib-concat": "1.0.1",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-cssmin": "~1.0.0",
Expand All @@ -87,6 +86,7 @@
"grunt-ng-annotate": "^3.0.0",
"grunt-preprocess": "^5.0.1",
"grunt-rename": "~0.1.3",
"grunt-sass": "^3.1.0",
"grunt-usemin": "~3.1.1",
"karma": "^4.0.0",
"karma-chrome-launcher": "^2.2.0",
Expand All @@ -97,7 +97,8 @@
"karma-ng-html2js-preprocessor": "^1.0.0",
"matchdep": "^2.0.0",
"react": "16.14.0",
"react-dom": "16.14.0"
"react-dom": "16.14.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With Compass now replaced by Grunt-Sass, could you please update the README with the relevant steps to build the UI? The issues I encountered during testing might have resulted from a missing step or a mistake during the build process.

Providing updated and accurate build instructions will help streamline the review process and ensure a more efficient validation of the changes. Kindly address this at the earliest. Thank you!

"sass": "^1.32.8"
},
"resolutions": {
"**/**/xmlhttprequest-ssl": "^1.6.1",
Expand Down
Loading