react-native-global-styler/src/styles/styleDetector.ts

Lightweight and developer-friendly React Native styling toolkit with prebuilt styled components and a powerful useGlobalStyler hook for shorthand props like m_10, radius_12, resize_cover, and more.

import { SideMatcher, sidesArr } from "./types/base/Sides";
import { GlobalStyles } from "./useGlobalStyler";

const uniqueMaps = {
  align: "alignItems",
  justify: "justifyContent",
  radius: "border{sc}Radius",
  border: "border{s}Width",
  weight: "fontWeight",
  decoration: "textDecorationLine",
  size: "fontSize",
  "p{s}": "padding",
  p: "padding",
  "m{s}": "margin",
  m: "margin",
};

export const detectStyleKeys = (key: keyof GlobalStyles): string[] => {
  const items = key.split("_");
  const sides: string[] = [];
  let generatedKey: string = "";

  const generateSides = (side) => {
    side.split("").forEach((char) => {
      sides.push(...SideMatcher[char]);
    });
  };

  if (items.length === 3) {
    generateSides(items[1]);
  }

  sidesArr.forEach((e) => {
    if (items[0].endsWith(e)) {
      const subkey = items[0].slice(0, items[0].length - e.length);
      if (uniqueMaps[subkey + "{s}"]) {
        generateSides(e);
        generatedKey = uniqueMaps[subkey + "{s}"];
      }
    }
  });

  if (!generatedKey) {
    if (uniqueMaps[items[0]]) {
      generatedKey = uniqueMaps[items[0]];
    } else {
      generatedKey = items[0];
    }
  }
  return sides.length > 0
    ? generatedKey.includes("{sc}")
      ? [generatedKey.replace("{sc}", sides.join(""))]
      : sides.map((s) =>
          generatedKey.includes("{s}")
            ? generatedKey.replace("{s}", s)
            : `${generatedKey}${s}`
        )
    : [generatedKey.replace("{s}", "").replace("{sc}", "")];
};

export const detectStyleValue = (key: keyof GlobalStyles) => {
  const items = key.split("_");
  const last = items[items.length - 1];
  const value = Number(last);
  return isNaN(value) ? last : items[0] === "opacity" ? value / 100 : value;
};