c3b-lint 0.0.6 → 0.0.8

package/README.md

@@ -15,7 +15,7 @@ markdown that a tool can check, with one command and one config to install. It r
    rules (that is a token by definition), and a token nothing uses (CSS `var()`, or JS/HTML by name).
 4. **HTML** on every page under `src/` (partials are skipped): doctype, `lang`, charset, viewport without
    `user-scalable=no`, the required head set (title, description, absolute canonical, `og:*` with an absolute
-   `og:image`, `twitter:card`, one SVG favicon; a `noindex` page is excused the canonical and social tags), stylesheet order (`reset`, `tokens`, `main`, …, page file last),
+   `og:image`, `twitter:card`, one SVG favicon; a `noindex` page is excused the canonical and social tags), no external stylesheets (webfonts are self-hosted), stylesheet order (`reset`, `tokens`, `main`, …, page file last),
    the skip-link rule (`<a id="skip-link" href="#main">` first in `<body>` when there is a header or nav, absent
    otherwise, `<main id="main">`), one `<h1>`, `alt` on every image, no inline handlers, no `<style>` or `style=""`
    (except a JS-driven custom property), relative paths only, kebab-case ids and classes, no duplicate ids,
@@ -25,7 +25,7 @@ markdown that a tool can check, with one command and one config to install. It r
    (an experiment under `src/experiment/<name>/` keeps its own beside its `index.html`), fonts only in
    `src/asset/font/` as woff2, file names starting with a letter. A directory whose plural-looking name is a proper
    name (a client's brand) is listed in `package.json` under `"c3b-lint": { "singularDirectories": [...] }`.
-6. The **500-line limit** on `src/**/*.{css,html}` (ESLint reports the JS).
+6. The **500-line limit** on `src/**/*.{css,html}` (ESLint reports the JS); inline `<svg>` art is not counted.
 7. That the project's **`.editorconfig`** is the shared one — it carries the JetBrains `ij_*` code-style keys, so
    WebStorm and IntelliJ format the same way without committing `.idea/`.
 

package/c3b-lint.js

@@ -129,7 +129,8 @@ function checkFileLengths() {
     let errors = 0;
     const files = globSync('src/**/*.{css,html}').filter((file) => !toPosix(file).includes('/vendor/'));
     for (const file of files.sort()) {
-        const content = readFileSync(file, 'utf8');
+        // inline <svg> is vector art, not hand-written markup: its lines are not counted
+        const content = readFileSync(file, 'utf8').replace(/<svg[\s\S]*?<\/svg>/g, '<svg/>');
         const lines = content.split('\n').length - (content.endsWith('\n') ? 1 : 0);
         if (lines > MAX_LINES) {
             console.log(`  error   ${ toPosix(file) } is ${ lines } lines (limit ${ MAX_LINES }) — split it by responsibility`);

package/check/css-tokens.js

@@ -40,6 +40,11 @@ function readTokens() {
         return tokens;
     }
     root.walkDecls(/^--/, (decl) => {
+        // the base definition only: a media-query override of a token is a different value for the
+        // same role, not a second token with that value
+        if (decl.parent.parent?.type === 'atrule' || tokens.has(decl.prop)) {
+            return;
+        }
         tokens.set(decl.prop, normalise(decl.value));
     });
 
@@ -98,7 +103,8 @@ export function checkCssTokens(report) {
                     add(colours, colour, where);
                 }
             }
-            if (decl.prop === 'font-family' && !/var\(/.test(value)) {
+            // a keyword (inherit, initial, unset, revert) is not a font literal
+            if (decl.prop === 'font-family' && !/var\(/.test(value) && !/^(inherit|initial|unset|revert|revert-layer)$/.test(exact)) {
                 add(fonts, exact, where);
             }
             if (SPACING_PROPERTIES.test(decl.prop) && !/var\(|calc\(|%|auto|^0$/.test(value)) {

package/check/html.js

@@ -111,8 +111,13 @@ function checkPage(report, file, source) {
     }
 
     // --- stylesheet link order: reset, tokens, main, components, page file last
-    const sheets = headEls.filter((el) => el.name === 'link' && attr(el, 'rel') === 'stylesheet')
+    const allSheets = headEls.filter((el) => el.name === 'link' && attr(el, 'rel') === 'stylesheet')
         .map((el) => ({ el, href: attr(el, 'href') ?? '' }));
+    // frontend.md: webfonts are self-hosted woff2 in src/asset/font/; no stylesheet comes from another origin
+    for (const sheet of allSheets.filter((s) => /^(https?:)?\/\//.test(s.href))) {
+        report.error(at(sheet.el), `external stylesheet ${ sheet.href } — self-host it (fonts as woff2 in src/asset/font/)`);
+    }
+    const sheets = allSheets.filter((s) => !/^(https?:)?\/\//.test(s.href));
     const names = sheets.map((s) => basename(s.href.split('?')[0]));
     const expectedStart = STYLE_ORDER.filter((n) => names.includes(n));
     if (names.slice(0, expectedStart.length).join() !== expectedStart.join()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3b-lint",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Lints a co:lab project against the rules a tool can check: ESLint, Stylelint, the 500-line limit and the shared .editorconfig; --init writes the config files.",
   "license": "GPL-3.0",
   "type": "module",