Skip to content

Commit

Permalink
[FINNA-2636] Improve scss conversion (#3055)
Browse files Browse the repository at this point in the history 
Clarifies the shades of gray definitions, adds more rules to lessToSass conversion and fixes mobile toolbar.
  • Loading branch information
@EreMaijala
EreMaijala authored Oct 15, 2024
1 parent 180b6d4 commit dbab990
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 105 deletions.
257 changes: 171 additions & 86 deletions Gruntfile.local.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,27 @@ module.exports = function(grunt) {
grunt.registerTask("finna:lessToSass", function finnaLessToSassFunc() {
const exclude = grunt.option('exclude');
const excludedFiles = exclude ? exclude.split(',') : [];
const include = grunt.option('include');
const includedFiles = include ? include.split(',') : [];

const sharedFileOpts = {
expand: true,
src: ['*.less', '**/*.less'],
filter: function(filepath) {
return !excludedFiles.includes(filepath);
if (includedFiles.length > 0) {
for (let included of includedFiles) {
if (filepath.endsWith(included)) {
return true;
}
}
return false;
}
for (let excluded of excludedFiles) {
if (filepath.endsWith(excluded)) {
return false;
}
}
return true;
},
ext: '.scss'
};
Expand Down Expand Up @@ -57,96 +72,166 @@ module.exports = function(grunt) {
dest: 'themes/custom/scss'
},
];

const replacements = [
// Activate SCSS
{
pattern: /\/\* #SCSS>/gi,
replacement: "/* #SCSS> */",
order: -1 // Do before anything else
},
{
pattern: /<#SCSS \*\//gi,
replacement: "/* <#SCSS */",
order: -1
},
// Deactivate LESS
{
pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
replacement: "",
order: -1
},
{ // Change separator in @include statements
pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
replacement: function mixinCommas(match, $1, $2) {
return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
},
order: 4 // after defaults included in less-to-sass
},
{ // Remove unquote
pattern: /unquote\("([^"]+)"\)/gi,
replacement: function ununquote(match, $1) {
return $1;
},
order: 4
},
{ // Fix tilde literals
pattern: /~'(.*?)'/gi,
replacement: '$1',
order: 4
},
{ // Inline &:extends converted
pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
replacement: '@extend $1',
order: 4
},
{ // Wrap variables in calcs with #{}
pattern: /calc\([^;]+/gi,
replacement: function calcVariables(match) {
return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
},
order: 4
},
{ // Wrap variables set to css variables with #{}
pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
replacement: '$1#{$2}',
order: 5
},
{ // Remove !default from extends (icons.scss)
pattern: /@extend ([^;}]+) !default;/gi,
replacement: '@extend $1;',
order: 6
},
{ // Revert invalid @ => $ changes for css rules:
pattern: /\$(supports|container) \(/gi,
replacement: '@$1 (',
order: 7
},
{ // Revert @if => $if change:
pattern: /\$if \(/gi,
replacement: '@if (',
order: 7
},
{ // Revert @use => $use change:
pattern: /\$use '/gi,
replacement: "@use '",
order: 7
},
{ // Fix comparison:
pattern: / ==< /gi,
replacement: ' <= ',
order: 7
},
{ // Remove !important from variables:
pattern: /(?<!\(.*)(\$.+):(.+)\s*!important\s*;/g,
replacement: '$1:$2;',
order: 8
},
{ // fadein => fade-in:
pattern: /fadein\((\S+),\s*(\S+)\)/g,
replacement: function (match, color, adjustment) {
return 'fade-in(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')';
},
order: 8
},
{ // fadeout => fade-out:
pattern: /fadeout\((\S+),\s*(\S+)\)/g,
replacement: function (match, color, adjustment) {
return 'fade-out(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')';
},
order: 8
},
{ // replace invalid characters in variable names:
pattern: /\$([^: };/]+)/g,
replacement: function (match, variable) {
return '$' + variable.replace('.', '__');
},
order: 9
},
];
if (!grunt.option('no-default')) {
replacements.push(
{ // Add !default (but avoid messing with function params):
pattern: /(?<!\(.*)(\$.+):(.+);/g,
replacement: '$1:$2 !default;',
order: 19
}
);
}
if (grunt.option('replace-vars')) {
const vars = {
'action-link-color': '#007c90',
'gray-lighter': '#d1d1d1',
'gray-ultralight': '#f7f7f7',
'gray-light': '#595959',
'gray-darker': '#000',
'gray-dark': '#121212',
'gray': '#2b2b2b',
'body-bg': '#fff',
'screen-xs': '480px',
'screen-xs-min': '480px',
'screen-xs-max': '767px',
'screen-sm': '768px',
'screen-sm-min': '768px',
'screen-md': '992px',
'screen-md-min': '992px',
'navbar-default-link-color': '#fff',
'content-font-size-base': '16px',
'content-headings-font-size-h1': '28px',
'content-headings-font-size-h2': '24px',
'content-headings-font-size-h3': '21px',
'content-headings-font-size-h4': '18px',
};
let order = 20;
// Change variables where used (but not where declared!):
Object.entries(vars).forEach(([src, dst]) => {
replacements.push(
{
pattern: new RegExp("(.+)\\$(" + src + ")\\b", "g"),
replacement: '$1' + dst + ' /* $2 */',
order: order
}
);
++order;
});
}

console.log(themeDir ? "Converting theme " + themeDir : "Converting Finna default themes");
grunt.config.set('lessToSass', {
convert: {
files: files,
options: {
replacements: [
// Activate SCSS
{
pattern: /\/\* #SCSS>/gi,
replacement: "/* #SCSS> */",
order: -1 // Do before anything else
},
{
pattern: /<#SCSS \*\//gi,
replacement: "/* <#SCSS */",
order: -1
},
// Deactivate LESS
{
pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
replacement: "",
order: -1
},
{ // Change separator in @include statements
pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
replacement: function mixinCommas(match, $1, $2) {
return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
},
order: 4 // after defaults included in less-to-sass
},
{ // Remove unquote
pattern: /unquote\("([^"]+)"\)/gi,
replacement: function ununquote(match, $1) {
return $1;
},
order: 4
},
{ // Fix tilde literals
pattern: /~'(.*?)'/gi,
replacement: '$1',
order: 4
},
{ // Inline &:extends converted
pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
replacement: '@extend $1',
order: 4
},
{ // Wrap variables in calcs with #{}
pattern: /calc\([^;]+/gi,
replacement: function calcVariables(match) {
return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
},
order: 4
},
{ // Wrap variables set to css variables with #{}
pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
replacement: '$1#{$2}',
order: 5
},
{ // Remove !default from extends (icons.scss)
pattern: /@extend ([^;}]+) !default;/gi,
replacement: '@extend $1;',
order: 6
},
{ // Revert invalid @ => $ changes for css rules:
pattern: /\$(supports|container) \(/gi,
replacement: '@$1 (',
order: 7
},
{ // Revert @if => $if change:
pattern: /\$if \(/gi,
replacement: '@if (',
order: 7
},
{ // Revert @use => $use change:
pattern: /\$use '/gi,
replacement: "@use '",
order: 7
},
{ // Fix comparison:
pattern: / ==< /gi,
replacement: ' <= ',
order: 7
},
{ // Add !default (but avoid messing with function params):
pattern: /(?<!\(.*)(\$.+):(.+);/g,
replacement: '$1:$2 !default;',
order: 8
}
]
replacements: replacements
}
}
});
Expand Down
4 changes: 2 additions & 2 deletions themes/finna2/less/finna/mobile-toolbar.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@media (max-width: @screen-xs-max) {
.mobile-toolbar {
.mobile-toolbar {
@media (max-width: @screen-xs-max) {
border-top: 1px solid @body-bg;
position: fixed;
height: 44px;
Expand Down
14 changes: 7 additions & 7 deletions themes/finna2/less/global/bootstrap-variable-overrides.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@

@gray: #2b2b2b;

@gray-darker: darken(@gray, 40%);
@gray-dark: darken(@gray, 10%);
@gray-light: lighten(@gray, 18%); // mix(@body-bg, contrast(@body-bg), 40%)
@gray-slightly-lighter: lighten(@gray, 29%);
@gray-mid-light: lighten(@gray, 40%); // dark background: mix(@body-bg, contrast(@body-bg), 65%)
@gray-lighter: lighten(@gray, 65%); // dark background: mix(@body-bg, contrast(@body-bg), 80%)
@gray-ultralight: lighten(@gray, 80%); // dark background: mix(@body-bg, contrast(@body-bg), 95%)
@gray-darker: #000;
@gray-dark: #121212;
@gray-light: #595959;
@gray-slightly-lighter: #757575;
@gray-mid-light: #919191;
@gray-lighter: #d1d1d1;
@gray-ultralight: #f7f7f7;

// Brand Colors
@brand-primary: #007c90;
Expand Down
2 changes: 1 addition & 1 deletion themes/finna2/scss/finna/image-popup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
left: 10px;
width: 40px;
z-index: 1000;
background: fadeout($gray, 40%);
background: fade-out($gray, 0.4);
color: white;
border-radius: 5px;
@media (min-width: $screen-sm-min) {
Expand Down
4 changes: 2 additions & 2 deletions themes/finna2/scss/finna/mobile-toolbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@media (max-width: $screen-xs-max) {
.mobile-toolbar {
.mobile-toolbar {
@media (max-width: $screen-xs-max) {
border-top: 1px solid $body-bg;
position: fixed;
height: 44px;
Expand Down
14 changes: 7 additions & 7 deletions themes/finna2/scss/global/bootstrap-variable-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@

$gray: #2b2b2b !default;

$gray-darker: darken($gray, 40%) !default;
$gray-dark: darken($gray, 10%) !default;
$gray-light: lighten($gray, 18%) !default; // mix($body-bg, contrast($body-bg), 40%)
$gray-slightly-lighter: lighten($gray, 29%) !default;
$gray-mid-light: lighten($gray, 40%) !default; // dark background: mix($body-bg, contrast($body-bg), 65%)
$gray-lighter: lighten($gray, 65%) !default; // dark background: mix($body-bg, contrast($body-bg), 80%)
$gray-ultralight: lighten($gray, 80%) !default; // dark background: mix($body-bg, contrast($body-bg), 95%)
$gray-darker: #000 !default;
$gray-dark: #121212 !default;
$gray-light: #595959 !default;
$gray-slightly-lighter: #757575 !default;
$gray-mid-light: #919191 !default;
$gray-lighter: #d1d1d1 !default;
$gray-ultralight: #f7f7f7 !default;

// Brand Colors
$brand-primary: #007c90 !default;
Expand Down

0 comments on commit dbab990

Please sign in to comment.