it works!!! and with es6

Author: torres-engineer

index.js

@@ -1,56 +1,72 @@
 "use strict";
 
-const valueParser = require("postcss-value-parser");
+import valueParser from "postcss-value-parser";
 
-//const { gettxt } = require("./tools.mjs");
+import { gettxt } from "./tools.mjs";
 
-const DEFAULT_OPTS = {
+const OPTIONS = {
   rootFontSize: "16px",
   fontSize: "16px",
   fontWeight: 400,
   usage: 4,
 };
 
+function plugin(options = {}) {
+  const { rootFontSize, fontSize, fontWeight, usage, } = Object.assign(OPTIONS, options);
+
+  let curM = OPTIONS.rootM = getFontSizePX(rootFontSize);
+
+  return {
+    postcssPlugin: "postcss-accessibility",
+
+    Declaration(decl) {
+      const values = decl.value.split(/(?!\(.*)\s(?![^(]*?\))/g);
+
+      for (const valueIndex in values) {
+        const value = values[valueIndex];
+        if (value.startsWith("a11y-txt(")) {
+          const params = valueParser(value).nodes[0].nodes
+            .filter(i => i.type !== "div")
+            .map(i => {
+              switch (i.type) {
+                case "word": return i.value;
+                case "function": return `${i.value}(${i.nodes.filter(i => i.type !== "div").map(i => i.value).join("")})`;
+              }
+            });
+          decl.value = gettxt(params[0], "txt", `${getFontSizePX(params[1] ?? fontSize, curM)}px`, params[2] ?? fontWeight, params[3] ?? usage);
+        }
+      }
+    }
+  }
+}
+plugin.postcss = true;
+
 /**
  * @type {import('postcss').PluginCreator}
  */
-module.exports = (opts = {}) => {
-  const { rootFontSize, fontSize, fontWeight, usage, } = Object.assign(DEFAULT_OPTS, opts);
+export default plugin;
+
+function getFontSizePX(fontSize, M = OPTIONS.rootM) {
+  if (typeof fontSize !== "string" && !(fontSize instanceof String)) return;
 
-  if (typeof rootFontSize !== "string" && !(rootFontSize instanceof String)) return;
+  let [, value, unit] = fontSize.match(/^(\d*\.?\d+)(px|cm|mm|Q|in|pc|pt|rem|em)$/) ?? [];
 
-  let [, rootFontSizeValue, rootFontSizeUnit] = rootFontSize.match(/^(\d*\.?\d+)(px|cm|mm|Q|in|pc|pt)$/) ?? [];
+  if (unit.includes("em") && !OPTIONS.rootM) return;
 
-  if (rootFontSizeValue == null || !rootFontSizeUnit == null) return;
+  if (value == null || !unit == null) return;
 
-  if (rootFontSizeUnit.startsWith(".")) rootFontSizeUnit = 0 + rootFontSizeUnit;
+  if (unit.startsWith(".")) unit = 0 + unit;
 
-  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;
+  switch (unit) {
+    case "em": return value * M;
+    case "rem": return value * OPTIONS.rootM;
+    case "px": return value;
+    case "cm": return value * 96/2.54;
+    case "mm": return value * 96/2.54/10;
+    case "Q": return value * 96/2.54/10*4;
+    case "in": return value * 96;
+    case "pc": return value * 96/6;
+    case "pt": return value * 96/72;
     default: return;
   }
-
-  console.log("fs: ", rootFontSizeValue);
-
-  // Work with options here
-  return {
-    postcssPlugin: 'postcss-accessibility',
-    //Rule: rule => {
-    //  console.log(rule);
-    //},
-    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)/*)*/);
-      }
-    },
-  };
 }
-
-module.exports.postcss = true;

index.test.js

@@ -1,6 +1,6 @@
-const postcss = require("postcss");
+import postcss from "postcss";
 
-const plugin = require("./index.js");
+import plugin from "./index.js";
 
 async function run(input, output, opts = { }) {
   const result = await postcss([plugin(opts)]).process(input, { from: undefined });
@@ -11,40 +11,14 @@ async function run(input, output, opts = { }) {
 
 // Write tests here
 
-it('does something', async () => {
+it("finds the best text color for the background-color: hsl(192deg, 62%, 94%)", async () => {
   await run(`p {
-    background-color: #fff;
-    color: a11y-txt(#fff);
+    background-color: hsl(192 62% 94%);
+    color: a11y-txt(hsl(192 62% 94%), 1.75em, 400);
+    font-size: 1.75em;
   }`, `p {
-    background-color: #fff;
-    color: a11y-txt(#fff);
+    background-color: hsl(192 62% 94%);
+    color: hsl(192.63157894736838 61.290322580645174% 17%);
+    font-size: 1.75em;
   }`, {});
 });
-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%);

package.json

@@ -56,5 +56,6 @@
     "apca-w3": "^0.1.9",
     "colorparsley": "^0.1.8",
     "postcss-value-parser": "^4.2.0"
-  }
+  },
+  "type": "module"
 }

tools.mjs

@@ -98,19 +98,35 @@ 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);
 
+  const colors3 = [];
+  for (let i = 0; i <= 100; i++) {
+    const newColor = toHSLString({h: 0, s: 0, l: i});
+
+    let contrast;
+    switch (knownType) {
+      case "txt": contrast = calcAPCA(newColor, color); break;
+      case "bg": contrast = calcAPCA(color, newColor); break;
+    }
+
+    colors3.push({
+      color: newColor,
+      contrast
+    });
+  }
+
+  const { color: contrast3 } = colors3.reduce((x, y) => Math.abs(Math.abs(y.contrast) - target) < Math.abs(Math.abs(x.contrast) - target) ? y : x);
+
   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);
+  //console.log(target, contrast, contrast2, contrast3);
+  
+  return contrast;
 }
 
-gettxt("hsl(192 63% 94%)", "txt", 48, 700, 4);
-gettxt("hsl(192 63% 94%)", "txt", 16, 400, 4);
-gettxt("#fff", "txt", 16, 400, 4);
-
 function toHSL(color) {
   let [r, g, b] = colorParsley(color);
   r /= 255;
@@ -143,6 +159,3 @@ function toHSL(color) {
 function toHSLString({h, s, l}) {
   return `hsl(${h} ${s} ${l}%)`;
 }
-
-toHSL("hsl(192 63% 94%)");
-toHSL("rgb(24 98 118)");