Skip to content

Commit

Permalink
refactor(tools): replace @colors/colors with smaller and faster ansis
Browse files Browse the repository at this point in the history 
- replace @colors/colors with  ansis
- add color preview for selectors used in CSS
- fix ESLint errors in tools code
  • Loading branch information
@webdiscus
webdiscus committed Jan 1, 2025
1 parent 62f8a60 commit db7fdfb
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 57 deletions.
33 changes: 17 additions & 16 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@
"node": ">=12.0.0"
},
"devDependencies": {
"@colors/colors": "^1.6.0",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-json": "^6.0.1",
"@rollup/plugin-node-resolve": "^15.3.0",
"@types/mocha": "^10.0.2",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.15.0",
"ansis": "^3.5.2",
"clean-css": "^5.3.2",
"cli-table": "^0.3.1",
"commander": "^12.1.0",
Expand Down
28 changes: 14 additions & 14 deletions tools/checkAutoDetect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const hljs = require('../build/lib/index.js');
const path = require('path');
const utility = require('../test/utility.js');
const Table = require('cli-table');
const colors = require('@colors/colors/safe.js');
const { red, grey, green, yellow } = require('ansis');

const resultTable = new Table({
head: ['expected', 'actual', 'score', '2nd best', 'score', 'info'],
Expand All @@ -29,29 +29,29 @@ function testAutoDetection(language, index, languages) {
if (actual.language !== expected && actual.secondBest.language !== expected) {
return resultTable.push([
expected,
colors.red(actual.language),
actual.relevance ? actual.relevance : colors.grey('None'),
colors.red(actual.secondBest.language),
actual.secondBest.relevance ? actual.secondBest.relevance : colors.grey('None')
red(actual.language),
actual.relevance ? actual.relevance : grey('None'),
red(actual.secondBest.language),
actual.secondBest.relevance ? actual.secondBest.relevance : grey('None')
]);
}
if (actual.language !== expected) {
return resultTable.push([
expected,
colors.yellow(actual.language),
actual.relevance ? actual.relevance : colors.grey('None'),
colors.yellow(actual.secondBest.language),
actual.secondBest.relevance ? actual.secondBest.relevance : colors.grey('None')
yellow(actual.language),
actual.relevance ? actual.relevance : grey('None'),
yellow(actual.secondBest.language),
actual.secondBest.relevance ? actual.secondBest.relevance : grey('None')
]);
}
// equal relevance is flagged
if (actual.relevance === actual.secondBest.relevance) {
return resultTable.push([
expected,
actual.language,
actual.relevance ? colors.yellow(actual.relevance) : colors.grey('None'),
actual.relevance ? yellow(actual.relevance) : grey('None'),
actual.secondBest.language,
actual.secondBest.relevance ? colors.yellow(actual.secondBest.relevance) : colors.grey('None'),
actual.secondBest.relevance ? yellow(actual.secondBest.relevance) : grey('None'),
"Relevance match."
]);
}
Expand All @@ -65,7 +65,7 @@ if (process.env.ONLY_LANGUAGES) {
languages = hljs.listLanguages().filter(hljs.autoDetection);
}

console.log('Checking auto-highlighting for ' + colors.grey(languages.length) + ' languages...');
console.log('Checking auto-highlighting for ' + grey(languages.length) + ' languages...');
languages.forEach((lang, index) => {
if (index % 60 === 0) { console.log(""); }
testAutoDetection(lang);
Expand All @@ -74,10 +74,10 @@ languages.forEach((lang, index) => {
console.log("\n");

if (resultTable.length === 0) {
console.log(colors.green('SUCCESS') + ' - ' + colors.green(languages.length) + ' of ' + colors.gray(languages.length) + ' languages passed auto-highlight check!');
console.log(green('SUCCESS') + ' - ' + green(languages.length) + ' of ' + grey(languages.length) + ' languages passed auto-highlight check!');
} else {
console.log(
colors.red('ISSUES') + ' - ' + colors.red(resultTable.length) + ' of ' + colors.gray(languages.length) + ' languages have potential issues.'
red('ISSUES') + ' - ' + red(resultTable.length) + ' of ' + grey(languages.length) + ' languages have potential issues.'
+ '\n'
+ resultTable.toString());
}
56 changes: 30 additions & 26 deletions tools/checkTheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const css = require("css");
const wcagContrast = require("wcag-contrast");
const Table = require('cli-table');
const csscolors = require('css-color-names');
require("@colors/colors");
const { cyan, green, yellow, magentaBright, hex } = require('ansis');

const CODE = {
name: "program code",
Expand Down Expand Up @@ -167,37 +167,36 @@ function check_group(group, rules) {
return [scope, has_rule(selector, rules), skips_rule(selector, rules)];
});


const doesNotSupport = has_rules.map(x => x[1]).includes(false);
const skipped = has_rules.find(x => x[2]);
if (doesNotSupport || skipped) {
console.log(group.name.yellow);
console.log(yellow(group.name));
if (doesNotSupport) {
console.log(`- Theme does not fully support.`.brightMagenta);
console.log(magentaBright`- Theme does not fully support.`);
}

has_rules.filter(x => !x[1]).forEach(([scope, _]) => {
const selector = scopeToSelector(scope);
console.log(`- scope ${scope.cyan} is not highlighted\n (css: ${selector.green})`);
console.log(`- scope ${cyan(scope)} is not highlighted\n (css: ${green(selector)})`);
});
has_rules.filter(x => x[2]).forEach(([scope, _]) => {
console.log(` - scope ${scope.cyan} [purposely] un-highlighted.`.cyan);
console.log(` - scope ${cyan(scope)} [purposely] un-highlighted.`);
});
console.log();
}
}

const round2 = (x) => Math.round(x*100)/100;
const round2 = (x) => Math.round(x * 100) / 100;

class CSSRule {
constructor(rule, body) {
this.rule = rule;
if (rule.declarations) {
this.bg = rule.declarations.find(x => x.property == "background-color")?.value;
this.bg = rule.declarations.find(x => x.property === "background-color")?.value;
if (!this.bg) {
this.bg = rule.declarations.find(x => x.property == "background")?.value;
this.bg = rule.declarations.find(x => x.property === "background")?.value;
}
this.fg = rule.declarations.find(x => x.property =="color")?.value;
this.fg = rule.declarations.find(x => x.property === "color")?.value;

if (this.bg) {
this.bg = csscolors[this.bg] || this.bg;
Expand All @@ -213,54 +212,58 @@ class CSSRule {
}
}
}

get background() {
return this.bg
return this.bg;
}

get foreground() {
return this.fg
return this.fg;
}

get hasColor() {
if (!this.rule.declarations) return false;
return this.fg || this.bg;
}

toString() {
return ` ${this.foreground} on ${this.background}`
return ` ${this.foreground} on ${this.background}`;
}

contrastRatio() {
if (!this.foreground) return "unknown (no fg)"
if (!this.background) return "unknown (no bg)"
if (!this.foreground) return "unknown (no fg)";
if (!this.background) return "unknown (no bg)";
return round2(wcagContrast.hex(this.foreground, this.background));
}
}

function contrast_report(rules) {
console.log("Accessibility Report".yellow);
console.log(yellow`Accessibility Report`);

var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));
var body = new CSSRule(hljs);
const hljs = rules.find(x => x.selectors && x.selectors.includes(".hljs"));
const body = new CSSRule(hljs);
const table = new Table({
chars: {'mid': '', 'left-mid': '', 'mid-mid': '', 'right-mid': ''},
chars: { mid: '', 'left-mid': '', 'mid-mid': '', 'right-mid': '' },
head: ['ratio', 'selector', 'fg', 'bg'],
colWidths: [7, 40, 10, 10],
colWidths: [7, 40, 12, 12],
style: {
head: ['grey']
}
});

rules.forEach(rule => {
var color = new CSSRule(rule, body);
const color = new CSSRule(rule, body);
if (!color.hasColor) return;
table.push([
color.contrastRatio(),
rule.selectors,
color.foreground,
color.background
])
// colorize the foreground and background colors
hex(color.foreground)('██') + ' ' + color.foreground,
hex(color.background)('██') + ' ' + color.background
]);
// console.log(r.selectors[0], color.contrastRatio(), color.toString());
})
console.log(table.toString())
});
console.log(table.toString());
}

function validate(data) {
Expand All @@ -275,6 +278,7 @@ function validate(data) {
check_group(OTHER, rules);
check_group(HIGH_FIDELITY, rules);


contrast_report(rules);
}

Expand Down

0 comments on commit db7fdfb

Please sign in to comment.