Added GS051 rules for custom heading and body fonts (#561)

ref DES-852

lib/checks/051-custom-fonts-css-properties.js

@@ -0,0 +1,51 @@
+const _ = require('lodash');
+const spec = require('../specs');
+const versions = require('../utils').versions;
+
+const checkCustomFontsCssProperties = function checkCustomFontsCssProperties(theme, options) {
+    const checkVersion = _.get(options, 'checkVersion', versions.default);
+    let ruleSet = spec.get([checkVersion]);
+
+    // CASE: 051-custom-fonts-css-properties checks only needs `rules` that start with `GS051-`
+    const ruleRegex = /GS051-.*/g;
+
+    ruleSet = _.pickBy(ruleSet.rules, function (rule, ruleCode) {
+        if (ruleCode.match(ruleRegex)) {
+            return rule;
+        }
+    });
+
+    _.each(ruleSet, function (check, ruleCode) {
+        if (theme.files) {
+            // Check CSS files and HBS files for presence of the classes
+            _.each(theme.files, function (themeFile) {
+                if (!['.css', '.hbs'].includes(themeFile.ext)) {
+                    return;
+                }
+
+                try {
+                    let cssPresent = themeFile.content.match(check.regex);
+
+                    if (cssPresent && theme.results.pass.indexOf(ruleCode) === -1) {
+                        theme.results.pass.push(ruleCode);
+                    }
+                } catch (err) {
+                    // ignore for now
+                }
+            });
+        }
+
+        if (!theme.files || (theme.results.pass.indexOf(ruleCode) === -1 && !Object.prototype.hasOwnProperty.call(theme.results.fail, ruleCode))) {
+            theme.results.fail[ruleCode] = {};
+            theme.results.fail[ruleCode].failures = [
+                {
+                    ref: 'styles'
+                }
+            ];
+        }
+    });
+
+    return theme;
+};
+
+module.exports = checkCustomFontsCssProperties;

lib/specs/canary.js

@@ -750,6 +750,12 @@ let rules = {
         rule: 'Add a string to translate to the <code>{{t}}</code> helper',
         regex: /{{\s*t\s*(["'“”]?)\s*\1?\s*}}/g,
         details: oneLineTrim`Translate helper <code>{{t}}</code> expects a string. Example: <code>{{ t "Hello world" }}</code>. Find more information about the translate helper <a href="${docsBaseUrl}helpers/translate" target=_blank>here</a>.`
+    },
+    'GS051-CUSTOM-FONTS': {
+        level: 'warning',
+        rule: `Missing support for custom fonts`,
+        details: oneLineTrim`CSS variables for Ghost font settings are not present: <code>--gh-font-heading</code>, <code>--gh-font-body</code>`,
+        regex: /^(?=[\s\S]*--gh-font-heading)(?=[\s\S]*--gh-font-body)/
     }
 };
 

test/051-custom-fonts-css-properties.test.js

@@ -0,0 +1,34 @@
+const should = require('should'); // eslint-disable-line no-unused-vars
+const utils = require('./utils');
+const thisCheck = require('../lib/checks/051-custom-fonts-css-properties');
+
+describe('051 custom fonts CSS properties', function () {
+    const options = {checkVersion: 'v5'};
+
+    it('should show warnings for missing custom heading and body font CSS properties when they are not in any .hbs or .css file', function (done) {
+        utils.testCheck(thisCheck, '051-custom-fonts-css-properties/missing', options).then((output) => {
+            output.should.be.a.ValidThemeObject();
+
+            output.results.pass.should.be.an.Array().which.is.empty();
+
+            output.results.fail.should.be.an.Object().with.keys('GS051-CUSTOM-FONTS');
+
+            output.results.fail['GS051-CUSTOM-FONTS'].should.be.a.ValidFailObject();
+
+            done();
+        }).catch(done);
+    });
+
+    it('should output nothing when custom heading and body font CSS properties are present', function (done) {
+        utils.testCheck(thisCheck, '051-custom-fonts-css-properties/valid', options).then((output) => {
+            output.should.be.a.ValidThemeObject();
+
+            output.results.pass.should.be.an.Array().with.lengthOf(1);
+            output.results.pass.should.containEql('GS051-CUSTOM-FONTS');
+
+            output.results.fail.should.be.an.Object().which.is.empty();
+
+            done();
+        }).catch(done);
+    });
+});

test/fixtures/themes/051-custom-fonts-css-properties/missing/default.hbs

@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Test Theme</title>
+</head>
+<body>
+
+<h1>{{@blog.title}}</h1>
+
+</body>
+</html>

test/fixtures/themes/051-custom-fonts-css-properties/valid/assets/my.css

@@ -0,0 +1,4 @@
+:root {
+    --gh-font-heading: "";
+    --gh-font-body: "";
+}

test/fixtures/themes/051-custom-fonts-css-properties/valid/default.hbs

@@ -0,0 +1,12 @@
+<html>
+<head>
+    <title>Test Theme</title>
+    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
+    {{ghost_head}}
+</head>
+<body>
+
+    <h1>{{@blog.title}}</h1>
+    {{ghost_foot}}
+</body>
+</html>

test/format.test.js

@@ -380,7 +380,7 @@ describe('Format', function () {
                 theme.results.recommendation.all.length.should.eql(2);
                 theme.results.recommendation.byFiles['package.json'].length.should.eql(2);
 
-                theme.results.warning.all.length.should.eql(6);
+                theme.results.warning.all.length.should.eql(7);
                 theme.results.warning.byFiles['default.hbs'].length.should.eql(2);
 
                 theme.results.error.all.length.should.eql(23);
@@ -414,7 +414,7 @@ describe('Format', function () {
                 theme.results.recommendation.byFiles['package.json'].length.should.eql(2);
 
                 theme.results.error.all.length.should.eql(105);
-                theme.results.warning.all.length.should.eql(8);
+                theme.results.warning.all.length.should.eql(9);
 
                 const errorErrors = theme.results.error.all
                     .filter(error => (error.level === 'error') && !error.fatal);