Skip to content

Commit dbab990

Browse files
EreMaijalaEreMaijala
authored
[FINNA-2636] Improve scss conversion (#3055)
Clarifies the shades of gray definitions, adds more rules to lessToSass conversion and fixes mobile toolbar.
1 parent 180b6d4 commit dbab990

File tree

6 files changed

+190
-105
lines changed

6 files changed

+190
-105
lines changed

‎Gruntfile.local.js

Lines changed: 171 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,27 @@ module.exports = function(grunt) {
2323
grunt.registerTask("finna:lessToSass", function finnaLessToSassFunc() {
2424
const exclude = grunt.option('exclude');
2525
const excludedFiles = exclude ? exclude.split(',') : [];
26+
const include = grunt.option('include');
27+
const includedFiles = include ? include.split(',') : [];
2628

2729
const sharedFileOpts = {
2830
expand: true,
2931
src: ['*.less', '**/*.less'],
3032
filter: function(filepath) {
31-
return !excludedFiles.includes(filepath);
33+
if (includedFiles.length > 0) {
34+
for (let included of includedFiles) {
35+
if (filepath.endsWith(included)) {
36+
return true;
37+
}
38+
}
39+
return false;
40+
}
41+
for (let excluded of excludedFiles) {
42+
if (filepath.endsWith(excluded)) {
43+
return false;
44+
}
45+
}
46+
return true;
3247
},
3348
ext: '.scss'
3449
};
@@ -57,96 +72,166 @@ module.exports = function(grunt) {
5772
dest: 'themes/custom/scss'
5873
},
5974
];
75+
76+
const replacements = [
77+
// Activate SCSS
78+
{
79+
pattern: /\/\* #SCSS>/gi,
80+
replacement: "/* #SCSS> */",
81+
order: -1 // Do before anything else
82+
},
83+
{
84+
pattern: /<#SCSS \*\//gi,
85+
replacement: "/* <#SCSS */",
86+
order: -1
87+
},
88+
// Deactivate LESS
89+
{
90+
pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
91+
replacement: "",
92+
order: -1
93+
},
94+
{ // Change separator in @include statements
95+
pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
96+
replacement: function mixinCommas(match, $1, $2) {
97+
return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
98+
},
99+
order: 4 // after defaults included in less-to-sass
100+
},
101+
{ // Remove unquote
102+
pattern: /unquote\("([^"]+)"\)/gi,
103+
replacement: function ununquote(match, $1) {
104+
return $1;
105+
},
106+
order: 4
107+
},
108+
{ // Fix tilde literals
109+
pattern: /~'(.*?)'/gi,
110+
replacement: '$1',
111+
order: 4
112+
},
113+
{ // Inline &:extends converted
114+
pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
115+
replacement: '@extend $1',
116+
order: 4
117+
},
118+
{ // Wrap variables in calcs with #{}
119+
pattern: /calc\([^;]+/gi,
120+
replacement: function calcVariables(match) {
121+
return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
122+
},
123+
order: 4
124+
},
125+
{ // Wrap variables set to css variables with #{}
126+
pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
127+
replacement: '$1#{$2}',
128+
order: 5
129+
},
130+
{ // Remove !default from extends (icons.scss)
131+
pattern: /@extend ([^;}]+) !default;/gi,
132+
replacement: '@extend $1;',
133+
order: 6
134+
},
135+
{ // Revert invalid @ => $ changes for css rules:
136+
pattern: /\$(supports|container) \(/gi,
137+
replacement: '@$1 (',
138+
order: 7
139+
},
140+
{ // Revert @if => $if change:
141+
pattern: /\$if \(/gi,
142+
replacement: '@if (',
143+
order: 7
144+
},
145+
{ // Revert @use => $use change:
146+
pattern: /\$use '/gi,
147+
replacement: "@use '",
148+
order: 7
149+
},
150+
{ // Fix comparison:
151+
pattern: / ==< /gi,
152+
replacement: ' <= ',
153+
order: 7
154+
},
155+
{ // Remove !important from variables:
156+
pattern: /(?<!\(.*)(\$.+):(.+)\s*!important\s*;/g,
157+
replacement: '$1:$2;',
158+
order: 8
159+
},
160+
{ // fadein => fade-in:
161+
pattern: /fadein\((\S+),\s*(\S+)\)/g,
162+
replacement: function (match, color, adjustment) {
163+
return 'fade-in(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')';
164+
},
165+
order: 8
166+
},
167+
{ // fadeout => fade-out:
168+
pattern: /fadeout\((\S+),\s*(\S+)\)/g,
169+
replacement: function (match, color, adjustment) {
170+
return 'fade-out(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')';
171+
},
172+
order: 8
173+
},
174+
{ // replace invalid characters in variable names:
175+
pattern: /\$([^: };/]+)/g,
176+
replacement: function (match, variable) {
177+
return '$' + variable.replace('.', '__');
178+
},
179+
order: 9
180+
},
181+
];
182+
if (!grunt.option('no-default')) {
183+
replacements.push(
184+
{ // Add !default (but avoid messing with function params):
185+
pattern: /(?<!\(.*)(\$.+):(.+);/g,
186+
replacement: '$1:$2 !default;',
187+
order: 19
188+
}
189+
);
190+
}
191+
if (grunt.option('replace-vars')) {
192+
const vars = {
193+
'action-link-color': '#007c90',
194+
'gray-lighter': '#d1d1d1',
195+
'gray-ultralight': '#f7f7f7',
196+
'gray-light': '#595959',
197+
'gray-darker': '#000',
198+
'gray-dark': '#121212',
199+
'gray': '#2b2b2b',
200+
'body-bg': '#fff',
201+
'screen-xs': '480px',
202+
'screen-xs-min': '480px',
203+
'screen-xs-max': '767px',
204+
'screen-sm': '768px',
205+
'screen-sm-min': '768px',
206+
'screen-md': '992px',
207+
'screen-md-min': '992px',
208+
'navbar-default-link-color': '#fff',
209+
'content-font-size-base': '16px',
210+
'content-headings-font-size-h1': '28px',
211+
'content-headings-font-size-h2': '24px',
212+
'content-headings-font-size-h3': '21px',
213+
'content-headings-font-size-h4': '18px',
214+
};
215+
let order = 20;
216+
// Change variables where used (but not where declared!):
217+
Object.entries(vars).forEach(([src, dst]) => {
218+
replacements.push(
219+
{
220+
pattern: new RegExp("(.+)\\$(" + src + ")\\b", "g"),
221+
replacement: '$1' + dst + ' /* $2 */',
222+
order: order
223+
}
224+
);
225+
++order;
226+
});
227+
}
228+
60229
console.log(themeDir ? "Converting theme " + themeDir : "Converting Finna default themes");
61230
grunt.config.set('lessToSass', {
62231
convert: {
63232
files: files,
64233
options: {
65-
replacements: [
66-
// Activate SCSS
67-
{
68-
pattern: /\/\* #SCSS>/gi,
69-
replacement: "/* #SCSS> */",
70-
order: -1 // Do before anything else
71-
},
72-
{
73-
pattern: /<#SCSS \*\//gi,
74-
replacement: "/* <#SCSS */",
75-
order: -1
76-
},
77-
// Deactivate LESS
78-
{
79-
pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
80-
replacement: "",
81-
order: -1
82-
},
83-
{ // Change separator in @include statements
84-
pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
85-
replacement: function mixinCommas(match, $1, $2) {
86-
return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
87-
},
88-
order: 4 // after defaults included in less-to-sass
89-
},
90-
{ // Remove unquote
91-
pattern: /unquote\("([^"]+)"\)/gi,
92-
replacement: function ununquote(match, $1) {
93-
return $1;
94-
},
95-
order: 4
96-
},
97-
{ // Fix tilde literals
98-
pattern: /~'(.*?)'/gi,
99-
replacement: '$1',
100-
order: 4
101-
},
102-
{ // Inline &:extends converted
103-
pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
104-
replacement: '@extend $1',
105-
order: 4
106-
},
107-
{ // Wrap variables in calcs with #{}
108-
pattern: /calc\([^;]+/gi,
109-
replacement: function calcVariables(match) {
110-
return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
111-
},
112-
order: 4
113-
},
114-
{ // Wrap variables set to css variables with #{}
115-
pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
116-
replacement: '$1#{$2}',
117-
order: 5
118-
},
119-
{ // Remove !default from extends (icons.scss)
120-
pattern: /@extend ([^;}]+) !default;/gi,
121-
replacement: '@extend $1;',
122-
order: 6
123-
},
124-
{ // Revert invalid @ => $ changes for css rules:
125-
pattern: /\$(supports|container) \(/gi,
126-
replacement: '@$1 (',
127-
order: 7
128-
},
129-
{ // Revert @if => $if change:
130-
pattern: /\$if \(/gi,
131-
replacement: '@if (',
132-
order: 7
133-
},
134-
{ // Revert @use => $use change:
135-
pattern: /\$use '/gi,
136-
replacement: "@use '",
137-
order: 7
138-
},
139-
{ // Fix comparison:
140-
pattern: / ==< /gi,
141-
replacement: ' <= ',
142-
order: 7
143-
},
144-
{ // Add !default (but avoid messing with function params):
145-
pattern: /(?<!\(.*)(\$.+):(.+);/g,
146-
replacement: '$1:$2 !default;',
147-
order: 8
148-
}
149-
]
234+
replacements: replacements
150235
}
151236
}
152237
});

‎themes/finna2/less/finna/mobile-toolbar.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@media (max-width: @screen-xs-max) {
2-
.mobile-toolbar {
1+
.mobile-toolbar {
2+
@media (max-width: @screen-xs-max) {
33
border-top: 1px solid @body-bg;
44
position: fixed;
55
height: 44px;

‎themes/finna2/less/global/bootstrap-variable-overrides.less

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99

1010
@gray: #2b2b2b;
1111

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

2020
// Brand Colors
2121
@brand-primary: #007c90;

‎themes/finna2/scss/finna/image-popup.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
left: 10px;
115115
width: 40px;
116116
z-index: 1000;
117-
background: fadeout($gray, 40%);
117+
background: fade-out($gray, 0.4);
118118
color: white;
119119
border-radius: 5px;
120120
@media (min-width: $screen-sm-min) {

‎themes/finna2/scss/finna/mobile-toolbar.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@media (max-width: $screen-xs-max) {
2-
.mobile-toolbar {
1+
.mobile-toolbar {
2+
@media (max-width: $screen-xs-max) {
33
border-top: 1px solid $body-bg;
44
position: fixed;
55
height: 44px;

‎themes/finna2/scss/global/bootstrap-variable-overrides.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99

1010
$gray: #2b2b2b !default;
1111

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

2020
// Brand Colors
2121
$brand-primary: #007c90 !default;

0 commit comments

Comments
 (0)