fix(treewide): enforce catppuccin/userstyles code standards (#323)

* fix(gmail): stylelint suggestions

* fix(whatsapp-web): stylelint suggestions

* fix(invidious): stylelint suggestions

* bump(invidious): version number

* fix(gmail): use `::` instead of `:` for pseudo elements

* fix(formative): follow stylelint suggestions

* fix(quizlet): follow stylelint suggestions

* ci: adjust stylelint config

* fix(quizlet): follow more stylelint suggestions

* fix(paste.rs): follow stylelint suggestions

* fix(nixos-search): namespace

* fix(nitter): follow stylelint suggestions

* ci(lint): add `deno task lint:fix`

* style: run `stylelint --fix`

* fix(lastfm): remove duplicate selectors

* fix(formative): remove duplicate selectors

* fix(deepl): remove duplicate classes

* ci(lint): introduce rules against animations & fonts

* fix(libreddit): remove unnecessary  `&`

* ci(lint): disallow boder/outline, add message

* ci(lint): disallow atRules

* treewide: replace `border` in favour of `border-color`

* treewide: reject all font alterations

* treewide: `remove outline: none`

* style: some more `border` -> `border-color`

* ci(lint): `keyframes` needs to stay

* fix(nixos-search): enforce userstyles standards

* fix(nitter): remove redundant `&`

* style(treewide): collapse definitions

* fix(chess): piece urls

* style: mixin classes -> ids

* style: reformat with prettier

* chore(treewide): add/fix metadata

* fix(lastfm): syntax error

* fix(lastfm): remove opionation

* fix(lastfm): remove duplicate classes

* ci(lint): allow animation/transition properties

* fix(lastfm): more small things

* fix(treewide): function typos

* fix(aoc): unknown unit

* fix: more genral forgotten fixes

* fix(brave-search): remove redundant `&`

* style(planetmc): unpack lookup

* fix: remove redundant code

* chore: add `vim:ft=less` to all files

* chore: remove template comment

* fix(anilist): reduce redundant code

* ci(lint): allow `no-invalid-position-at-import-rule`

* fix(twitch): lint warnings

* fix(youtube): `declaration-block-no-duplicate-custom-properties`

* fix: get rid of redundant `& {}` selectors

* fix(anilist): remove redundant `@rgb-raw`

* fix(hoppscotch): `declaration-block-no-duplicate-custom-properties`

* fix(yt): remove duplicate code

* fix(anilist): remove duplicate code

* fix(lastfm): animation name

* fix(bstats): remove redundant code

* fix(yt): remove redundant code

* fix(ichi.moe): `no-duplicate-selectors`

* fix(pinterest): use `border-color` instead of `border`

* fix(planetmc): `no-duplicate-selectors`

* fix(yt): remove over used `::selection`

* fix: use `border-color: transparent` instead of `border: none`

* fix(searxng): remove stylus-style conditional

* fix(invidious): style missing color while i'm at it

* ci(lint): add chalk ansi styling

* style(treewide): enable & fix `length-zero-no-unit`

* ci(lint): prettyprint logger

* fix(yt): fold & don't format lookup

* fix(mastodon): prevent reggressions

* refactor: `not when` -> `when not`

* fix(yt): correct `chips` reggression

* fix(yt): `border-color` reggression

* fix(yt): prevent more reggessions

* refactor(chess): use mixin for piece url

* style: collapsed definition cleanup

---------

Co-authored-by: winston <[email protected]>

src/deno.json

@@ -2,17 +2,21 @@
   "imports": {
     "@/": "./",
     "std/": "https://deno.land/[email protected]/",
+
     "catppuccin-repo/": "https://raw.githubusercontent.com/catppuccin/catppuccin/91d6b5433730103c504dcf43583b594e418ee7c1/",
     "globber": "https://deno.land/x/[email protected]/mod.ts",
+
     "@actions/core": "npm:@actions/[email protected]",
     "@octokit/rest": "npm:@octokit/[email protected]",
     "usercss-meta": "npm:[email protected]",
     "ajv": "npm:[email protected]",
+    "chalk": "npm:[email protected]",
     "less": "npm:[email protected]"
   },
   "tasks": {
     "generate": "./generate/main.ts",
     "lint": "./lint/main.ts",
+    "lint:fix": "./lint/main.ts --fix",
     "sync-maintainers": "./sync-maintainers/main.ts",
     "update-types": "deno run -A 'npm:json-schema-to-typescript' ./userstyles.schema.json types/userstyles.d.ts"
   }

src/lint/logger.ts

@@ -0,0 +1,61 @@
+import chalk from "chalk";
+import core from "@actions/core";
+
+export type LoggerProps = core.AnnotationProperties & {
+  content?: string;
+};
+
+const pretty_print = (
+  message: string,
+  props: LoggerProps,
+  severity: "error" | "warning" = "warning",
+) => {
+  const startLine = props.startLine ?? 0;
+  const lines = (props.content ?? "").split("\n");
+
+  const error = [
+    chalk[severity === "error" ? "red" : "yellow"](severity),
+    message,
+  ].join(" ");
+
+  const line = lines[startLine - 1].split("").map((char, i) => {
+    const startCol = (props.startColumn ?? 0) - 1;
+    const endCol = (props.endColumn ?? Infinity) - 1;
+
+    if (i >= startCol && i <= endCol) {
+      return chalk[severity === "error" ? "red" : "yellow"](char);
+    } else {
+      return char;
+    }
+  }).join("");
+
+  console.log(
+    [
+      `${props.file}:${chalk.grey(`${props.startLine}:${props.startColumn}`)}`,
+      ` ┃${chalk.dim(lines[startLine - 2])}`,
+      ` ┃${chalk.grey(line)}`,
+      ` ┃${chalk.dim(lines[startLine])}`,
+      error,
+      undefined,
+    ].join("\n"),
+  );
+};
+
+export const log = (
+  message: string,
+  props: LoggerProps,
+  severity: "error" | "warning" = "warning",
+) => {
+  if (Deno.env.has("CI")) {
+    switch (severity) {
+      case "error":
+        core.error(message, props);
+        break;
+      case "warning":
+        core.warning(message, props);
+        break;
+    }
+  } else {
+    pretty_print(message, props, severity);
+  }
+};

src/lint/main.ts

@@ -3,15 +3,20 @@
 // TODO: remove this once types for usercss-meta are available
 // deno-lint-ignore-file no-explicit-any
 
+import { parse as parseFlags } from "std/flags/mod.ts";
 import { basename, dirname, join, relative } from "std/path/mod.ts";
 import { globber } from "globber";
 
 import core from "@actions/core";
+import chalk from "chalk";
 // @deno-types="npm:@types/less";
 import less from "less";
 import usercssMeta from "usercss-meta";
 import { lint } from "./stylelint.ts";
 import { REPO_ROOT } from "@/deps.ts";
+import { log, LoggerProps } from "./logger.ts";
+
+const flags = parseFlags(Deno.args, { boolean: ["fix"] });
 
 const iterator = globber({
   include: ["styles/**/catppuccin.user.css"],
@@ -42,7 +47,7 @@ for await (const entry of iterator) {
   try {
     metadata = usercssMeta.parse(content).metadata;
   } catch (err) {
-    core.error(err, { file: entry.relative });
+    log(err, { file: entry.relative, content }, "error");
   }
 
   const assert = assertions(repo);
@@ -52,10 +57,23 @@ for await (const entry of iterator) {
     if (defacto !== v) {
       const line = content.split("\n").findIndex((line) => line.includes(k)) +
         1;
-      core.warning(`Metadata \`${k}\` should be ${v} but is \`${defacto}\``, {
-        file: entry.relative,
-        startLine: line !== 0 ? line : undefined,
-      });
+
+      log(
+        [
+          "Metadata",
+          chalk.bold(k),
+          "should be",
+          chalk.green(v),
+          "but is",
+          chalk.red(defacto),
+        ].join(" "),
+        {
+          file: entry.relative,
+          startLine: line !== 0 ? line : undefined,
+          content,
+        },
+        "warning",
+      );
     }
   });
 
@@ -70,26 +88,40 @@ for await (const entry of iterator) {
 
   less.render(content, { lint: true, globalVars }).then().catch(
     (err: any) => {
-      core.error(err.message, {
-        file: entry.relative,
-        startLine: err.line,
-        endLine: err.line,
-      });
+      log(
+        err.message,
+        {
+          file: entry.relative,
+          startLine: err.line,
+          endLine: err.line,
+          content,
+        },
+        "error",
+      );
     },
   );
 
-  lint(content).then(({ results }) => {
+  lint(entry.absolute, flags.fix).then(({ results }) => {
     results.sort(
       (a, b) => (a.source ?? "").localeCompare(b.source ?? ""),
     ).map((result) => {
       result.warnings.map((warning) => {
-        core.warning(warning.text ?? "unspecified", {
+        const msg = warning.text?.replace(
+          new RegExp(`\\(?${warning.rule}\\)?`),
+          chalk.dim(`(${warning.rule})`),
+        ) ??
+          "unspecified stylelint error";
+
+        const props = {
           file: entry.relative,
           startLine: warning.line,
           endLine: warning.endLine,
           startColumn: warning.column,
           endColumn: warning.endColumn,
-        });
+          content,
+        } satisfies LoggerProps;
+
+        log(msg, props, warning.severity);
       });
     });
   });

src/lint/stylelint.ts

@@ -22,14 +22,44 @@ const config: stylelint.Config = {
     "alpha-value-notation": null,
     "color-function-notation": null,
     "hue-degree-notation": null,
-    "length-zero-no-unit": null,
+
+    // less doesn't care about these
+    "no-invalid-position-at-import-rule": null,
+    "no-invalid-double-slash-comments": null,
+
+    "at-rule-disallowed-list": [[
+      "/^font.*/",
+    ], {
+      message: (atRule: string) =>
+        `At-rule ${atRule} is not allowed in Catppuccin userstyles`,
+    }],
+    "property-disallowed-list": [[
+      // disallow setting fonts
+      "/font.*/",
+
+      // ideally we could disallow these, but CSS continues to be gross
+      // "/animation.*/",
+      // "/transition.*/",
+
+      // prefer `border-color` over `border`, `outline-color` over `outline`, etc.
+      "border",
+      "outline",
+    ], {
+      message: (prop: string) => {
+        if (["border", "outline"].includes(prop)) {
+          return `Use \`${prop}-color\` instead of \`${prop}\``;
+        } else {
+          return `Property \`${prop}\` is not allowed in Catppuccin userstyles`;
+        }
+      },
+    }],
 
     "function-no-unknown": [
       true,
       {
-        // generated from https://lesscss.org/functions/
-        // via `Array.from(document.querySelectorAll('.section-content h3.docs-heading'), heading => heading.textContent.replace('\n', ''))`
         ignoreFunctions: [
+          // generated from https://lesscss.org/functions/
+          // via `Array.from(document.querySelectorAll('.section-content h3.docs-heading'), heading => heading.textContent.replace('\n', ''))`
           "%",
           "abs",
           "acos",
@@ -132,8 +162,9 @@ const base = deepMerge(
   { ...stylelintConfigStandard, extends: {} },
 );
 
-export const lint = (code: string) =>
+export const lint = (files: string, fix: boolean) =>
   stylelint.lint({
     config: deepMerge(base, config),
-    code,
+    files,
+    fix,
   });