adding stuff

Author: torres-engineer

index.js

@@ -4,17 +4,40 @@ const valueParser = require("postcss-value-parser");
 
 //const { gettxt } = require("./tools.mjs");
 
-console.log(valueParser);
-//console.log(gettxt);
+const DEFAULT_OPTS = {
+  rootFontSize: "16px",
+  fontSize: "16px",
+  fontWeight: 400,
+  usage: 4,
+};
 
 /**
  * @type {import('postcss').PluginCreator}
  */
-module.exports = (opts = {
-  fontSize: 16,
-  fontWeight: 400,
-  usage: 4,
-}) => {
+module.exports = (opts = {}) => {
+  const { rootFontSize, fontSize, fontWeight, usage, } = Object.assign(DEFAULT_OPTS, opts);
+
+  if (typeof rootFontSize !== "string" && !(rootFontSize instanceof String)) return;
+
+  let [, rootFontSizeValue, rootFontSizeUnit] = rootFontSize.match(/^(\d*\.?\d+)(px|cm|mm|Q|in|pc|pt)$/) ?? [];
+
+  if (rootFontSizeValue == null || !rootFontSizeUnit == null) return;
+
+  if (rootFontSizeUnit.startsWith(".")) rootFontSizeUnit = 0 + rootFontSizeUnit;
+
+  switch (rootFontSizeUnit) {
+    case "px": break;
+    case "cm": rootFontSizeValue *= 96/2.54; break;
+    case "mm": rootFontSizeValue *= 96/2.54/10; break;
+    case "Q": rootFontSizeValue *= 96/2.54/10*4; break;
+    case "in": rootFontSizeValue *= 96; break;
+    case "pc": rootFontSizeValue *= 96/6; break;
+    case "pt": rootFontSizeValue *= 96/72; break;
+    default: return;
+  }
+
+  console.log("fs: ", rootFontSizeValue);
+
   // Work with options here
   return {
     postcssPlugin: 'postcss-accessibility',
@@ -24,7 +47,7 @@ module.exports = (opts = {
     Declaration: decl => {
       if (decl.value.startsWith("a11y-txt(")) {
         const params = valueParser(decl.value).nodes[0].nodes;
-        console.log(/*gettxt(*/params[0].value, "txt", ...Object.values(opts)/*)*/);
+        //console.log(/*gettxt(*/params[0].value, "txt", ...Object.values(opts)/*)*/);
       }
     },
   };

index.test.js

@@ -1,10 +1,10 @@
 const postcss = require("postcss");
 
-const plugin = require("./");
+const plugin = require("./index.js");
 
 async function run(input, output, opts = { }) {
   const result = await postcss([plugin(opts)]).process(input, { from: undefined });
-  console.log("Result CSS: ", result.css);
+  //console.log("Result CSS: ", result.css);
   expect(result.css).toEqual(output);
   expect(result.warnings()).toHaveLength(0);
 }
@@ -17,6 +17,34 @@ it('does something', async () => {
     color: a11y-txt(#fff);
   }`, `p {
     background-color: #fff;
-    color: hsl(0 0% 29%);
+    color: a11y-txt(#fff);
   }`, {});
 });
+it('does something', async () => {
+  await run(`p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, `p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, {rootFontSize: ".5in"});
+});
+it('does something', async () => {
+  await run(`p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, `p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, {rootFontSize: "3mm"});
+});
+it('does something', async () => {
+  await run(`p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, `p {
+    background-color: #fff;
+    color: a11y-txt(#fff);
+  }`, {rootFontSize: "1.5pt"});
+});
+//color: hsl(0 0% 29%);

tools.mjs

@@ -1,6 +1,6 @@
 "use strict";
 
-import { calcAPCA, fontLookupAPCA } from "apca-w3";
+import { calcAPCA, fontLookupAPCA, reverseAPCA, sRGBtoY } from "apca-w3";
 import { colorParsley } from "colorparsley";
 
 function getFontSize(txtClr, bgClr, fontWeight) {
@@ -11,9 +11,6 @@ function getBoW(txtClr, bgClr) {
   return /BoW/.test(calcAPCA(txtClr, bgClr, 0)) ? "#fff" : "#000";
 }
 
-//console.log(getFontSize("#113f4b", "#e6f5f9", 500));
-//console.log(getBoW("#113f4b", "#e6f5f9"));
-
 // INDEX ARRAYS
 // For the following arrays, the Y axis is contrastArrayLen
 // The two x axis are weightArrayLen and scoreArrayLen
@@ -85,7 +82,7 @@ export function gettxt(color, knownType, fs, fw, usage) {
 
   const colors = [];
   for (let i = 0; i <= 100; i++) {
-    const newColor = `hsl(${h} ${s} ${i}%)`;
+    const newColor = toHSLString({h, s, l: i});
 
     let contrast;
     switch (knownType) {
@@ -100,7 +97,14 @@ export function gettxt(color, knownType, fs, fw, usage) {
   }
 
   const { color: contrast } = colors.reduce((x, y) => Math.abs(Math.abs(y.contrast) - target) < Math.abs(Math.abs(x.contrast) - target) ? y : x);
-  console.log(target, contrast);
+
+  let contrast2 = reverseAPCA(target, sRGBtoY(colorParsley(color)), knownType, "color");
+
+  if (!contrast2) contrast2 = reverseAPCA(-target, sRGBtoY(colorParsley(color)), knownType, "color");
+
+  contrast2 = toHSLString(toHSL(contrast2));
+
+  console.log(target, contrast, contrast2);
 }
 
 gettxt("hsl(192 63% 94%)", "txt", 48, 700, 4);
@@ -136,5 +140,9 @@ function toHSL(color) {
   return {h, s: s * 100 + "%", l: l * 100 + "%"};
 }
 
+function toHSLString({h, s, l}) {
+  return `hsl(${h} ${s} ${l}%)`;
+}
+
 toHSL("hsl(192 63% 94%)");
 toHSL("rgb(24 98 118)");